/* ============================================================
   BWorldCupPredictor — Design System Tokens
   "A night match under floodlights." WC 2026.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- COLOR · surfaces (midnight stadium) ---------- */
  --navy-950: oklch(0.16 0.040 264);   /* deepest pitch-night bg          */
  --navy-900: oklch(0.20 0.046 264);   /* app background                  */
  --navy-850: oklch(0.235 0.048 264);  /* raised panel                    */
  --navy-800: oklch(0.27 0.050 264);   /* card surface                    */
  --navy-750: oklch(0.31 0.050 264);   /* card hover                      */
  --navy-700: oklch(0.36 0.046 264);   /* hairline / inset border         */
  --navy-600: oklch(0.44 0.042 264);   /* strong border                   */
  --navy-500: oklch(0.55 0.034 264);   /* disabled fg                     */

  /* ---------- COLOR · gold (floodlight accent) ---------- */
  --gold-bright: oklch(0.90 0.135 90);  /* glints / highlights            */
  --gold:        oklch(0.83 0.150 86);  /* primary accent · selections    */
  --gold-deep:   oklch(0.74 0.150 80);  /* pressed / borders              */
  --gold-dim:    oklch(0.83 0.150 86 / 0.16); /* tint fills               */
  --gold-glow:   oklch(0.83 0.150 86 / 0.40); /* glow rings               */

  /* ---------- COLOR · pitch green (secondary accent) ---------- */
  --pitch:       oklch(0.72 0.150 152);
  --pitch-deep:  oklch(0.62 0.150 152);
  --pitch-dim:   oklch(0.72 0.150 152 / 0.16);

  /* ---------- COLOR · text ---------- */
  --ink:        oklch(0.98 0.006 250);  /* primary text (off-white)        */
  --ink-soft:   oklch(0.86 0.012 255);  /* secondary text                  */
  --ink-mut:    oklch(0.70 0.018 258);  /* muted / labels                  */
  --ink-faint:  oklch(0.56 0.024 260);  /* faint / placeholders            */
  --on-gold:    oklch(0.20 0.046 80);   /* text on gold fills              */

  /* ---------- COLOR · semantic ---------- */
  --win:    oklch(0.74 0.150 152);      /* correct / home win              */
  --win-dim: oklch(0.74 0.150 152 / 0.16);
  --draw:   oklch(0.83 0.150 86);       /* draw                            */
  --loss:   oklch(0.64 0.215 24);       /* incorrect / away or wrong       */
  --loss-dim: oklch(0.64 0.215 24 / 0.16);
  --amber:  oklch(0.80 0.150 65);       /* mid accuracy                    */

  /* ---------- TYPE ---------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 52px;
  --fs-5xl: 76px;
  --fs-6xl: 112px;

  /* ---------- SPACING · 4px grid, 14 stops ---------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-11: 56px;
  --sp-12: 64px;
  --sp-13: 80px;
  --sp-14: 96px;

  /* ---------- RADIUS ---------- */
  --r-sm: 4px;     /* default                 */
  --r-md: 8px;     /* cards                   */
  --r-lg: 14px;    /* large surfaces / modal  */
  --r-full: 999px; /* pills / badges          */

  /* ---------- ELEVATION (3 levels) ---------- */
  --elev-flat: inset 0 0 0 1px var(--navy-700);
  --elev-card:
    0 1px 0 0 oklch(1 0 0 / 0.04) inset,
    0 2px 6px -1px oklch(0 0 0 / 0.45),
    0 8px 24px -8px oklch(0 0 0 / 0.55);
  --elev-modal:
    0 1px 0 0 oklch(1 0 0 / 0.05) inset,
    0 24px 64px -16px oklch(0 0 0 / 0.70),
    0 8px 24px -8px oklch(0 0 0 / 0.55);
  --ring-gold: 0 0 0 1px var(--gold), 0 0 18px -2px var(--gold-glow);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ---------- base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: var(--on-gold); }

/* faint stadium-floodlight wash used app-wide */
.bg-stadium {
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.30 0.06 264) 0%, transparent 55%),
    radial-gradient(90% 60% at 12% 0%, var(--gold-dim) 0%, transparent 40%),
    radial-gradient(90% 60% at 88% 0%, var(--pitch-dim) 0%, transparent 40%),
    var(--navy-900);
}

/* tabular figures everywhere numbers matter */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* utility: condensed display caps */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.92; text-transform: uppercase; }

/* thin scrollbars in dark UI */
* { scrollbar-width: thin; scrollbar-color: var(--navy-700) transparent; }
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: var(--navy-700); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }