/* ============================================================
   TRAINING PROTOCOL — DESIGN TOKENS  (single source of truth)
   Mirrors the training-protocol-design skill's tokens.css.
   Imported app-wide; build screens by consuming these variables.
   Live adaptations: --font is Archivo (the chosen display face);
   --font-numeric is Space Mono (the deliberate distinct stat face).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@700&display=swap');

:root {
  --bg:           #0B0B0C;
  --surface:      #16161A;
  --surface-2:    #202024;
  --line:         rgba(244,244,242,0.10);
  --line-strong:  rgba(244,244,242,0.16);

  --text-hi:      #FFFFFF;
  --text:         #F4F4F2;
  --text-dim:     #9CA0A6;   /* WCAG-AA on bg AND surface — don't darken */
  --text-faint:   #5C5C62;   /* NON-informational: separators, index nums */

  --volt:         #CCFF00;   /* the ONLY accent — primary action / active / current */
  --on-volt:      #0B0B0C;

  --font:         'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-numeric: 'Space Mono', ui-monospace, Menlo, monospace;

  --fs-hero:      clamp(48px, 14vw, 78px);  --lh-hero: 0.90; --tr-hero: -0.02em;
  --fs-score:     clamp(50px, 14vw, 78px);  --lh-score: 1.0;
  --fs-action:    clamp(26px, 7vw, 34px);
  --fs-title:     clamp(20px, 5.5vw, 25px);
  --fs-tab:       15px;
  --fs-body:      16px;
  --fs-meta:      13px;
  --fs-eyebrow:   12px;
  --fs-nav:       11px;

  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;
  --tr-caps: 0.14em; --tr-tab: 0.04em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --pad: 20px; --tap: 44px;

  --r-sm: 6px; --r-md: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1); --dur: 180ms;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-med);
  line-height: 1.45; -webkit-font-smoothing: antialiased;
}

.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero);
  font-weight: var(--fw-black); text-transform: uppercase; color: var(--text-hi); }
.t-action { font-size: var(--fs-action); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0; }
.t-title { font-size: var(--fs-title); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: -0.01em; }
.t-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--tr-caps); color: var(--text-dim); }
.t-meta { font-size: var(--fs-meta); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim); }
.t-num { font-variant-numeric: tabular-nums; }

.ico { width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--play { fill: currentColor; stroke: none; }
.ico--sm { width: 20px; height: 20px; }

:focus-visible { outline: 2.5px solid var(--volt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}