/* =========================================================================
   The Stadium — Design Tokens
   Drop this file in and reference --tokens. All foundations live here.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,800;0,900;1,700;1,800;1,900&family=Manrope:wght@400;500;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---- COLOR — RAW PALETTE ------------------------------------------- */

  /* Electric Blue — the hero. Primary action, logo, brand. */
  --pitch-50:  #EEF2FF;
  --pitch-100: #DCE7FF;
  --pitch-200: #BAD0FF;
  --pitch-300: #8BAFFF;
  --pitch-400: #5B82FF;  /* hover / lift */
  --pitch-500: #2A5CFF;  /* primary */
  --pitch-600: #1842D6;
  /* RGB channels of the hero (pitch-500) */
  --pitch-rgb: 42, 92, 255;
  --pitch-700: #0F2B9E;
  --pitch-800: #081B6B;
  --pitch-900: #040D3A;

  /* Electric Arena canonical aliases */
  --primary:          #2A5CFF;
  --primary-bright:   #5B82FF;
  --primary-glow:     rgba(42, 92, 255, 0.55);
  --secondary:        #FF2D4B;
  --secondary-bright: #FF6075;
  --secondary-glow:   rgba(255, 45, 75, 0.5);

  /* Ink / Concourse — Stadium Black surfaces */
  --ink-50:  #EFF2F8;
  --ink-100: #DCE1EE;
  --ink-200: #B6BED4;
  --ink-300: #818BA8;
  --ink-400: #525B78;
  --ink-500: #323A55;
  --ink-600: #1E2438;
  --ink-700: #11151F;  /* panel raised */
  --ink-800: #0D1018;  /* panel */
  --ink-900: #07090D;  /* Stadium Black — base surface */
  --ink-950: #03050C;  /* Stadium Black deep */

  /* Structural surface aliases */
  --panel:   #0D1018;
  --panel-2: #11151F;
  --edge:    rgba(255,255,255,0.08);

  /* Floodlight — warm off-white */
  --light-50:  #FBFAF6;
  --light-100: #F6F4EE;   /* default light surface */
  --light-200: #ECE9DF;
  --light-300: #DAD5C5;

  /* Roar Green — live data, fan counts, positive deltas. Spring/scoreboard green. */
  --roar-300: #8FF0BC;
  --roar-400: #5FE39E;
  --roar-500: #3DDC84;    /* live indicator, fan count, score delta */
  --roar-600: #1FB867;
  --roar-700: #14904F;

  /* Boo / Signal Red — reaction · alert, destructive, ejection, boo reaction */
  --boo-400: #FF5A72;
  --boo-500: #FF2D4B;
  --boo-600: #E11233;

  /* Crowd Green is now the same as Roar — single live/positive accent */
  --crowd-400: var(--roar-400);
  --crowd-500: var(--roar-500);
  --crowd-600: var(--roar-600);

  /* ---- COLOR — SEMANTIC TOKENS --------------------------------------- */

  /* Surfaces (dark-default) */
  --bg:           var(--ink-900);
  --bg-elev-1:    var(--ink-800);  /* cards, sheets */
  --bg-elev-2:    var(--ink-700);  /* hovered card, modal */
  --bg-elev-3:    var(--ink-600);  /* pressed, popover */
  --bg-inverse:   var(--light-100);
  --bg-marketing: var(--light-100);

  /* Foreground / text */
  --fg:           #FFFFFF;
  --fg-1:         #FFFFFF;                   /* primary text on dark */
  --fg-2:         rgba(255,255,255,0.64);    /* secondary */
  --fg-3:         rgba(255,255,255,0.40);    /* tertiary, timestamps */
  --fg-4:         rgba(255,255,255,0.24);    /* disabled */
  --fg-on-light:  var(--ink-900);
  --fg-on-light-2:var(--ink-500);
  --fg-on-light-3:var(--ink-400);

  /* Accent / interactive */
  --accent:       var(--pitch-500);
  --accent-hover: var(--pitch-400);
  --accent-press: var(--pitch-600);
  --accent-fg:    #FFFFFF;
  --focus-ring:   var(--pitch-400);

  /* Status — green is now the live/positive accent (per brand mock) */
  --live:         var(--roar-500);
  --positive:     var(--roar-500);
  --negative:     var(--boo-500);
  --warning:      var(--pitch-400);

  /* Premium / paid tier ("Stand") — a stable championship gold that stays gold
     in EVERY look, so premium features read as premium even when the primary
     accent is red / blue / etc. A deliberate, sparing hint. */
  --premium-300:  #FFE08A;
  --premium-400:  #FFC93F;   /* the gold hint */
  --premium-500:  #E0A411;
  --premium-rgb:  255, 201, 63;

  /* Hairline / borders */
  --border-hair-dark:  rgba(255,255,255,0.06);
  --border-soft-dark:  rgba(255,255,255,0.10);
  --border-hair-light: rgba(10,14,26,0.06);
  --border-soft-light: rgba(10,14,26,0.10);

  /* ---- TYPE — FAMILIES ---------------------------------------------- */

  --font-display: 'Montserrat', 'Helvetica Neue', system-ui, sans-serif;
  --font-ui:      'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---- TYPE — SCALE (geometric ~1.2×) ------------------------------- */

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;   /* body default */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-96: 96px;
  --fs-128: 128px;
  --fs-160: 160px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-display: -0.01em;
  --ls-normal:  0;
  --ls-caps:    0.08em;   /* live, all-caps tags */
  --ls-wide:    0.16em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* ---- SPACING ------------------------------------------------------- */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- RADII --------------------------------------------------------- */

  --r-0:     0;
  --r-xs:    4px;     /* chips, tags */
  --r-sm:    8px;     /* buttons, inputs, default */
  --r-md:    12px;
  --r-lg:    16px;    /* stadium room cards */
  --r-xl:    20px;
  --r-pill:  999px;   /* score capsule, reaction tray */

  /* ---- SHADOW / GLOW ------------------------------------------------- */

  /* No drop shadows on dark — use elevation. These are for light surfaces. */
  --shadow-sm:    0 2px 6px  rgba(10,14,26,0.06);
  --shadow-md:    0 8px 24px rgba(10,14,26,0.08);
  --shadow-lg:    0 16px 48px rgba(10,14,26,0.12);

  /* Inner highlight on dark cards (subtle "lit from above") */
  --inset-hi:     inset 0 1px 0 rgba(255,255,255,0.04);
  --inset-hi-2:   inset 0 1px 0 rgba(255,255,255,0.08);

  /* Glow — used on primary CTA and live dot only */
  --glow-pitch:   0 0 24px rgba(var(--pitch-rgb), 0.55);
  --glow-premium: 0 0 18px rgba(var(--premium-rgb), 0.45);
  --glow-roar:    0 0 12px rgba(61, 220, 132, 0.65);
  --glow-boo:     0 0 16px rgba(255, 59, 92, 0.45);

  /* ---- MOTION -------------------------------------------------------- */

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* reactions only */

  --dur-instant:  80ms;
  --dur-fast:     160ms;
  --dur-base:     240ms;
  --dur-slow:     400ms;
  --dur-pulse:    1600ms;

  /* ---- LAYOUT -------------------------------------------------------- */

  --container-max: 1280px;
  --gutter:        24px;
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Use as classes (.h1, .body) or apply directly to elements.
   ========================================================================= */

html, body {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Montserrat 900 italic, all-caps, stadium-banner energy */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.display-xl { font-size: var(--fs-160); }
.display-lg { font-size: var(--fs-128); }
.display-md { font-size: var(--fs-96); }
.display-sm { font-size: var(--fs-64); }

/* Headings — Manrope heavy */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.h1 { font-size: var(--fs-48); }
.h2 { font-size: var(--fs-32); }
.h3 { font-size: var(--fs-24); }
.h4 { font-size: var(--fs-20); }

/* Body */
.body-lg { font-size: var(--fs-18); line-height: var(--lh-normal); }
.body    { font-size: var(--fs-16); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-3); }

/* All-caps live / tag */
.tag, .live-tag {
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1;
}
.live-tag { color: var(--live); }

/* Score / clock — mono tabular */
.numeral, .score, .clock {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Big-moment numerals — Montserrat heavy */
.big-numeral {
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

/* Helpers */
.text-fg-2  { color: var(--fg-2); }
.text-fg-3  { color: var(--fg-3); }
.text-roar  { color: var(--roar-500); }
.text-boo   { color: var(--boo-500); }
.text-crowd { color: var(--crowd-500); }
.text-pitch { color: var(--pitch-400); }

/* =========================================================================
   PRIMITIVES — re-usable patterns
   ========================================================================= */

/* The Live Indicator — the heartbeat of the app */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--roar-500);
  box-shadow: var(--glow-roar);
  animation: live-pulse var(--dur-pulse) var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.8; }
}

/* Floodlight glow — top-anchored radial, place inside a position:relative parent */
.floodlight::before {
  content: '';
  position: absolute;
  inset: -200px -100px auto -100px;
  height: 600px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--pitch-rgb),0.42) 0%, rgba(var(--pitch-rgb),0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* Press affordance — apply .press to anything tappable */
.press {
  transition: transform var(--dur-instant) var(--ease-out),
              filter    var(--dur-instant) var(--ease-out);
  will-change: transform;
}
.press:active { transform: scale(0.96); filter: brightness(0.92); }
@media (hover: hover) {
  .press:hover { filter: brightness(1.08); }
}

/* Focus ring — replaces the browser default */
:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}