/* styles/tokens.css: Burst by BrilliantWear design tokens (v1).
   Components reference var(--token) only. No hex values outside this file
   (index.html theme-color metas excepted).
   <html data-theme="dark|light"> is ALWAYS set by the pre-paint script ("auto" resolves via matchMedia).
   Any element may set data-theme to scope a palette (share cards render under data-theme="dark").
   <html data-motion="full|reduced"> is set by src/ui/motion.js (OS setting + Settings override). */

/* ---------- 1. Theme-independent ---------- */
:root {
  --brand: #00d4aa; /* the one brand definition: never repeat this hex */

  /* type */
  --font-ui: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-num: "Barlow Condensed", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Text sizes are rem: the root is 17 px by default and, on iOS, the
     system text size (Dynamic Type / Larger Text) via -apple-system-body
     (styles/app.css). 1rem = 17 px at the default size. Hero, display and
     stat numbers stay fixed (they are sized to the screen). */
  --fs-hero: clamp(88px, min(32vw, 17vh), 136px);
  --fs-display: clamp(48px, min(16vw, 9vh), 72px);
  --fs-stat: 36px;
  --fs-h1: 1.647rem;   /* 28 px */
  --fs-h2: 1.176rem;   /* 20 px */
  --fs-body: 1rem;     /* 17 px */
  --fs-small: .882rem; /* 15 px */
  --fs-label: .765rem; /* 13 px */
  --fs-micro: .706rem; /* 12 px */
  --lh-tight: .86;
  --lh-body: 1.45;
  --track-label: .08em;
  --track-chyron: .12em;
  --digit-w: .56em;

  /* space, shape, sizes */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --tap: 48px; --tap-md: 56px; --tap-lg: 72px; --tap-xl: 96px;
  --bar-h: 48px; --run-bar-h: 44px; --dock-h: 64px; --dock-disc: 60px; --rail-w: 84px;
  --content-max: 1120px;
  --skew: -8deg;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* layers */
  --z-sticky: 10; --z-dock: 20; --z-sheet: 40; --z-toast: 50; --z-fx: 60; --z-go: 70;

  /* motion */
  --dur-1: 80ms;   /* press */
  --dur-2: 140ms;  /* chip, toggle, route-out */
  --dur-3: 220ms;  /* route-in, tab */
  --dur-4: 320ms;  /* card expand, axis ease */
  --dur-5: 480ms;  /* reveals */
  --dur-6: 650ms;  /* number roll */
  --dur-7: 1400ms; /* celebration body */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-launch: cubic-bezier(.12, .75, .1, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);
  /* springs: motion.js overwrites these with linear() strings at boot; these are fallbacks */
  --spring-snappy: cubic-bezier(.16, 1, .3, 1);
  --spring-pop: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.16, 1, .3, 1);
  --spring-bouncy: cubic-bezier(.34, 1.56, .64, 1);
  --motion: 1; /* multiply travel distances by this (0 when reduced) */

  /* fixed palettes (identical in both themes) */
  --lg-1: #9aa5b8; --lg-2: #c9874f; --lg-3: #d9a35b; --lg-4: #6fbf73; --lg-5: #ff7a3d;
  --lg-6: #7fd3ff; --lg-7: #5b7bff; --lg-8: #9b6bff; --lg-9: #ff6fb5; --lg-10: #ffe08a;
  --lg-ink: #06101f;
  --av-1: var(--brand); --av-2: #5b9bff; --av-3: #ff8a3d; --av-4: #b79cff;
  --av-5: #ff6fa3; --av-6: #ffc857; --av-7: #6fdc8c; --av-8: #7fd3ff;
  --av-ink: #06101f;
  --tier-supernova-fx: conic-gradient(from 210deg, var(--brand), #8db4ff, #ff6fb5, #ffd447, var(--brand));
  --sync-flash: #ffffff;
}
:root[data-motion="reduced"] { --motion: 0; }

/* ---------- 2. DARK ("Night session", the default) ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #060a16;
  --bg-2: #0a1022;
  --stage: #04070f;
  --surface: #0e152b;
  --surface-2: #141d39;
  --surface-3: #1b2748;
  --surface-raised: #121a33;
  --line: #202c4d;
  --line-strong: #2e3d66;
  --grid-minor: rgba(255, 255, 255, .035);
  --grid-major: rgba(255, 255, 255, .07);
  --ink: #f2f6ff;
  --ink-2: #bcc6de;
  --muted: #8794b2;
  --faint: #64708d;
  --scrim: rgba(2, 4, 10, .62);
  --scrim-strong: rgba(2, 4, 10, .88);
  --highlight: rgba(255, 255, 255, .06);

  --brand-hi: #6af7d6;
  --brand-strong: var(--brand);
  --brand-deep: #00a886;
  --brand-ink: #00261d;
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 38%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 45%, transparent);
  --focus: #6af7d6;

  --good: #3ee08f;   --good-soft: rgba(62, 224, 143, .14);
  --warn: #ffb547;   --warn-ink: #ffb547; --warn-soft: rgba(255, 181, 71, .14);
  --bad: #ff5c72;    --bad-soft: rgba(255, 92, 114, .14);
  --info: #5aa9ff;   --info-ink: var(--info); --info-soft: rgba(90, 169, 255, .14);
  --violet: #a993ff; --violet-soft: rgba(169, 147, 255, .14);
  --gold: #ffcf4d;   --gold-hi: #ffe58a; --gold-ink: var(--gold);
  --kudos: #ff5fa2;  --flame: #ff7a3d; --flame-ink: var(--flame); --flame-core: #ffd447; --ice: #8fd8ff;

  --foot-l: #5b9bff; --foot-r: #ff8a3d; --foot-both: var(--brand);
  --ghost: rgba(242, 246, 255, .32);
  --ph-quiet: #56627f; --ph-unweight: #8a7cff; --ph-brake: #ffc857;
  --ph-propel: var(--brand); --ph-flight: #f2f6ff; --ph-land: #ff6fa3;
  --heat-0: #0c1830; --heat-1: #0b4a52; --heat-2: #00a383; --heat-3: var(--brand); --heat-4: #b6f7e3; --heat-5: #ffffff;
  --series-1: var(--brand); --series-2: #5b9bff; --series-3: #ff8a3d; --series-4: #b79cff; --series-5: #ffc857;
  --grid: #18223f;
  --axis: #7a87a6;
  --band: rgba(255, 255, 255, .05);
  --band-swc: color-mix(in srgb, var(--brand) 12%, transparent);
  --band-dip: rgba(255, 181, 71, .10);

  --tier-spark: #8db4ff; --tier-charge: #4fd8f0; --tier-surge: var(--brand);
  --tier-blaze: #ffa94d; --tier-nova: #ff6fb5;   --tier-supernova: #ffe08a;
  --ready-go: var(--brand); --ready-normal: var(--info); --ready-tech: var(--violet);

  --go-flash: #ffffff;
  --go-ink: #04070f;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .32);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, .55);
  --glow-brand: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent), 0 0 28px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* ---------- 3. LIGHT ("Day session") ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-2: #e9eef6;
  --stage: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --surface-3: #e3e9f3;
  --surface-raised: #ffffff;
  --line: #dbe2ee;
  --line-strong: #c3cddd;
  --grid-minor: rgba(10, 18, 40, .04);
  --grid-major: rgba(10, 18, 40, .08);
  --ink: #0b1430;
  --ink-2: #3a4766;
  --muted: #5a6785;
  --faint: #78839d;
  --scrim: rgba(10, 18, 40, .45);
  --scrim-strong: rgba(10, 18, 40, .80);
  --highlight: rgba(255, 255, 255, .85);

  --brand-hi: #33e0bd;
  --brand-strong: #00806a;
  --brand-deep: #006b58;
  --brand-ink: #00261d;
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 50%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 35%, transparent);
  --focus: #00806a;

  --good: #0f7d43;   --good-soft: #e2f5ea;
  --warn: #f2a100;   --warn-ink: #9a5c00; --warn-soft: #fff1d9;
  --bad: #d02c43;    --bad-soft: #fde6ea;
  --info: #1f6fd1;   --info-ink: #1b5fb5; --info-soft: #e3eefc;
  --violet: #6a4fd8; --violet-soft: #ece8fd;
  /* --gold is also the PB text colour on light surfaces, so it holds ≥ 4.5:1 on
     --surface and --bg (5.3:1 / 4.9:1); --gold-ink names that use explicitly.
     *-ink tokens are the small-text versions of a hue (≥ 4.5:1 on --surface/--bg). */
  --gold: #8a6500;   --gold-hi: #ffd447; --gold-ink: #8a6500;
  --kudos: #d6266a;  --flame: #e2551b; --flame-ink: #b8430f; --flame-core: #f5a400; --ice: #2f9bd6;

  --foot-l: #2f6fe0; --foot-r: #d9601a; --foot-both: var(--brand-strong);
  --ghost: rgba(11, 20, 48, .30);
  --ph-quiet: #9aa5bd; --ph-unweight: #6a5ae0; --ph-brake: #c98a00;
  --ph-propel: #00957a; --ph-flight: #0b1430; --ph-land: #d63f7e;
  --heat-0: #e6eef5; --heat-1: #b5e9dd; --heat-2: #5ed9bc; --heat-3: #00bf98; --heat-4: #008c70; --heat-5: #004d3d;
  --series-1: #00957a; --series-2: #2f6fe0; --series-3: #d9601a; --series-4: #7c5ce0; --series-5: #c98a00;
  --grid: #e6ebf3;
  --axis: #636e8b;
  --band: rgba(10, 18, 40, .05);
  --band-swc: color-mix(in srgb, var(--brand) 18%, transparent);
  --band-dip: rgba(242, 161, 0, .12);

  --tier-spark: #2f62d6; --tier-charge: #0a7fa0; --tier-surge: var(--brand-strong);
  --tier-blaze: #b35a00; --tier-nova: #c41f72;   --tier-supernova: #8a6a00;
  --ready-go: var(--brand-strong); --ready-normal: var(--info); --ready-tech: var(--violet);

  --go-flash: var(--brand);
  --go-ink: var(--brand-ink);
  --shadow-1: 0 1px 2px rgba(10, 18, 40, .08), 0 6px 18px rgba(10, 18, 40, .07);
  --shadow-2: 0 2px 6px rgba(10, 18, 40, .10), 0 18px 44px rgba(10, 18, 40, .14);
  --glow-brand: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--brand) 22%, transparent);
}