/* Glass House Live: design tokens. Shared by every page. Do not hard-code these values elsewhere. */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Archivo variable: wdth 62–125, wght 100–900 */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wdth-italic.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* "Friday night under the floodlights": warm, never cold ESPN blue */
  --navy:        #0B1530;  /* Floodlit Navy: page base */
  --navy-2:      #111E42;  /* raised panels */
  --navy-3:      #1A2A57;  /* borders on navy, inactive tracks */
  --cobalt:      #1F4FD8;  /* Turf Cobalt: court-blue graphic plates */
  --ball:        #E4FF3A;  /* Optic Ball: the ball, highlights, clock digits, "you" highlighter */
  --coral:       #FF4D3D;  /* On-Air Coral: LIVE pill, losses, BREAKING */
  --gold:        #FFC23D;  /* Golden Gold: winners, crowns, gold flashes */
  --glass:       rgba(191, 244, 255, 0.22);  /* Glass Cyan panes and reflections */
  --glass-edge:  rgba(191, 244, 255, 0.45);
  --cream:       #FFF4E2;  /* Caption Cream: all body/caption text (never stark white) */
  --cream-dim:   rgba(255, 244, 226, 0.66);
  --cream-faint: rgba(255, 244, 226, 0.38);
  --win:         var(--ball);
  --loss:        var(--coral);
  --teletext-bg: #000000;
  --teletext-1:  #FFFF00;
  --teletext-2:  #00FFFF;
  --teletext-3:  #FF00FF;
  --teletext-4:  #00FF00;
  --teletext-5:  #FFFFFF;
  --teletext-6:  #FF0000;
  --teletext-7:  #0000FF;

  --font-display:  'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --font-body:     'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-teletext: 'VT323', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* type scale (mobile first; clamp grows to desktop) */
  --fs-mega:  clamp(64px, 19vw, 168px);
  --fs-huge:  clamp(44px, 12vw, 104px);
  --fs-xl:    clamp(32px, 8.5vw, 64px);
  --fs-l:     clamp(22px, 5.6vw, 34px);
  --fs-m:     clamp(17px, 4.3vw, 21px);
  --fs-s:     15px;
  --fs-xs:    12.5px;
  --fs-xxs:   10.5px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;

  --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-pill: 999px;

  /* broadcast chrome sits inside title-safe margins */
  --safe-x: max(14px, env(safe-area-inset-left));
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(0px, env(safe-area-inset-bottom));
  --chrome-top-h: 44px;
  --ticker-h: 30px;

  --z-segment: 1; --z-fx: 20; --z-chrome: 40; --z-overlay: 60; --z-toast: 80;

  /* motion: durations in ms; JS mirrors these in js/lib/motion.js */
  --dur-quick: 180ms; --dur-base: 420ms; --dur-slow: 900ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);

  --shadow-glow-ball: 0 0 24px rgba(228, 255, 58, 0.45);
  --shadow-glow-gold: 0 0 28px rgba(255, 194, 61, 0.5);
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* Turf texture: very fine noise, used as a background-image layer on navy surfaces */
.turf {
  background-color: var(--navy);
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.2px),
    radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.2px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* Player colour hook: set style="--pc: #4CC9F0" on any element */
.pc { color: var(--pc, var(--cream)); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}