/* ============================================================
   DESIGN TOKENS — World Cup Prediction App
   "Floodlit stadium at night" aesthetic from SPEC §8.2
   ============================================================ */

:root {
  /* ── Palette ── */
  --bg-page:          #0A0E1A;   /* Deep stadium navy */
  --bg-surface:       #141827;   /* Elevated dark blue (cards/panels) */
  --bg-surface-hover: #1A2035;   /* Subtle lift on hover */
  --border:           #1E2740;   /* Muted blue-gray divider */

  --gold:   #F5A623;  /* Trophy gold — CTAs, points, countdowns */
  --green:  #27AE60;  /* Pitch green — correct predictions, saved */
  --red:    #E74C3C;  /* Loss / error */
  --neutral:#7F8C8D;  /* Draw / neutral */

  --text-primary:   #FFFFFF;
  --text-secondary: #8A94B2;
  --text-disabled:  #3D4A6B;

  /* ── Multiplier badge colours (green → amber → red) ── */
  --multi-100: var(--green);
  --multi-70:  #F39C12;
  --multi-50:  #E67E22;
  --multi-35:  #D35400;
  --multi-25:  var(--red);
  --multi-15:  #C0392B;

  /* ── Typography ── */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Spacing scale (8-pt) ── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-gold: 0 0 12px rgba(245, 166, 35, 0.3);
  --shadow-glow-green: 0 0 12px rgba(39, 174, 96, 0.3);

  /* ── Z-index layers ── */
  --z-nav:     100;
  --z-banner:  90;
  --z-modal:   200;
  --z-toast:   300;

  /* ── Transitions ── */
  --transition: 180ms ease;
  --transition-slow: 300ms ease;

  /* ── Nav heights ── */
  --nav-height: 60px;
  --banner-height: 48px;
  --bottom-nav-height: 64px;
}

/* Dark-mode is the only mode — no light theme override needed */