/* ==========================================================================
   Hotbox Academy — Design tokens
   --------------------------------------------------------------------------
   The world this comes from: a vending machine at night. Black glass, a cold
   blue LED strip, brushed-steel edges, and the warm thermal-paper statement
   the location owner reads every month. Two materials (glass and paper), one
   light (the blue), one family of type with real width range, one typewriter
   mono for anything printed. Every value on the site comes from here.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Materials ---- */
  --black: #000000;                 /* the page: black glass */
  --graphite: #101317;              /* steel panels (calculator, scorecard, nav when scrolled) */
  --graphite-2: #171b21;            /* raised panel, inputs */
  --steel: #9aa3ad;                 /* secondary text, metal */
  --steel-dim: #5f6872;             /* tertiary text */
  --white: #f4f6f8;                 /* primary text */
  --paper: #f3efe6;                 /* the receipt */
  --paper-ink: #1d1f22;             /* print on the receipt */
  --paper-faint: #8a857a;           /* light print on the receipt */
  --rule: rgba(154, 163, 173, 0.22);        /* hairlines */
  --rule-strong: rgba(154, 163, 173, 0.40);

  /* ---- Light (the blue is light, not a fill) ---- */
  --neon: #2f7bff;
  --neon-hot: #8fb8ff;
  --neon-rgb: 47, 123, 255;
  --neon-glow: 0 0 18px rgba(47, 123, 255, 0.55), 0 0 60px rgba(47, 123, 255, 0.25);

  /* ---- Status (used only where a verdict is stated) ---- */
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

  /* ---- Aliases the shared components use ---- */
  --bg-0: var(--black);
  --bg-1: var(--graphite);
  --bg-2: var(--graphite-2);
  --bg-3: #1f242c;
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --line-top: rgba(255, 255, 255, 0.06);
  --fg: var(--white);
  --fg-dim: var(--steel);
  --fg-faint: var(--steel-dim);
  --accent: var(--neon);
  --accent-hover: #4a8dff;
  --accent-hot: var(--neon-hot);
  --accent-soft: rgba(47, 123, 255, 0.14);
  --accent-rgb: var(--neon-rgb);
  --on-accent: #ffffff;
  --on-light: var(--black);
  --glow-accent: var(--neon-glow);

  /* ---- Type ---- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;
  --font-serif: var(--font-sans);
  --display-stretch: 74%;           /* Archivo condensed: the signage voice */
  --wide-stretch: 112%;             /* Archivo semi-expanded: small UI words */

  --t-2xs: 0.72rem;
  --t-xs: 0.8rem;
  --t-sm: 0.9rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;
  --t-2xl: 2.4rem;
  --t-3xl: 3.6rem;
  --t-4xl: 7rem;

  /* ---- Spacing (8px scale) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --s-9: 8rem;

  /* ---- Shape: machined, nearly square ---- */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 60ch;
  --container: 1240px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 0 var(--line-top) inset, 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.7);
  --shadow-paper: 0 2px 0 rgba(0, 0, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.7);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;
  --stagger: 70ms;
}