/* ============================================================
   CMX · The Instrument
   tokens.css · single source of truth for the design system.
   No magic numbers in component CSS: everything references a token.
   Brand cyan sampled from the live logo (#00d4ff), deep #0099cc.
   ============================================================ */

:root {
  /* ---- Depth scale (near-black) ------------------------------ */
  --c-void: #060608;        /* deepest field, page edges          */
  --c-bg: #0a0a0f;          /* base background (matches theme)    */
  --c-surface: #101019;     /* lifted surface                     */
  --c-surface-2: #14141f;   /* second lift, cards/insets          */
  --c-line: color-mix(in oklch, white 8%, transparent);   /* hairline */
  --c-line-strong: color-mix(in oklch, white 16%, transparent);

  /* ---- Ink --------------------------------------------------- */
  --c-text: #f2f4f8;
  --c-muted: #8b8f9a;
  --c-faint: #7c808c;   /* dimmest ink, still WCAG AA on --c-bg (approx 5:1) */

  /* ---- The one true signal (electric cyan) ------------------- */
  --c-signal: oklch(0.80 0.14 214);             /* ≈ #00d4ff      */
  --c-signal-hex: #00d4ff;                       /* fallback       */
  --c-signal-deep: oklch(0.66 0.13 220);         /* ≈ #0099cc      */
  --c-signal-bright: oklch(0.90 0.12 210);       /* hot core       */
  --c-signal-soft: color-mix(in oklch, var(--c-signal) 18%, transparent);
  --c-signal-faint: color-mix(in oklch, var(--c-signal) 9%, transparent);
  --c-signal-glow: color-mix(in oklch, var(--c-signal) 35%, transparent);
  --c-signal-ink: oklch(0.18 0.05 220);          /* text on signal */

  /* ---- Type ramps -------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid display scale, 360px → 1920px via clamp() */
  --t-display: clamp(3rem, 1.2rem + 8vw, 9rem);     /* hero wordmark */
  --t-h1: clamp(2.4rem, 1.2rem + 5.2vw, 6rem);
  --t-h2: clamp(1.9rem, 1.1rem + 3.4vw, 4rem);
  --t-h3: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  --t-lead: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --t-body: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --t-small: 0.9375rem;
  --t-mono: clamp(0.7rem, 0.66rem + 0.15vw, 0.8rem);  /* eyebrow/meta */

  --lh-tight: 1.02;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --ls-tight: -0.03em;
  --ls-tighter: -0.045em;
  --ls-mono: 0.22em;       /* tracked-out mono labels */

  --measure: 64ch;         /* body line length 60–75 chars */

  /* ---- Spacing scale (rem) ----------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;
  /* fluid section rhythm */
  --space-section: clamp(3.5rem, 3rem + 5vw, 7rem);

  /* ---- Layout ------------------------------------------------ */
  --page-max: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --spine-x: clamp(1.5rem, 7vw, 9rem);   /* spine offset from left */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---- Motion ------------------------------------------------ */
  --ease-instrument: cubic-bezier(0.16, 1, 0.3, 1);  /* slow settle */
  --ease-calibrate: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.4s;
  --dur-2: 0.8s;
  --dur-3: 1.2s;
  --dur-draw: 1.6s;

  /* ---- Elevation / glow -------------------------------------- */
  --glow-signal: 0 0 24px var(--c-signal-glow), 0 0 60px var(--c-signal-soft);
  --shadow-lift: 0 30px 80px -40px rgb(0 0 0 / 0.8);

  color-scheme: dark;
}