/* Milyoo — monochrome token layer (research brief, 28 Oct 2026).
   The only file allowed to hold raw color values. Three tiers:
     1. primitives  --n-1 … --n-12 (warm neutral, modeled on Radix Sand) per mode
     2. semantic    --bg, --surface, --border, --text, --text-2, --action, --signal, --nebula-*
     3. component   --btn-*, --field-*, --rule …
   Components read semantic and component tokens only, never primitives.
   Theme lives in tier 1 + 2 only: [data-theme="dark"] swaps the primitives and the few
   semantic values that do not simply follow them. */

:root {
  /* ---------- Tier 1: primitives, light ---------- */
  --n-1: #FDFDFC;
  --n-2: #F9F9F8;
  --n-3: #F1F0EF;
  --n-4: #E9E8E6;
  --n-5: #E2E1DE;
  --n-6: #DAD9D6;
  --n-7: #CFCECA;
  --n-8: #BCBBB5;
  --n-9: #8D8D86;
  --n-10: #82827C;
  --n-11: #63635E;
  --n-12: #21201C;
  --white: #FFFFFF;
  --black: #000000;
  --red: #D71921;

  /* ---------- Tier 2: semantic ---------- */
  --bg: var(--n-1);
  --bg-2: var(--n-2);
  --surface: var(--white);
  --surface-2: var(--n-3);
  --border: var(--n-6);
  --border-strong: var(--n-8);
  --text: var(--n-12);
  --text-2: var(--n-11);
  --text-3: var(--n-10);          /* large / UI only, never body */
  --action: var(--black);         /* inversion: black button on paper */
  --action-text: var(--white);
  --signal: var(--red);           /* destructive and errors only */
  --live: #5FCB9F;                /* the app's live-agent dot (theme good, dark): green with a soft halo */
  --live-halo: rgb(95 203 159 / 0.22);
  --focus: var(--text);

  /* the black acts (hero, governance, manifesto, final CTA, footer) are black in both modes */
  --night: var(--black);
  --night-2: #111110;
  --night-3: #222221;
  --night-border: #3B3A37;
  --night-text: #EEEEEC;
  --night-text-2: #B5B3AD;
  --night-text-3: #8E8C86;
  --night-action: #EEEEEC;        /* inversion: white button on black */
  --night-action-text: var(--black);

  /* the nebula reads these (canvas cannot hold its own colors) */
  --star: 238 238 236;            /* rgb triplet of --night-text */
  --ink-dust: 33 32 28;           /* rgb triplet of --n-12, for paper fields */
  /* the WebGL nebula (js/nebula.js, the app's own shader) in warm grayscale; 6-digit hex, it parses them */
  --neb-bg: #000000;
  --neb-dust: #0E0E0D;
  --neb-gas: #252523;
  --neb-glow: #45443F;
  --neb-core: #B5B3AD;
  --neb-star: #EEEEEC;
  --star-fill: rgb(var(--star));
  --star-edge: rgb(var(--star) / 0.35);

  /* ---------- Tier 3: component ---------- */
  --rule: 1px solid var(--border);
  --rule-strong: 1px solid var(--border-strong);
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-pill: 999px;
  --radius-device: 28px;          /* the phone mockups only */
  --btn-bg: var(--action);
  --btn-text: var(--action-text);
  --field-bg: var(--surface);
  --field-border: var(--border-strong);

  /* ---------- type ---------- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: var(--font-sans);   /* one voice: labels, receipts and canvas text use the sans */
  /* fluid scale (Utopia method, 360 → 1440px); the rem term keeps 200% zoom working */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
  --step-hero: clamp(3.5rem, 1.5rem + 9vw, 8.5rem);

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-1: 120ms;
  --t-2: 240ms;
  --t-3: 480ms;
  --t-4: 900ms;

  color-scheme: light;
}

/* ---------- dark: primitives invert their roles ---------- */
:root[data-theme="dark"] {
  --n-1: #111110;
  --n-2: #191918;
  --n-3: #222221;
  --n-4: #2A2A28;
  --n-5: #31312E;
  --n-6: #3B3A37;
  --n-7: #494844;
  --n-8: #62605B;
  --n-9: #6F6D66;
  --n-10: #7C7B74;
  --n-11: #B5B3AD;
  --n-12: #EEEEEC;

  --surface: var(--n-3);
  --action: var(--n-12);          /* inversion: white button on black */
  --action-text: var(--black);
  --star: 238 238 236;
  --ink-dust: 238 238 236;

  color-scheme: dark;
}