/* SAI design tokens: the one source for color, glass, type, spacing, motion, and performance tiers.
   Spec: A55 (her palette), A61 (4 px scale, quality bar), A63a/A68 (Apple-model glass), A72 (performance tiers),
   A73 (the object always on its dark viewport). Proof: tests/ui.test.ts (tokens exist in every theme state; text-on-surface
   contrast >= 4.5; blur <= 40 px). Three theme states: bare :root is the light palette; the dark media block is guarded so an
   explicit light choice beats a dark OS; [data-theme="dark"] wins the other way. Components use tokens only. */

:root {
  color-scheme: light dark;

  /* palette, light: pastel surfaces, ink text, working shades for any color that must carry words */
  --sai-bg: #F7F8FC;
  --sai-surface: #FFFFFF;
  --sai-raised: #EEF2FA;
  --sai-text: #1E2233;
  --sai-muted: #5B6275;
  --sai-line: #DDE2EE;
  --sai-blue: #3D6FB5;
  --sai-orange: #A85A14;
  --sai-purple: #6B4DAA;
  --sai-blue-soft: #BFD7F2;
  --sai-orange-soft: #FFD1AD;
  --sai-purple-soft: #DCCBF3;
  --sai-ink-on-soft: #1E2233;

  /* semantic state colors, separate from the accent hues */
  --sai-ok: #2F7D5B;
  --sai-warn: #A85A14;
  --sai-bad: #B3374A;
  --sai-on-bad: #FFFFFF;   /* ink on a --sai-bad fill (the bell count): white on the deep light-theme red */

  /* glass, three weights (thin: chips and the strip; thick: rail, action page, dialogs; frosted: cards over the object) */
  --sai-glass-thin: rgba(255, 255, 255, 0.42);
  --sai-glass-thick: rgba(255, 255, 255, 0.62);
  --sai-glass-frosted: rgba(255, 255, 255, 0.5);
  --sai-glass-hi: rgba(255, 255, 255, 0.85);
  --sai-glass-edge: rgba(255, 255, 255, 0.9);
  --sai-glass-line: rgba(30, 34, 51, 0.08);
  /* glass that sits on the object's dark viewport in the light theme. 0.96, not 0.74: at 0.74 the dark stage greyed the
     glass and muted text + accents measured 2.9-4.5:1 over the live background (docs/a11y/A11Y-2026-09-29.md) */
  --sai-glass-over-viewport: rgba(255, 255, 255, 0.96);
  --sai-glass-blur: 18px;
  --sai-glass-sat: 1.6;
  /* the corner bloom on feature tiles: softer on light glass, where a blue tint pulled the green money figure to
     4.45:1 (measured); full strength on dark glass, where it only lifts the edge */
  --sai-bloom-blue: rgba(92, 153, 255, 0.14);
  --sai-glass-shadow: 0 14px 44px rgba(20, 28, 60, 0.18);

  /* the object's viewport: always dark, in both themes (A73) */
  --sai-viewport: #080B19;
  --sai-viewport-top: #0E1328;
  --sai-viewport-bottom: #03050C;
  --sai-viewport-text: #EDEFF7;
  --sai-viewport-muted: #A3ABC2;

  /* the embodiment's own hues (vivid, for the emissive object; the chrome uses the palette above) */
  --sai-emb-blue: #5C99FF;
  --sai-emb-purple: #AD80FF;
  --sai-emb-orange: #FFB85C;

  /* type: Fraunces for titles and the wordmark, Instrument Sans for reading, JetBrains Mono for receipts and numbers (vendored in the product) */
  --sai-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sai-font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sai-font-mono: "JetBrains Mono", Consolas, "SF Mono", monospace;
  --sai-text-xs: 11px;
  --sai-text-sm: 12.5px;
  --sai-text-md: 14px;
  --sai-text-lg: 17px;
  --sai-text-xl: 22px;
  --sai-text-2xl: 28px;
  --sai-text-3xl: 40px;
  --sai-leading: 1.5;
  --sai-tracking-caps: 0.32em;

  /* spacing on a 4 px scale (A61) */
  --sai-space-1: 4px;
  --sai-space-2: 8px;
  --sai-space-3: 12px;
  --sai-space-4: 16px;
  --sai-space-5: 20px;
  --sai-space-6: 24px;
  --sai-space-8: 32px;
  --sai-space-10: 40px;
  --sai-space-12: 48px;

  /* radii and elevation */
  --sai-radius-sm: 8px;
  --sai-radius-md: 12px;
  --sai-radius-lg: 16px;
  --sai-radius-xl: 18px;
  --sai-radius-pill: 999px;
  --sai-shadow-card: 0 8px 30px rgba(20, 28, 60, 0.10);

  /* layout */
  --sai-rail-collapsed: 52px;
  --sai-rail-expanded: 236px;
  --sai-strip-height: 56px;
  --sai-action-page-width: 62%;
  --sai-content-max: 1280px;

  /* motion (A63: the rail slides in 180 ms; reduced motion turns all of it off) */
  --sai-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sai-motion-fast: 120ms;
  --sai-motion-rail: 180ms;
  --sai-motion-page: 240ms;

  /* focus */
  --sai-focus: 0 0 0 3px var(--sai-blue-soft);

  /* z layers */
  --sai-z-viewport: 0;
  --sai-z-content: 1;
  --sai-z-rail: 2;
  --sai-z-action-page: 3;
  --sai-z-dialog: 4;
  --sai-z-toast: 5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sai-bg: #0F1424;
    --sai-surface: #1A1F36;
    --sai-raised: #222A45;
    --sai-text: #EDEFF7;
    --sai-muted: #A3ABC2;
    --sai-line: #2A3252;
    --sai-blue: #A9C8F0;
    --sai-orange: #F5B98A;
    --sai-purple: #C9B3EE;
    --sai-blue-soft: #24365A;
    --sai-orange-soft: #4A3120;
    --sai-purple-soft: #3A2C5C;
    --sai-ink-on-soft: #EDEFF7;
    --sai-ok: #7FD1A8;
    --sai-warn: #F5B98A;
    --sai-bad: #F09AA8;
    --sai-on-bad: #1E2233;
    --sai-glass-thin: rgba(28, 34, 62, 0.34);
    --sai-glass-thick: rgba(28, 34, 62, 0.5);
    --sai-glass-frosted: rgba(28, 34, 62, 0.42);
    --sai-glass-hi: rgba(120, 140, 200, 0.16);
    --sai-glass-edge: rgba(255, 255, 255, 0.16);
    --sai-glass-line: rgba(255, 255, 255, 0.09);
    --sai-glass-over-viewport: rgba(20, 25, 46, 0.86);
    --sai-bloom-blue: rgba(92, 153, 255, 0.30);
    --sai-glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
    --sai-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.28);
    --sai-focus: 0 0 0 3px rgba(169, 200, 240, 0.45);
  }
}

:root[data-theme="dark"] {
  --sai-bg: #0F1424;
  --sai-surface: #1A1F36;
  --sai-raised: #222A45;
  --sai-text: #EDEFF7;
  --sai-muted: #A3ABC2;
  --sai-line: #2A3252;
  --sai-blue: #A9C8F0;
  --sai-orange: #F5B98A;
  --sai-purple: #C9B3EE;
  --sai-blue-soft: #24365A;
  --sai-orange-soft: #4A3120;
  --sai-purple-soft: #3A2C5C;
  --sai-ink-on-soft: #EDEFF7;
  --sai-ok: #7FD1A8;
  --sai-warn: #F5B98A;
  --sai-bad: #F09AA8;
  --sai-on-bad: #1E2233;   /* dark ink on the pale dark-theme red: white measured 2.1:1 on it */
  --sai-glass-thin: rgba(28, 34, 62, 0.34);
  --sai-glass-thick: rgba(28, 34, 62, 0.5);
  --sai-glass-frosted: rgba(28, 34, 62, 0.42);
  --sai-glass-hi: rgba(120, 140, 200, 0.16);
  --sai-glass-edge: rgba(255, 255, 255, 0.16);
  --sai-glass-line: rgba(255, 255, 255, 0.09);
  /* 0.86, not 0.5: the bright aurora ribbon showed through 0.5 glass and pulled muted text on the Home tiles to 1.7:1
     (measured over the live background, docs/a11y/A11Y-2026-09-29.md). Denser glass, same hue: still glass, now readable. */
  --sai-glass-over-viewport: rgba(20, 25, 46, 0.86);
  --sai-bloom-blue: rgba(92, 153, 255, 0.30);
  --sai-glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  --sai-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.28);
  --sai-focus: 0 0 0 3px rgba(169, 200, 240, 0.45);
}

/* performance tiers (A72): the optimizer stamps data-perf on the root; glass follows */
:root[data-perf="half"] { --sai-glass-blur: 10px; --sai-glass-sat: 1.3; }
:root[data-perf="quarter"] { --sai-glass-blur: 0px; --sai-glass-sat: 1; }

/* the OS asked for less transparency: glass becomes the solid surface, nothing else changes (A63a) */
@media (prefers-reduced-transparency: reduce) {
  :root { --sai-glass-thin: var(--sai-surface); --sai-glass-thick: var(--sai-surface); --sai-glass-frosted: var(--sai-surface); --sai-glass-over-viewport: var(--sai-surface); --sai-glass-blur: 0px; --sai-glass-sat: 1; }
}

/* reduced motion: no slides, no fades, no animated object (the embodiment reads this too) */
@media (prefers-reduced-motion: reduce) {
  :root { --sai-motion-fast: 0ms; --sai-motion-rail: 0ms; --sai-motion-page: 0ms; }
}
/* the "Reduce motion" setting (appearance.reducedMotion): the app zeroes its motion tokens; the object is frozen
   separately by the embodiment (setAnimate), so the toggle really stills the whole app, not just the CSS. */
:root[data-motion="off"] { --sai-motion-fast: 0ms; --sai-motion-rail: 0ms; --sai-motion-page: 0ms; }

/* the "Density" setting (appearance.density=compact): a real, app-wide tightening of the generous default spacing */
:root[data-density="compact"] { --sai-space-6: 16px; --sai-space-5: 14px; --sai-space-4: 12px; --sai-space-3: 8px; }

/* An explicit theme choice also sets the native controls (checkboxes, inputs, scrollbars). With only "light dark" on
   :root they followed the computer's setting, so a light page drew dark checkboxes (2026-10-03). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Desktop type (Alex 2026-10-03: "why is everything a little small... even the way SAI is spelled in the logo"). The scale
   above was sized for a phone and every page inherits it, so on a monitor all text read small. From 1100px wide the whole
   scale steps up once, here at the source, so every page grows together and keeps its proportions. */
@media (min-width: 1100px) {
  :root {
    --sai-text-xs: 12.5px;
    --sai-text-sm: 14px;
    --sai-text-md: 16px;
    --sai-text-lg: 19px;
    --sai-text-xl: 25px;
    --sai-text-2xl: 32px;
    --sai-text-3xl: 46px;
  }
}