/* SurgeX · tokens (Direction 2 · Review Suite)
   Owner: foundation. Area agents read these; never redefine them.
   Neutral field: green-black (dark, hue ~155°) · warm stone (light, hue ~80°).
   One accent, one job: gold marks the coach's time and attention
   (cue pin, playhead, 0:04 axis marker, "due in" countdown, coach cue chip, earned chip).
   Theme: follows the system, falls back to dark; [data-theme] overrides (root or any container);
   .sx-dark (video stages) is always dark. */

:root,
[data-theme="dark"],
.sx-dark {
  --page:#0A150F; --s1:#102018; --s2:#16291F; --s3:#1D3327; --inset:#07100B;
  --edge:rgba(236,232,224,.06); --hair:#1F3328; --hair-2:#2B4335;
  --ink:#ECE8E0; --ink-2:#A9B4AB; --ink-3:#9AA69C;
  --gold:#FCCF8E; --gold-text:#FCCF8E; --gold-ink:#1A1406; --gold-soft:rgba(252,207,142,.14);
  --btn:#F4F1EC; --btn-ink:#0F1D15; --btn-hover:#D6D1C6;
  --ok:#79C493; --ok-bg:#163223;
  --due:#E3A251; --due-bg:#2E2412;
  --err:#F0846C; --err-bg:#341C16; --err-btn:#C24A33; --err-btn-hover:#AE3F2A;
  --track:var(--inset); --track-played:var(--hair-2);
  --panel-shadow:0 0 0 1px var(--edge), 0 30px 60px -30px rgba(0,0,0,.6);
  --shadow-float:0 0 0 1px var(--edge), 0 12px 32px rgba(0,0,0,.45);
  --scrim:rgba(4,9,6,.62);
  --focus:0 0 0 2px var(--page), 0 0 0 4px #8FD3A7;
  --focus-inset:inset 0 0 0 2px #8FD3A7;
  --mark:#F4F1EC;
  --skeleton:#1A2E23; --skeleton-hi:#22392C;
  color-scheme:dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page:#E8E4DC; --s1:#F2EFE9; --s2:#F8F6F2; --s3:#FFFFFF; --inset:#DDD8CE;
    --edge:rgba(20,37,27,.08); --hair:rgba(20,37,27,.08); --hair-2:rgba(20,37,27,.16);
    --ink:#14251B; --ink-2:#4A594F; --ink-3:#6E6A62;
    --gold:#C98A2E; --gold-text:#93600F; --gold-ink:#1A1406; --gold-soft:rgba(201,138,46,.12);
    --btn:#182E21; --btn-ink:#F4F1EC; --btn-hover:#24412F;
    --ok:#2C6B44; --ok-bg:#DCE9DF;
    --due:#9C5A0C; --due-bg:#F3E4CB;
    --err:#B03A26; --err-bg:#F5DDD6; --err-btn:#B03A26; --err-btn-hover:#982F1D;
    --track:#DCD8CF; --track-played:#2F5A3C;
    --panel-shadow:0 0 0 1px rgba(20,37,27,.08), inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -24px rgba(40,34,20,.28);
    --shadow-float:0 1px 2px rgba(24,46,33,.08), 0 12px 32px rgba(24,46,33,.14), 0 0 0 1px rgba(20,37,27,.08);
    --scrim:rgba(24,30,26,.38);
    --focus:0 0 0 2px var(--page), 0 0 0 4px #2E6A4A;
    --focus-inset:inset 0 0 0 2px #2E6A4A;
    --mark:#182E21;
    --skeleton:#E0DBD2; --skeleton-hi:#ECE8E1;
    color-scheme:light;
  }
}

[data-theme="light"] {
  --page:#E8E4DC; --s1:#F2EFE9; --s2:#F8F6F2; --s3:#FFFFFF; --inset:#DDD8CE;
  --edge:rgba(20,37,27,.08); --hair:rgba(20,37,27,.08); --hair-2:rgba(20,37,27,.16);
  --ink:#14251B; --ink-2:#4A594F; --ink-3:#6E6A62;
  --gold:#C98A2E; --gold-text:#93600F; --gold-ink:#1A1406; --gold-soft:rgba(201,138,46,.12);
  --btn:#182E21; --btn-ink:#F4F1EC; --btn-hover:#24412F;
  --ok:#2C6B44; --ok-bg:#DCE9DF;
  --due:#9C5A0C; --due-bg:#F3E4CB;
  --err:#B03A26; --err-bg:#F5DDD6; --err-btn:#B03A26; --err-btn-hover:#982F1D;
  --track:#DCD8CF; --track-played:#2F5A3C;
  --panel-shadow:0 0 0 1px rgba(20,37,27,.08), inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -24px rgba(40,34,20,.28);
  --shadow-float:0 1px 2px rgba(24,46,33,.08), 0 12px 32px rgba(24,46,33,.14), 0 0 0 1px rgba(20,37,27,.08);
  --scrim:rgba(24,30,26,.38);
  --focus:0 0 0 2px var(--page), 0 0 0 4px #2E6A4A;
  --focus-inset:inset 0 0 0 2px #2E6A4A;
  --mark:#182E21;
  --skeleton:#E0DBD2; --skeleton-hi:#ECE8E1;
  color-scheme:light;
}

/* Video stages: always dark, in both themes (an edit suite). Repeated after the light
   rules so a stage inside a light container still wins. */
.sx-dark {
  --page:#0A150F; --s1:#102018; --s2:#16291F; --s3:#1D3327; --inset:#07100B;
  --edge:rgba(236,232,224,.06); --hair:#1F3328; --hair-2:#2B4335;
  --ink:#ECE8E0; --ink-2:#A9B4AB; --ink-3:#9AA69C;
  --gold:#FCCF8E; --gold-text:#FCCF8E; --gold-soft:rgba(252,207,142,.14);
  --btn:#F4F1EC; --btn-ink:#0F1D15; --btn-hover:#D6D1C6;
  --ok:#79C493; --ok-bg:#163223; --due:#E3A251; --due-bg:#2E2412; --err:#F0846C; --err-bg:#341C16;
  --track:var(--inset); --track-played:var(--hair-2);
  --focus:0 0 0 2px #07100B, 0 0 0 4px #8FD3A7;
  --mark:#F4F1EC;
  color-scheme:dark;
}

:root {
  /* the earned chip: gold as metal (same in both themes) */
  --metal-bg:#F3D28F; --metal-ink:#8A6116; --metal-ring:#D9B463;
  /* stage constants */
  --stage-bg:#07100B; --stage-ink:#ECE8E0; --stage-hud:rgba(7,16,11,.72);
  /* brand */
  --brand-green:#182E21; --brand-cream:#F4F1EC; --brand-gold:#FCCF8E;

  /* type */
  --display:"Archivo", system-ui, sans-serif;
  --ui:"Instrument Sans", system-ui, sans-serif;

  /* radii: panel 12 → card 8 → chip 6; buttons 8 */
  --r-panel:12px; --r-card:8px; --r-chip:6px; --r-btn:8px; --r-pill:999px;

  /* spacing (8 px rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px;
  --gutter:32px; --maxw:1504px;

  /* motion (≤200 ms interactions; no motion on frequent actions; none on theme switch) */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-pin:cubic-bezier(.2,.9,.3,1.2);
  --t-fast:120ms; --t:160ms; --t-slow:200ms;
  --press:.97;

  /* layers */
  --z-sticky:4; --z-bar:6; --z-menu:30; --z-sheet:40; --z-toast:50;
}

@media (max-width:760px) {
  :root { --gutter:16px; }
}