/* css/variables.css — Design tokens. Import first in every CSS file. */
:root {
  /* Palette */
  --black:      #0f172a;
  --dark:       #0d1525;
  --panel:      #1e293b;
  --border:     rgba(255,255,255,0.09);
  --red:        #cc2200;
  --red-hot:    #ff3300;
  --gold:       #d4a017;
  --gold-light: #f0c040;
  --white:      #f1f5f9;
  --muted:      #94a3b8;
  --green:      #16a34a;
  --green-dim:  rgba(22,163,74,0.15);

  /* Semantic tokens */
  --accent-primary: #22c55e;
  --playoff-top:    #16a34a;
  --playin-zone:    #3b82f6;
  --live-red:       #ef4444;
  --border-subtle:  rgba(255,255,255,0.06);

  /* Typography */
  --font-display:   'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body:      'Barlow', sans-serif;

  /* Layout */
  --nav-height: 64px;
  --max-width:  1100px;
  --gap:        1px;       /* grid gap colour comes from background */
}