/*
  knects brand tokens — v1
  Drop this file into any knects project and consume the custom properties below.
  Source of truth: Knects Brand Kit.dc.html (design_handoff_knects_brand_kit/)
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Color — brand */
  --knects-primary: oklch(0.47 0.19 255);       /* Intel Blue — #0071C5 — logo, primary UI, links */
  --knects-accent: oklch(0.74 0.11 235);        /* Sky Blue — #4FA3E3 — accent node/dot, hover states */
  --knects-accent-on-dark: oklch(0.85 0.05 235);/* Pale Blue — ~#B9D9F2 — accent dot on blue/dark backgrounds */
  --knects-accent-surface: oklch(0.97 0.005 255);/* Ice — #F5F8FC — light accent surface */

  --knects-gradient: linear-gradient(135deg, oklch(0.58 0.17 248), oklch(0.28 0.15 264)); /* #2E86D9 → #14265B */
  --knects-gradient-start: oklch(0.58 0.17 248); /* #2E86D9 */
  --knects-gradient-end: oklch(0.28 0.15 264);   /* #14265B */

  /* Color — neutrals */
  --knects-ink: oklch(0.20 0.02 260);           /* #232733 — headings, body dark text */
  --knects-ink-soft: oklch(0.45 0.02 260);      /* #6C7280 — secondary text */
  --knects-border: oklch(0.88 0.008 260);       /* #D8DAE0 — hairlines, card borders */
  --knects-surface: oklch(0.965 0.006 260);     /* #F4F5F7 — section fills */
  --knects-background: oklch(0.99 0.004 260);   /* #FCFCFD — page background */

  /* Typography */
  --knects-font-display: 'Sora', sans-serif;    /* headlines, wordmark, section titles — weights 600–800 */
  --knects-font-body: 'Manrope', sans-serif;    /* body copy, UI, documents — weights 400–700 */

  /* Type scale (size/weight, from the brand kit) */
  --knects-text-hero: 800 56px/1.05 var(--knects-font-display);
  --knects-text-h1: 800 48px/1.1 var(--knects-font-display);
  --knects-text-h2: 700 28px/1.2 var(--knects-font-display);
  --knects-text-h3: 700 22px/1.3 var(--knects-font-display);
  --knects-text-body: 500 17px/1.6 var(--knects-font-body);
  --knects-text-small: 400 14px/1.5 var(--knects-font-body);

  /* Shape */
  --knects-radius-card: 14px;
  --knects-radius-panel: 20px;
  --knects-radius-icon-container: 8px;

  /* Iconography */
  --knects-icon-stroke: 2.6px;   /* 2.4–2.6px per spec */
  --knects-icon-grid: 24px;
}