/* ═══════════════════════════════════════════
   THEME TOKENS — Color system, typography, variables
   ═══════════════════════════════════════════ */

:root {
  --blue: #0D4FF7;
  --blue-10: #0D4FF71A;
  --blue-15: #0D4FF726;
  --blue-20: #0D4FF733;
  --blue-50: #0D4FF780;
  --blue-bright: #4D82FF;
  --font: 'Barlow', sans-serif;

  /* Dark mode (default) */
  --ink: #05081A;
  --slab: #0B1026;
  --slate: #121A38;
  --elevated: #0E1530;
  --chalk: #E4E9F7;
  --ghost: #3A4468;
  --dim: #252E4D;
  --dim-strong: #1A2240;
  --win: #00F57D;
  --draw: #FFD000;
  --loss: #FF3852;
  --card-shadow: none;
  --card-shadow-lg: none;
  --pitch-line: rgba(13, 79, 247, 0.07);
  --pitch-faint: rgba(13, 79, 247, 0.04);
  --pitch-grad: rgba(13, 79, 247, 0.06);
  --atmo: rgba(13, 79, 247, 0.03);
  --overlay: rgba(13, 79, 247, 0.08);
  --overlay-strong: rgba(13, 79, 247, 0.12);
  --nav-bg: rgb(8, 13, 30);
  --nav-border: #151C34;
  --fab-shadow: 0 6px 24px rgba(13,79,247,0.45);
  --streak-bg: linear-gradient(135deg, #0D4FF715, #0D4FF708);
  --date-active-bg: var(--blue);
  --date-active-text: #fff;

  /* Team crest colors (RGB triplets) — overridden at runtime by JS */
  --home-c1: 13,79,247;
  --home-c2: 100,150,255;
  --away-c1: 255,56,82;
  --away-c2: 200,60,80;
}

/* Light mode */
[data-theme="light"] {
  --ink: #F8F8F8;
  --slab: #FFFFFF;
  --slate: #F0F0F0;
  --elevated: #FFFFFF;
  --chalk: #3B3B3B;
  --ghost: #A1A1A1;
  --dim: #E9E9E9;
  --dim-strong: #DDDDDD;
  --win: #00C853;
  --draw: #F5A623;
  --loss: #E53935;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --card-shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --pitch-line: rgba(13, 79, 247, 0.05);
  --pitch-faint: rgba(13, 79, 247, 0.03);
  --pitch-grad: rgba(13, 79, 247, 0.03);
  --atmo: rgba(13, 79, 247, 0.015);
  --overlay: rgba(13, 79, 247, 0.06);
  --overlay-strong: rgba(13, 79, 247, 0.09);
  --nav-bg: rgb(248, 248, 248);
  --nav-border: #E9E9E9;
  --fab-shadow: 0 6px 24px rgba(13,79,247,0.3);
  --streak-bg: linear-gradient(135deg, #0D4FF710, #0D4FF706);
  --date-active-bg: var(--blue);
  --date-active-text: #fff;
}

/* ═══════ RESET & BASE TYPOGRAPHY ═══════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--ink); overscroll-behavior: none; }

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--chalk);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  min-height: 100vh;
  min-height: 100dvh;
}

button, [onclick], .nav-item, .league-item, .date-cell, .match-row,
.hdr-btn, .md-back, .sb-card, .slip-card, .plan-card {
  touch-action: manipulation;
}

/* ═══════ SAFE AREA ═══════ */
@supports (padding-top: env(safe-area-inset-top)) {
  .header { padding-top: calc(14px + env(safe-area-inset-top)); }
  .app { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* ═══════ iOS — ANIMATION BUDGET ═══════
   iOS Safari / WKWebView has a hard limit on GPU compositor layers.
   Every CSS animation with transform/opacity promotes its element to a
   separate layer. With 60+ infinite animations across the stylesheets,
   the WebContent process exceeds the budget and crashes ("a problem
   occurred"). This blanket rule pauses all infinite animations. One-shot
   entrance animations (fadeIn, slideUp) still play — they finish and
   release their layer. Spinner animations are exempt via specificity. */
.is-ios *,
.is-ios *::before,
.is-ios *::after {
  animation-iteration-count: 1 !important;
}

/* Exempt loading spinners — these are brief and essential for UX */
.is-ios .auth-dots span { animation-iteration-count: infinite !important; }

/* ═══════ iPhone — TIGHT MEMORY BUDGET ═══════
   iPhone WKWebView gets ~80-120 MB vs ~300-400 MB on iPad.
   Target only the specific elements that cause layer/memory pressure. */

/* backdrop-filter creates a GPU layer + readback — only .sil-error-overlay uses it */
.is-iphone .sil-error-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(5,8,26,0.92);
}

/* Kill FAB float — permanent infinite transform animation = permanent layer */
.is-iphone .fab { animation: none; }

/* Kill live-status blink on iPhone — each dot is a compositor layer */
.is-iphone .match-status.live-status::before { animation: none; }