/* ════════════════════════════════════════════════════════════════════════════
   THE SINGULARITY · DESIGN TOKENS  v2.0
   Single source of truth. Two tiers: PRIMITIVES → SEMANTIC.
   Pure monochrome. No gradients. Depth is dither + ASCII. Squared widgets.
   Color lives in registers: bright-white = signal/live/action only.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMITIVES · Void (near-black, dark-first) ───────────────────────────── */
  --void-900: #08080A;   /* true base — the event horizon */
  --void-850: #0E0E12;   /* primary dark ink */
  --void-800: #131318;   /* surface */
  --void-700: #18181E;   /* surface raised */
  --void-600: #1F1F26;   /* surface raised 2 */
  --void-500: #26262E;   /* hairline-on-dark / chips */

  /* ── PRIMITIVES · Paper (warm off-white) ──────────────────────────────────── */
  --paper-50: #F4F3F0;   /* primary light canvas */
  --paper-0:  #FCFBF9;   /* elevated light surface */

  /* ── PRIMITIVES · Neutral gray ramp ───────────────────────────────────────── */
  --gray-100: #C9C9CE;
  --gray-200: #A6A6AD;
  --gray-300: #828289;
  --gray-400: #5E5E66;
  --gray-500: #3A3A42;

  /* ── PRIMITIVES · Signal — PURE MONOCHROME (no chromatic accent) ───────────── */
  --white: #FFFFFF;   /* the signal / live / action register — bright white ONLY */

  /* ── PRIMITIVES · Data semantics — MONOCHROME (form, never hue) ───────────── */
  --data-up:   #FFFFFF;          /* always paired with ▲ + label */
  --data-down: var(--gray-400);  /* #5E5E66 — always paired with ▼ + label */
  --data-flat: var(--gray-200);  /* #A6A6AD */

  /* ── SEMANTIC · Surface & ink (dark-first defaults) ───────────────────────── */
  --bg:            var(--void-900);
  --bg-elev:       var(--void-800);
  --bg-elev-2:     var(--void-700);
  --surface:       var(--void-800);
  --surface-raise: var(--void-700);
  --ink:           var(--paper-50);   /* primary text on dark */
  --ink-soft:      var(--gray-200);   /* secondary text */
  --ink-mute:      var(--gray-300);   /* tertiary / captions */
  --ink-faint:     var(--gray-400);   /* disabled / hint */
  --line:          var(--void-500);   /* hairline */
  --line-strong:   var(--gray-500);
  --accent:        var(--white);      /* the signal register — bright white */
  --accent-ink:    var(--void-900);   /* text on inverse (white) fills */

  /* ── TYPOGRAPHY · families ────────────────────────────────────────────────── */
  --font-sans: 'Clash Grotesk Variable', 'Clash Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* fluid type scale — size : line-height : tracking (clamp min … max) */
  --t-display-2xl: clamp(3.5rem, 1.2rem + 9vw, 8rem);     /* 56→128 */
  --t-display-xl:  clamp(2.75rem, 1.4rem + 6vw, 5rem);    /* 44→80  */
  --t-display:     clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);/* 36→56  */
  --t-h1:          clamp(2rem, 1.5rem + 2vw, 2.75rem);    /* 32→44  */
  --t-h2:          clamp(1.5rem, 1.2rem + 1.2vw, 2rem);   /* 24→32  */
  --t-h3:          clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);/* 20→24  */
  --t-body-lg:     1.125rem;   /* 18 */
  --t-body:        1rem;       /* 16 */
  --t-body-sm:     0.875rem;   /* 14 */
  --t-eyebrow:     0.75rem;    /* 12 — uppercase +0.1em */
  --t-mono:        0.8125rem;  /* 13 */
  --t-mono-sm:     0.6875rem;  /* 11 */

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-text:  1.55;
  --lh-loose: 1.7;

  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0em;
  --tr-label:   0.1em;     /* eyebrows / labels */
  --tr-mono:    0.02em;

  /* ── SPACE · 8px base rhythm (2 → 160) ────────────────────────────────────── */
  --space-01: 0.125rem; /* 2  */
  --space-02: 0.25rem;  /* 4  */
  --space-03: 0.5rem;   /* 8  */
  --space-04: 0.75rem;  /* 12 */
  --space-05: 1rem;     /* 16 */
  --space-06: 1.5rem;   /* 24 */
  --space-07: 2rem;     /* 32 */
  --space-08: 3rem;     /* 48 */
  --space-09: 4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6.5rem;   /* 104 */
  --space-12: 8rem;     /* 128 */
  --space-13: 10rem;    /* 160 */

  /* ── LAYOUT ───────────────────────────────────────────────────────────────── */
  --measure: 66ch;          /* optimal reading width */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: var(--space-06);
  --col-count: 12;

  /* ── RADIUS · SQUARED — widgets have no radius (architectural). ───────────── */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-app: 22.5%;   /* the ONE exception — the app-icon container */
  --hairline: 1px;

  /* ── TEXTURE · the two filters ────────────────────────────────────────────── */
  --dither-pitch: 4px;   /* 8×8 Bayer dot pitch @1x — locked to grid */
  --dither-matrix: 8;
  --ascii-cell: 9px;     /* ASCII monospace cell @1x */

  /* ── MOTION ───────────────────────────────────────────────────────────────── */
  --ease-gravity: cubic-bezier(0.2, 0, 0, 1);       /* primary — emphasized decelerate */
  --ease-settle:  cubic-bezier(0.25, 0.8, 0.25, 1); /* secondary — gentle */
  --ease-linear:  linear;                            /* tone-field drift */
  --dur-micro: 120ms;
  --dur-ui:    200ms;
  --dur-reveal:320ms;
  --dur-hero:  400ms;

  /* ── ELEVATION · monochrome. Focus = a sharp white ring (no soft glow). ───── */
  --focus-ring: 0 0 0 2px var(--void-900), 0 0 0 3px var(--white);
  --glow-accent: var(--focus-ring);
  --glow-accent-strong: 0 0 0 2px var(--void-900), 0 0 0 3px var(--white);
  --shadow-paper: 0 1px 2px rgba(8,8,10,0.06), 0 8px 24px rgba(8,8,10,0.08);

  /* ── Z ────────────────────────────────────────────────────────────────────── */
  --z-nav: 100; --z-overlay: 200; --z-modal: 300;
}

/* Light context override (paper surfaces) */
[data-theme="paper"] {
  --bg: var(--paper-50);
  --bg-elev: var(--paper-0);
  --surface: var(--paper-0);
  --surface-raise: #FFFFFF;
  --ink: var(--void-850);
  --ink-soft: var(--gray-400);
  --ink-mute: var(--gray-300);
  --ink-faint: var(--gray-200);
  --line: #E4E2DC;
  --line-strong: var(--gray-200);
  --accent: var(--void-900);   /* on paper, the signal is pure black */
  --accent-ink: var(--paper-0);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-ui: 0ms; --dur-reveal: 0ms; --dur-hero: 0ms; }
}