/* ============================================================
   THE 90 — Variant 03 · NIGHT HUD
   Design tokens. Futuristic stadium command centre: deepest
   navy layers, holographic green/cyan instruments, dosed glow.
   ============================================================ */

:root {
  /* --- Raw palette ------------------------------------------------ */
  --abyss:      #02040C;   /* page background */
  --panel:      #070D1F;   /* panels */
  --panel-2:    #0C1430;   /* top layer */
  --ink:        #050A30;   /* text on green / cyan fills */
  --green:      #24FF00;   /* primary: live, actives, timer rings */
  --cyan:       #3BE8FF;   /* holographic data: gauges, charts */
  --white:      #FFFFFF;

  /* --- Text --------------------------------------------------------- */
  --text:       #FFFFFF;
  --text-2:     #8C96B5;
  --text-3:     #7B85AD;

  /* --- Lines ---------------------------------------------------------- */
  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-g:      rgba(36, 255, 0, 0.35);    /* panel borders */
  --line-c:      rgba(59, 232, 255, 0.35);

  /* --- Glow (dosed — instruments, not signage) -------------------------- */
  --glow-g:  0 0 16px rgba(36, 255, 0, 0.26);
  --glow-c:  0 0 16px rgba(59, 232, 255, 0.24);
  --tglow-g: 0 0 14px rgba(36, 255, 0, 0.45);
  --tglow-c: 0 0 14px rgba(59, 232, 255, 0.4);

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Rubik One', 'Arial Black', 'Space Grotesk', sans-serif;
  --font-body:    'Space Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', 'Consolas', 'Courier New', monospace;

  --fs-giant:   62px;   /* live score */
  --fs-hero:    40px;
  --fs-h1:      27px;
  --fs-h2:      20px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-micro:   11px;
  --fs-nano:    10px;

  --ls-mono: 0.1em;

  /* --- Space (4px scale) --------------------------------------------------- */
  --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;
  --pad-page: 20px;

  /* --- Shape: cut corners ---------------------------------------------------- */
  --notch: 12px;
  --notch-sm: 8px;
  --cut: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
                 calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  --cut-sm: polygon(var(--notch-sm) 0, 100% 0, 100% calc(100% - var(--notch-sm)),
                    calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));

  /* --- Motion: ambient ---------------------------------------------------------- */
  --t-fast: 140ms ease-out;
  --t-med:  200ms ease-out;
  --pulse:  2.6s ease-in-out infinite;

  /* --- Layout ----------------------------------------------------------------- */
  --app-max:  430px;
  --tap:      44px;
  --tabbar-h: 86px;
}