/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — the whole design system lives here
   ───────────────────────────────────────────────────────────────────────────
   Direction: "Calm Precision".
   The spaciousness and type discipline of a premium consumer product page,
   applied to industrial metrology instead of phones.

   Every colour pair below was measured, not eyeballed. The measured WCAG
   contrast ratio is in the comment. If you change a value, re-measure it —
   the site leans on these numbers for its readability.

   Two surfaces, two token sets:
     · page tokens      (light by default, overridden by [data-theme="dark"])
     · console tokens    (--k-*) — the machining console is always dark in both
       themes, because that is the one place the design wants a machine's
       screen rather than a page.

   Fonts: Schibsted Grotesk (display) · Manrope (body) · IBM Plex Mono (data).
   All three are SIL OFL — free for commercial use, no attribution required.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Page surfaces ───────────────────────────────────────────────────── */
  --bg:            #F4F5F7;
  --bg-deep:       #ECEEF1;
  --surface:       #FFFFFF;
  --surface-2:     #ECEEF1;
  --surface-3:     #E2E5EA;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --ink:           #0E1116;   /* 17.34:1 on --bg */
  --ink-2:         #3D434C;   /*  9.14:1 on --bg */
  --ink-3:         #5A6169;   /*  5.75:1 on --bg · 5.40:1 on --surface-2 */

  /* ── Hairlines ───────────────────────────────────────────────────────── */
  --line:          rgba(14, 17, 22, 0.10);
  --line-2:        rgba(14, 17, 22, 0.18);
  --line-3:        rgba(14, 17, 22, 0.06);

  /* ── The single accent ──────────────────────────────────────────────── */
  --accent:        #0A56F0;   /* blocks, buttons — white on it 5.83:1 */
  --accent-ink:    #0A46C4;   /* when the accent IS the text — 7.17:1 on --bg */
  --accent-deep:   #0838A0;
  --accent-soft:   rgba(10, 86, 240, 0.10);
  --accent-glow:   rgba(10, 86, 240, 0.24);
  /* Text that sits ON the accent. Flips to near-black in dark mode, where
     the accent is a light blue and white would fail contrast. */
  --on-accent:     #FFFFFF;

  /* ── Semantic status — information, never decoration ─────────────────── */
  --ok:            #157F3D;   /* 4.66:1 on --bg */
  --ok-bg:         #E8F3EC;
  --ok-ink:        #0E6430;
  --warn:          #9A6400;   /* 4.59:1 on --bg */
  --warn-bg:       #F6EEDC;
  --warn-ink:      #7A5000;
  --high:          #C0261A;   /* 5.45:1 on --bg */
  --high-bg:       #F9E9E7;
  --high-ink:      #A81E15;

  /* ── The console (always dark) ──────────────────────────────────────── */
  --k-bg:          #0A0B0E;
  --k-surface:     #14161A;
  --k-surface-2:   #1B1E24;
  --k-surface-3:   #23272E;
  --k-ink:         #F7F8FA;   /* 18.52:1 on --k-bg */
  --k-ink-2:       #B9BFC9;   /*  9.80:1 on --k-surface */
  --k-ink-3:       #8A929E;   /*  5.77:1 on --k-surface */
  --k-line:        rgba(247, 248, 250, 0.11);
  --k-line-2:      rgba(247, 248, 250, 0.20);
  --k-accent:      #4F8CFF;   /* 5.63:1 on --k-surface */
  --k-accent-2:    #86B1FF;
  --k-accent-soft: rgba(79, 140, 255, 0.14);
  --k-ok:          #5FD68A;
  --k-warn:        #F5C451;
  --k-high:        #FF8A73;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --f-display: "Schibsted Grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Manrope", "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --f-cjk:     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* fluid display sizes — clamp(min, preferred, max) */
  --fs-d1: clamp(2.75rem, 7.4vw, 6.5rem);    /* 44 → 104 px */
  --fs-d2: clamp(2.125rem, 4.8vw, 4rem);     /* 34 → 64 px  */
  --fs-d3: clamp(1.625rem, 3vw, 2.5rem);     /* 26 → 40 px  */
  --fs-h4: 1.375rem;                          /* 22 px */
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.375rem); /* 17 → 22 px */
  --fs-body: 1.0625rem;                       /* 17 px — the reading size */
  --fs-sm:   0.9375rem;                       /* 15 px */
  --fs-xs:   0.8125rem;                       /* 13 px */
  --fs-mono: 0.8125rem;
  --fs-eyebrow: 0.6875rem;                    /* 11 px, always uppercase */

  --lh-tight: 1.02;
  --lh-snug:  1.14;
  --lh-body:  1.62;
  --tr-tight: -0.035em;
  --tr-snug:  -0.02em;
  --tr-wide:   0.14em;

  /* ── Space — a fixed ladder, never improvised ────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-1: 6px;  --r-2: 10px;  --r-3: 16px;  --r-4: 22px;  --r-5: 30px;
  --r-pill: 980px;

  /* ── Elevation — three levels, ambient colour not black ──────────────── */
  --sh-1: 0 1px 2px rgba(14, 17, 22, 0.05), 0 1px 1px rgba(14, 17, 22, 0.04);
  --sh-2: 0 6px 20px rgba(14, 17, 22, 0.07), 0 2px 6px rgba(14, 17, 22, 0.04);
  --sh-3: 0 24px 60px rgba(14, 17, 22, 0.12), 0 6px 18px rgba(14, 17, 22, 0.06);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 140ms;   /* hover / press */
  --dur-2: 320ms;   /* panels, menus */
  --dur-3: 620ms;   /* scene changes */
  --dur-4: 1200ms;  /* the drawing */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --shell: 1240px;
  --shell-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 52px;
}

/* ═══ Dark theme — same components, different numbers ═══════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #08090B;
  --bg-deep:   #0E1014;
  --surface:   #111316;
  --surface-2: #191C21;
  --surface-3: #22262C;

  --ink:   #F5F6F8;
  --ink-2: #B7BDC7;
  --ink-3: #8A929E;   /* 5.77:1 on --surface */

  --line:    rgba(245, 246, 248, 0.11);
  --line-2:  rgba(245, 246, 248, 0.20);
  --line-3:  rgba(245, 246, 248, 0.06);

  --accent:     #3D7DFF;
  --accent-ink: #86B1FF;   /* 8.41:1 on --surface */
  --accent-deep:#9CC0FF;
  --accent-soft:rgba(61, 125, 255, 0.16);
  --accent-glow:rgba(61, 125, 255, 0.30);
  --on-accent:  #06111F;   /* 6.5:1 on #3D7DFF */

  --ok:      #5FD68A;  --ok-bg:   rgba(95, 214, 138, 0.13);  --ok-ink:  #8FE8AE;
  --warn:    #F5C451;  --warn-bg: rgba(245, 196, 81, 0.13);  --warn-ink:#FFD97A;
  --high:    #FF8A73;  --high-bg: rgba(255, 138, 115, 0.13); --high-ink:#FFA894;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --sh-3: 0 24px 60px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}