/* Onitify Stream — Design Tokens v3.0 (Onitify huisstijl) */
:root {
  /* Achtergrond — Bijna-zwart */
  --bg: #1A1A19;
  --surface-1: #242423;
  --surface-2: #2C2C2B;
  --surface-3: #3A3A38;
  --border: rgba(255,255,255,.07);

  /* Tekst */
  --text-1: #FAFAF9;
  --text-2: #8C8A87;
  --text-3: #605E5B;

  /* Accent — Onit Red */
  --accent: #E30613;
  --accent-hover: #B0050F;
  --accent-muted: rgba(227,6,19,.15);

  /* Live Blue — uitsluitend voor links en energie-/live-accenten, nooit vlakvulling */
  --live-blue: #1E88E5;

  /* Club brand kleur — overschrijf via JS vanuit tenant config */
  --club-color: #E30613;

  /* Status */
  --live: #E30613;
  --online: #22C55E;

  /* Teams — overschrijf via JS */
  --team-home: #2F6BE4;
  --team-away: #F2A516;

  /* Font */
  --font: 'Inter', 'Neue Haas Grotesk Display Pro',
         'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type schaal */
  --t-xs: 11px; --t-sm: 13px;
  --t-base: 15px; --t-lg: 17px;
  --t-xl: 22px; --t-2xl: 34px;
  --t-score-sm: 56px; --t-score-lg: 88px;
  --t-overlay: clamp(48px, 7vw, 96px);

  /* Spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* Radii */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:9999px;

  /* Tap-targets */
  --tap:44px; --tap-score:68px; --tap-primary:52px;
}

/* ── Licht thema ─────────────────────────────────────────────────────────────
   Actief via systeemvoorkeur (prefers-color-scheme: light) of via
   data-theme="light" op <html> (handmatige toggle). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FAFAF9;
    --surface-1: #FFFFFF;
    --surface-2: #F0EEEC;
    --surface-3: #E3E1DE;
    --border: rgba(0,0,0,.08);
    --text-1: #1A1A19;
    --text-2: #6B6967;
    --text-3: #9B9996;
  }
}
:root[data-theme="light"] {
  --bg: #FAFAF9;
  --surface-1: #FFFFFF;
  --surface-2: #F0EEEC;
  --surface-3: #E3E1DE;
  --border: rgba(0,0,0,.08);
  --text-1: #1A1A19;
  --text-2: #6B6967;
  --text-3: #9B9996;
}