/*
 * Atomiq design tokens. Every raw value in the system lives here; components
 * read the semantic roles (surface, text, action, border…), never a hex code.
 * See docs/design-spec.md §4 for the reasoning behind each scale.
 */
:root {
  /* ── Frame ─────────────────────────────────────────────────────────────── */
  --u: clamp(.85px, 100vw / 1470, 1.3px);   /* one design pixel; design frame 1470 × 956 */

  /* ── Space (4-based, scales with the frame) ───────────────────────────── */
  --s4: calc(var(--u) * 4);  --s8: calc(var(--u) * 8);  --s12: calc(var(--u) * 12); --s16: calc(var(--u) * 16);
  --s24: calc(var(--u) * 24); --s32: calc(var(--u) * 32); --s48: calc(var(--u) * 48); --s72: calc(var(--u) * 72);
  --s120: calc(var(--u) * 120); --s192: calc(var(--u) * 192);
  --space-1: var(--s4);  --space-2: var(--s8);  --space-3: var(--s12); --space-4: var(--s16); --space-5: var(--s24);
  --space-6: var(--s32); --space-7: var(--s48); --space-8: var(--s72); --space-9: var(--s120); --space-10: var(--s192);

  /* ── Colour primitives (never read outside this file) ─────────────────── */
  --site: #000;
  --brand-citron: #d2cd9a;
  --brand-saffron: #d7ae72;
  --brand-accent: var(--brand-saffron);
  --accent-spot: var(--brand-saffron);
  --accent-highlight: color-mix(in srgb, var(--brand-saffron) 74%, white);
  --bg: #121214; --panel: #18181a; --card: #242428; --control: #3c3c40;
  --lavender: #c8a9eb; --lavender-300: #d4c0ef; --lavender-200: #d9c6f1; --lavender-100: #e9dcfa;
  --lavender-700: #614478; --lavender-800: #4a335c;
  --yellow: var(--accent-spot); --cyan: #7cf8fa; --coral: #f0634f; --steel: #6f83a2;

  --glass: rgba(24, 24, 26, .52);
  --glass-light: rgba(252, 252, 252, .08);
  --glass-filter: blur(calc(var(--u) * 24)) saturate(1.4);
  --fill-1: rgba(252, 252, 252, .06);
  --fill-2: rgba(252, 252, 252, .1);
  --fill-3: rgba(252, 252, 252, .16);
  --rule:   rgba(252, 252, 252, .14);
  --chip-blur: blur(calc(var(--u) * 12)) saturate(1.4);

  --l-bg: #e8e5ef;
  --l-surface: rgba(252, 251, 255, .82); --l-surface-2: rgba(255, 255, 255, .6);
  --l-ink-1: #17161b; --l-ink-2: #5d5a67; --l-ink-3: #686471;
  --l-fill-1: rgba(23, 22, 27, .05); --l-fill-2: rgba(23, 22, 27, .09); --l-rule: rgba(23, 22, 27, .1);
  --l-lift: 0 calc(var(--u) * 24) calc(var(--u) * 60) calc(var(--u) * -24) rgba(60, 40, 110, .18);
  --l-glass-filter: blur(calc(var(--u) * 20)) saturate(1.5);

  /* --ink-3 meets 4.5:1 on --card (#242428), the darkest surface it labels. */
  --ink-1: #fcfcfc; --ink-2: #a4a4aa; --ink-3: #96969c;
  --mist: #d9d6de; --plum-950: #1d1724;

  --grad-dawn: linear-gradient(90deg, #f3624f 0%, #b0665d 21%, #645a5b 32%, #314045 42%, #141519 53%, #243b41 63%, #456272 74%, #6f82a2 84%, #a6a0d0 95%, #b7a6dc 100%);
  --grad-golden: linear-gradient(90deg, #caaaeb 0%, #d1c0a6 45%, var(--accent-spot) 100%);

  /* ── Semantic colour roles (dark tone; .tone-light swaps them) ────────── */
  --surface-page: var(--site);
  --surface-raised: var(--panel);
  --surface-card: var(--card);
  --surface-sunken: var(--bg);
  --text-strong: var(--ink-1);
  --text: var(--mist);
  --text-muted: var(--ink-2);
  --text-subtle: var(--ink-3);
  --text-accent: var(--lavender);
  --border: var(--rule);
  --border-strong: rgba(252, 252, 252, .24);
  /* One primary action colour everywhere. Saffron is reserved for evidence and data. */
  --action-primary: var(--lavender-300);
  --action-primary-hover: var(--lavender-100);
  --action-primary-ink: var(--plum-950);
  --action-secondary: var(--fill-2);
  --action-secondary-hover: var(--fill-3);
  --spotlight: var(--accent-highlight);
  --focus-ring: var(--lavender-200);

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* One face per role on every OS: Instrument Sans reads, Geist Pixel displays,
     Martian Mono labels data. */
  --font-text:  "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-pixel: "Geist Pixel Square", "Instrument Sans", sans-serif;
  --font-dots:  "Geist Pixel Circle", "Geist Pixel Square", sans-serif;
  --font-data:  "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid editorial scale (scales with the frame). */
  --t-s: calc(var(--u) * 13); --lh-s: 1.3;  --tr-s: 0;
  --t-m: calc(var(--u) * 16); --lh-m: 1.45; --tr-m: -.011em;
  --t-l: calc(var(--u) * 28); --lh-l: 1.15; --tr-l: -.025em;
  --tr-caps: .06em; --tr-caps-mono: .07em;  /* Martian Mono is wide; caps need little extra air */
  /* Instrument Sans is narrow: display sizes need far less negative tracking than Helvetica did. */
  --tr-display: -0.042em; --tr-title: -0.03em; --tr-snug: -0.016em;
  --d-1: min(calc(var(--u) * 176), 12.6vw); --lh-d1: .86;
  --d-2: calc(var(--u) * 56); --lh-d2: 1;

  /* Fixed interface scale for component text. 11px is the floor for any text. */
  --fs-label: 11px;  /* caps labels, timestamps, source chips */
  --fs-xs: 12px;     /* captions, legal */
  --fs-s: 13px;      /* dense UI */
  --fs-ui: 14px;     /* controls */
  --fs-m: 15px;      /* body in components */
  --fs-l: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;

  /* ── Shape ─────────────────────────────────────────────────────────────── */
  --r-xs: calc(var(--u) * 6); --r-s: calc(var(--u) * 10); --r-m: calc(var(--u) * 14); --r-l: calc(var(--u) * 20);
  --r-xl: calc(var(--u) * 28);
  /* The lavender pixel seam between two dark chapters (assets/brand/seam.svg). */
  --seam-height: 48px;
  --r-pill: 999px; --btn-h: calc(var(--u) * 44); --gutter: var(--s48);

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, .06);
  --elev-2: var(--elev-1), 0 8px 24px rgba(0, 0, 0, .4);
  --elev-3: var(--elev-1), 0 24px 60px -24px rgba(0, 0, 0, .6);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --ease-standard: var(--ease-out);
  --dur-press: 160ms; --dur-ui: 240ms; --dur-in: 600ms; --stagger: 60ms;
  --dur-1: 120ms; --dur-2: var(--dur-ui); --dur-3: var(--dur-in);
  --in-blur: calc(var(--u) * 12); --in-y: calc(var(--u) * 16); --press: .97;
}
:root[data-accent="citron"] {
  --brand-accent: var(--brand-citron);
  --accent-spot: #e2e626;
  --accent-highlight: #dde38d;
}
@media (max-width: 767px) {
  :root { --u: calc(100vw / 430); --t-s: max(12px, calc(var(--u) * 13)); --t-m: max(15px, calc(var(--u) * 16));
          --t-l: max(22px, calc(var(--u) * 28)); --d-2: calc(var(--u) * 44); --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-in: 0ms; --stagger: 0ms; --in-blur: 0px; --in-y: 0px;
          --dur-1: 0ms; }
}
/* More contrast on request: muted text reads as body text and glass turns solid. */
@media (prefers-contrast: more) {
  :root { --text-muted: var(--ink-1); --text-subtle: var(--ink-2); --ink-2: #d4d4d8; --ink-3: #c4c4c8;
          --glass: #18181a; --rule: rgba(252, 252, 252, .4); --border: var(--rule);
          --l-ink-2: #2f2c36; --l-ink-3: #45414d; --l-rule: rgba(23, 22, 27, .35); }
}