/* ============================================================
   ZAVIT — Design Tokens v1.0
   "Night Instruments" — instruments that speak English.

   Axes:
     data-theme   : (unset = dark, default)  |  "light"
     data-density : (unset = comfort, default)  |  "terminal"

   Color discipline (validated with the dataviz six-checks validator):
     · Probability (0–100%) = diverging: cyan (NO) ←neutral 50%→ amber (YES).
       NEVER green/red. This is THE recurring visual.
     · P&L = gain/loss only. Green/red family reserved; never used for probability.
     · Categorical chart slots 1–6: fixed order, never cycled, all six checks PASS
       on both surfaces (dark worst adjacent CVD ΔE 32.3 · light 37.5).
   ============================================================ */

/* ---------- fonts (self-host before prod; Google Fonts OK for previews) ---- */
/* Data face:  "Spline Sans Mono" 400/500/600/700
   Voice face: "Newsreader" 400/500 + italic (opsz axis)                       */

:root {
  /* ==================== SURFACES (dark = default) ==================== */
  --bg:           #0E0D0B;   /* page — warm near-black, never pure #000 */
  --panel:        #16130F;   /* card / instrument panel */
  --raised:       #1E1A14;   /* hover, raised wells, inputs */
  --overlay:      #262119;   /* popovers, cmd-K, tickets */
  --scrim:        rgba(8, 7, 5, 0.72);
  --hairline:     rgba(244, 232, 208, 0.09);
  --hairline-2:   rgba(244, 232, 208, 0.16);  /* emphasized borders */
  --well:         #0B0A08;   /* recessed: chart wells, key input */

  /* ==================== INK ==================== */
  --ink:    #F2EDE3;   /* 15.9:1 on panel */
  --ink-2:  #A89E8E;   /*  7.0:1 — secondary */
  --ink-3:  #6E675C;   /*  3.3:1 — tertiary/labels ≥12px only, never body */

  /* ==================== BRAND ==================== */
  --brand:      #FFB224;  /* Meridian Amber — also the 100% YES pole */
  --brand-ink:  #241703;  /* text on amber */
  --brand-dim:  rgba(255, 178, 36, 0.14);
  --counter:    #17DBE8;  /* Signal Cyan — also the 0% NO pole */
  --counter-dim: rgba(23, 219, 232, 0.12);

  /* ==================== PROBABILITY (the 0–100% language) ============
     Diverging, OKLab-interpolated, neutral at 50%.
     Recipe for arbitrary p:
       p<50: color-mix(in oklab, var(--prob-pole-no)  calc((50 - p)*2%), var(--prob-mid))
       p>50: color-mix(in oklab, var(--prob-pole-yes) calc((p - 50)*2%), var(--prob-mid))  */
  --prob-pole-no:  var(--counter);
  --prob-mid:      #827A6C;
  --prob-pole-yes: var(--brand);
  --prob-0:   #17DBE8;
  --prob-10:  #4FC8CE;
  --prob-20:  #66B4B5;
  --prob-30:  #74A19C;
  --prob-40:  #7D8D84;
  --prob-50:  #827A6C;
  --prob-60:  #9A8666;
  --prob-70:  #B3915E;
  --prob-80:  #CC9C53;
  --prob-90:  #E5A742;
  --prob-100: #FFB224;
  /* readable-text variants of the poles (labels on --panel): */
  --prob-no-text:  #4FE0EA;
  --prob-yes-text: #FFBE45;

  /* ==================== P&L (reserved — never for probability) ======= */
  --gain:      #45D993;   /* 10.2:1 on panel */
  --gain-dim:  rgba(69, 217, 147, 0.13);
  --loss:      #FF6E5F;   /*  6.7:1 on panel */
  --loss-dim:  rgba(255, 110, 95, 0.12);

  /* ==================== STATUS (fixed, icon+label always) ============ */
  --ok:        #45D993;
  --warn:      #FAB219;
  --serious:   #EC835A;
  --critical:  #E5484D;
  --live:      #45D993;   /* connection LED */

  /* ==================== CHART ==================== */
  /* categorical slots — fixed order, never cycled, validated */
  --series-1: #C9820A;  /* amber   */
  --series-2: #1E9EAC;  /* cyan    */
  --series-3: #8878E8;  /* violet  */
  --series-4: #8A9930;  /* olive   */
  --series-5: #4F82DD;  /* blue    */
  --series-6: #C9538E;  /* magenta */
  --grid-line:   rgba(244, 232, 208, 0.06);
  --axis-line:   rgba(244, 232, 208, 0.14);
  --chart-label: var(--ink-3);
  /* sequential (magnitude: depth, volume) = blue slot ramp, one hue */
  --seq-1: #16283F; --seq-2: #1E3C63; --seq-3: #2A5390; --seq-4: #3A6BB8; --seq-5: #4F82DD;

  /* ==================== TYPE ==================== */
  --font-data:  "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-voice: "Newsreader", "Iowan Old Style", Georgia, serif;
  /* scale (px) — data sizes pair with --lh-data, voice with --lh-voice */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 66px;
  --lh-data:  1.25;
  --lh-voice: 1.5;
  --track-label: 0.08em;   /* mono caps labels */
  --track-wide:  0.14em;   /* section eyebrows */

  /* ==================== SPACE / SHAPE ==================== */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;  --sp-7: 32px;
  --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px;
  --r-1: 4px;    /* chips, inputs */
  --r-2: 8px;    /* buttons, small cards */
  --r-3: 12px;   /* panels, cards */
  --r-4: 20px;   /* modals, ceremony cards */
  --r-full: 999px;

  /* ==================== ELEVATION / GLOW ==================== */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 4px 16px rgba(0,0,0,.45);
  --shadow-3: 0 12px 40px rgba(0,0,0,.55);
  --glow-brand:   0 0 0 1px rgba(255,178,36,.35), 0 0 24px rgba(255,178,36,.18);
  --glow-counter: 0 0 0 1px rgba(23,219,232,.35), 0 0 24px rgba(23,219,232,.15);
  --glow-gain:    0 0 20px rgba(69,217,147,.22);

  /* ==================== MOTION ==================== */
  /* "motion that means something": needles settle, prices tick, P&L breathes */
  --ease-needle: cubic-bezier(.34, 1.4, .42, 1);   /* instrument overshoot-settle */
  --ease-glide:  cubic-bezier(.16, 1, .3, 1);      /* panels, reveals */
  --ease-exit:   cubic-bezier(.4, 0, .7, .2);
  --t-tick:  90ms;    /* price flash-in */
  --t-ui:    180ms;   /* hover, toggles */
  --t-panel: 320ms;   /* slide-overs, tab switches */
  --t-sweep: 640ms;   /* needle sweeps, reveals */
  --t-beat:  1100ms;  /* ceremony beats */
  --breathe: 3.2s;    /* live P&L breathing period */

  /* ==================== DENSITY (comfort = default) ==================== */
  /* Comfort: plain English leads, generous space, one action per screen. */
  --density: comfort;
  --fs-body:      var(--fs-md);   /* 15px voice sentences */
  --fs-data-num:  var(--fs-lg);   /* 18px inline data */
  --fs-hero-num:  var(--fs-3xl);  /* 36px card lead numbers */
  --card-pad:     var(--sp-6);    /* 24px */
  --card-gap:     var(--sp-4);    /* 16px */
  --row-h:        64px;
  --control-h:    44px;
  --section-gap:  var(--sp-8);    /* 40px */
  --show-terminal-only: none;     /* extras hidden in comfort */
  --show-comfort-only:  initial;  /* jargon translations shown */

  --z-nav: 100; --z-ticket: 200; --z-overlay: 300; --z-toast: 400;

  color-scheme: dark;
}

/* ==================== TERMINAL DENSITY ==================== */
[data-density="terminal"] {
  --density: terminal;
  --fs-body:      var(--fs-sm);   /* 13px */
  --fs-data-num:  var(--fs-md);   /* 15px */
  --fs-hero-num:  var(--fs-xl);   /* 22px */
  --card-pad:     var(--sp-3);    /* 12px */
  --card-gap:     var(--sp-2);    /* 8px */
  --row-h:        36px;
  --control-h:    32px;
  --section-gap:  var(--sp-5);    /* 20px */
  --show-terminal-only: initial;
  --show-comfort-only:  none;
}

/* ==================== LIGHT THEME ==================== */
[data-theme="light"] {
  --bg:         #F6F1E7;   /* warm paper */
  --panel:      #FBF8F2;
  --raised:     #FFFFFF;
  --overlay:    #FFFFFF;
  --scrim:      rgba(30, 24, 14, 0.4);
  --hairline:   rgba(48, 38, 22, 0.12);
  --hairline-2: rgba(48, 38, 22, 0.22);
  --well:       #EFE8DA;

  --ink:   #1C1812;
  --ink-2: #5C554A;
  --ink-3: #8B8375;

  --brand:      #8A5F00;
  --brand-ink:  #FFF6E3;
  --brand-dim:  rgba(138, 95, 0, 0.10);
  --counter:    #00687F;
  --counter-dim: rgba(0, 104, 127, 0.09);

  --prob-mid:  #A19788;
  --prob-0:   #00687F; --prob-10: #377282; --prob-20: #557C84;
  --prob-30:  #6F8586; --prob-40: #888E87; --prob-50: #A19788;
  --prob-60:  #9D8C73; --prob-70: #98815D; --prob-80: #947646;
  --prob-90:  #8F6A2D; --prob-100:#8A5F00;
  --prob-no-text:  #005A70;
  --prob-yes-text: #7A5400;

  --gain:     #0A7D4F;  --gain-dim: rgba(10,125,79,.10);
  --loss:     #C23325;  --loss-dim: rgba(194,51,37,.09);
  --ok: #0A7D4F; --warn: #9A6B00; --serious: #B54F2A; --critical: #C23325;
  --live: #0A7D4F;

  --series-1: #B87700; --series-2: #0084AB; --series-3: #6D5AE6;
  --series-4: #6B7A16; --series-5: #2A63C9; --series-6: #B8447F;
  --grid-line: rgba(48, 38, 22, 0.07);
  --axis-line: rgba(48, 38, 22, 0.16);
  --seq-1:#D8E4F5; --seq-2:#AECBEF; --seq-3:#7FA9E3; --seq-4:#4F82DD; --seq-5:#2A63C9;

  --shadow-1: 0 1px 2px rgba(48,38,22,.10);
  --shadow-2: 0 4px 16px rgba(48,38,22,.12);
  --shadow-3: 0 12px 40px rgba(48,38,22,.16);
  --glow-brand:   0 0 0 1px rgba(138,95,0,.3), 0 0 20px rgba(138,95,0,.12);
  --glow-counter: 0 0 0 1px rgba(0,104,127,.3), 0 0 20px rgba(0,104,127,.10);
  --glow-gain:    0 0 16px rgba(10,125,79,.15);

  color-scheme: light;
}

/* ============================================================
   PRIMITIVES — the only shared classes tokens.css exports.
   Everything else lives in component CSS.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: var(--fs-body);
  line-height: var(--lh-data);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* voice = plain-English sentences (Newsreader) */
.voice {
  font-family: var(--font-voice);
  font-size: var(--fs-body);
  line-height: var(--lh-voice);
  font-weight: 400;
}
.voice em { font-style: italic; }

/* num = every number that can change. Tabular so nothing jumps. */
.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* label = mono caps micro-labels */
.label {
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* density-conditional display — state switches, must beat component display rules */
.terminal-only { display: var(--show-terminal-only) !important; }
.comfort-only  { display: var(--show-comfort-only) !important; }

/* live pulse — price ticks flash then decay.
   tick-up/down = P&L (your money moved). tick-yes/no = probability (the market moved). */
@keyframes tick-up   { 0% { background: var(--gain-dim); } 100% { background: transparent; } }
@keyframes tick-down { 0% { background: var(--loss-dim); } 100% { background: transparent; } }
@keyframes tick-yes  { 0% { background: var(--brand-dim); } 100% { background: transparent; } }
@keyframes tick-no   { 0% { background: var(--counter-dim); } 100% { background: transparent; } }
.tick-up   { animation: tick-up   1.2s var(--ease-exit); }
.tick-down { animation: tick-down 1.2s var(--ease-exit); }
.tick-yes  { animation: tick-yes  1.2s var(--ease-exit); }
.tick-no   { animation: tick-no   1.2s var(--ease-exit); }

/* breathe — live P&L subtly inhales (opacity, not scale: no layout shift) */
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .82; } }
.breathe { animation: breathe var(--breathe) ease-in-out infinite; }

/* live LED */
@keyframes led { 0%,100% { box-shadow: 0 0 0 0 rgba(69,217,147,.5); } 50% { box-shadow: 0 0 0 4px rgba(69,217,147,0); } }
.led {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--live); animation: led 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}