/* =========================================================================
   CISCO ARENA — DESIGN TOKENS
   Chrome tokens (fixed) + theme tokens (overridden by [data-theme])
   ========================================================================= */

:root {
  /* ---- Chrome spacing / radii / motion (FIXED, never themed) ---- */
  --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-20: 80px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms; --dur-celeb: 1800ms;

  --shadow-1: 0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.12);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);

  /* Cisco permanent accent — appears regardless of theme */
  --cisco: #049FD9;
  --cisco-ink: #0B4D6B;

  /* ---- Density (toggled by data-density) ---- */
  --density-sp: 1;
  --density-font: 1;

  /* ---- Typography — body stays constant, display comes from theme ---- */
  --f-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-display: "Inter Tight", "Inter", system-ui, sans-serif;
}

[data-density="compact"]  { --density-sp: .82; --density-font: .94; }
[data-density="roomy"]    { --density-sp: 1.14; --density-font: 1.04; }

/* =========================================================================
   THEME: CISCO NEUTRAL (default) — broadcast dark
   ========================================================================= */
[data-theme="cisco"] {
  --bg:        oklch(0.17 0.015 250);
  --bg-elev:   oklch(0.22 0.017 250);
  --bg-elev-2: oklch(0.26 0.018 250);
  --line:      oklch(0.32 0.02 250);
  --ink:       oklch(0.97 0.005 250);
  --ink-dim:   oklch(0.72 0.01 250);
  --ink-muted: oklch(0.62 0.01 250);

  --accent:    #049FD9;            /* Cisco blue */
  --accent-ink:#003E56;
  --accent-2:  oklch(0.78 0.16 195);
  --success:   oklch(0.78 0.18 155);
  --danger:    oklch(0.70 0.20 27);
  --warning:   oklch(0.82 0.17 80);

  --chip-bg:   oklch(0.26 0.018 250);
  --grad-hero: linear-gradient(135deg, oklch(0.22 0.04 230), oklch(0.20 0.02 250) 60%);

  --f-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --theme-name: "ARENA";
  --theme-tag:  "CISCO · LIVE CHAMPIONSHIP";
}

/* light variant shared by all themes via [data-mode="light"] */
[data-theme="cisco"][data-mode="light"] {
  --bg:        oklch(0.985 0.003 250);
  --bg-elev:   oklch(1 0 0);
  --bg-elev-2: oklch(0.965 0.005 250);
  --line:      oklch(0.90 0.008 250);
  --ink:       oklch(0.18 0.015 250);
  --ink-dim:   oklch(0.38 0.012 250);
  --ink-muted: oklch(0.55 0.01 250);
  --chip-bg:   oklch(0.96 0.008 250);
  --grad-hero: linear-gradient(135deg, oklch(0.96 0.02 230), oklch(0.98 0.005 250));
}

/* =========================================================================
   THEME: CONTINENTAL CUP (invented international football)
   ========================================================================= */
[data-theme="cup"] {
  --bg:        oklch(0.20 0.05 155);
  --bg-elev:   oklch(0.25 0.06 155);
  --bg-elev-2: oklch(0.29 0.07 155);
  --line:      oklch(0.38 0.05 155);
  --ink:       oklch(0.98 0.01 100);
  --ink-dim:   oklch(0.78 0.03 100);
  --ink-muted: oklch(0.60 0.03 100);

  --accent:    oklch(0.85 0.22 95);   /* trophy gold */
  --accent-ink:oklch(0.28 0.10 80);
  --accent-2:  oklch(0.70 0.20 25);    /* kit red */
  --success:   oklch(0.82 0.22 140);
  --danger:    oklch(0.70 0.22 25);
  --warning:   oklch(0.86 0.18 85);

  --chip-bg:   oklch(0.29 0.08 155);
  --grad-hero: radial-gradient(ellipse at 20% 10%, oklch(0.35 0.12 155) 0%, oklch(0.18 0.06 155) 70%);

  --f-display: "Oswald", "Bebas Neue", "Inter Tight", sans-serif;
  --theme-name: "CONTINENTAL CUP";
  --theme-tag:  "MATCHDAY · GROUP STAGE";
}

[data-theme="cup"][data-mode="light"] {
  --bg: oklch(0.97 0.02 130); --bg-elev: #fff; --bg-elev-2: oklch(0.95 0.03 130);
  --line: oklch(0.88 0.04 130); --ink: oklch(0.20 0.06 155); --ink-dim: oklch(0.40 0.04 155);
  --ink-muted: oklch(0.55 0.02 155); --chip-bg: oklch(0.95 0.03 130);
  --grad-hero: linear-gradient(135deg, oklch(0.94 0.06 130), oklch(0.98 0.02 130));
}

/* =========================================================================
   THEME: GRAND PRIX SERIES (invented motorsport)
   ========================================================================= */
[data-theme="gp"] {
  --bg:        oklch(0.14 0.01 20);
  --bg-elev:   oklch(0.19 0.015 20);
  --bg-elev-2: oklch(0.23 0.02 20);
  --line:      oklch(0.32 0.02 20);
  --ink:       oklch(0.98 0.01 0);
  --ink-dim:   oklch(0.75 0.02 20);
  --ink-muted: oklch(0.62 0.02 20);

  --accent:    oklch(0.68 0.25 25);   /* race red */
  --accent-ink:oklch(0.20 0.08 25);
  --accent-2:  oklch(0.90 0.18 95);   /* caution yellow */
  --success:   oklch(0.78 0.20 150);
  --danger:    oklch(0.65 0.25 25);
  --warning:   oklch(0.90 0.18 95);

  --chip-bg:   oklch(0.23 0.02 20);
  --grad-hero: linear-gradient(115deg, oklch(0.12 0.02 20) 0%, oklch(0.22 0.08 25) 55%, oklch(0.12 0.02 20) 100%);

  --f-display: "Rajdhani", "Titillium Web", "Inter Tight", sans-serif;
  --theme-name: "GRAND PRIX SERIES";
  --theme-tag:  "RACE WEEKEND · QUALIFYING";
}

[data-theme="gp"][data-mode="light"] {
  --bg: oklch(0.97 0.005 20); --bg-elev: #fff; --bg-elev-2: oklch(0.95 0.008 20);
  --line: oklch(0.88 0.01 20); --ink: oklch(0.16 0.02 20); --ink-dim: oklch(0.36 0.02 20);
  --ink-muted: oklch(0.55 0.02 20); --chip-bg: oklch(0.95 0.01 20);
  --grad-hero: linear-gradient(115deg, oklch(0.96 0.02 20), oklch(0.99 0.005 20));
}

/* =========================================================================
   THEME: NFL (invented gridiron football)
   ========================================================================= */
[data-theme="nfl"] {
  --bg:        oklch(0.18 0.02 245);
  --bg-elev:   oklch(0.23 0.03 245);
  --bg-elev-2: oklch(0.27 0.04 245);
  --line:      oklch(0.36 0.03 245);
  --ink:       oklch(0.98 0.005 245);
  --ink-dim:   oklch(0.78 0.015 245);
  --ink-muted: oklch(0.62 0.015 245);

  --accent:    oklch(0.65 0.22 260);   /* field-night blue */
  --accent-ink:oklch(0.22 0.08 260);
  --accent-2:  oklch(0.78 0.20 50);    /* endzone orange */
  --success:   oklch(0.80 0.20 145);
  --danger:    oklch(0.68 0.22 25);
  --warning:   oklch(0.84 0.18 75);

  --chip-bg:   oklch(0.27 0.04 245);
  --grad-hero: linear-gradient(135deg, oklch(0.20 0.04 260) 0%, oklch(0.16 0.02 245) 60%, oklch(0.22 0.06 50) 150%);

  --f-display: "Anton", "Oswald", "Inter Tight", sans-serif;
  --theme-name: "GRIDIRON LEAGUE";
  --theme-tag:  "GAMEDAY · Q2 · HUDDLE";
}

[data-theme="nfl"][data-mode="light"] {
  --bg: oklch(0.97 0.005 245); --bg-elev: #fff; --bg-elev-2: oklch(0.95 0.01 245);
  --line: oklch(0.88 0.01 245); --ink: oklch(0.18 0.03 260); --ink-dim: oklch(0.38 0.02 260);
  --ink-muted: oklch(0.55 0.02 245); --chip-bg: oklch(0.95 0.01 245);
  --grad-hero: linear-gradient(135deg, oklch(0.94 0.04 260), oklch(0.98 0.01 245));
}

/* =========================================================================
   THEME: REALM WARS (original medieval fantasy — no HBO marks)
   ========================================================================= */
[data-theme="realm"] {
  --bg:        oklch(0.15 0.015 40);
  --bg-elev:   oklch(0.19 0.02 40);
  --bg-elev-2: oklch(0.23 0.025 40);
  --line:      oklch(0.34 0.02 40);
  --ink:       oklch(0.94 0.02 80);     /* parchment */
  --ink-dim:   oklch(0.72 0.03 60);
  --ink-muted: oklch(0.62 0.02 40);

  --accent:    oklch(0.72 0.18 55);     /* aged gold */
  --accent-ink:oklch(0.22 0.06 40);
  --accent-2:  oklch(0.55 0.18 25);     /* banner crimson */
  --success:   oklch(0.72 0.14 140);
  --danger:    oklch(0.60 0.22 25);
  --warning:   oklch(0.80 0.16 70);

  --chip-bg:   oklch(0.23 0.025 40);
  --grad-hero: linear-gradient(135deg, oklch(0.20 0.04 40) 0%, oklch(0.13 0.01 40) 55%, oklch(0.18 0.06 25) 130%);

  --f-display: "Cinzel", "Trajan Pro", "Inter Tight", serif;
  --theme-name: "REALM WARS";
  --theme-tag:  "THE TRIAL · ROUND OF HOUSES";
}

[data-theme="realm"][data-mode="light"] {
  --bg: oklch(0.96 0.02 75); --bg-elev: oklch(0.98 0.015 75); --bg-elev-2: oklch(0.93 0.03 75);
  --line: oklch(0.84 0.04 55); --ink: oklch(0.22 0.04 40); --ink-dim: oklch(0.42 0.03 40);
  --ink-muted: oklch(0.55 0.02 40); --chip-bg: oklch(0.92 0.03 65);
  --grad-hero: linear-gradient(135deg, oklch(0.94 0.05 55), oklch(0.97 0.02 75));
}

/* =========================================================================
   Global resets + utility
   ========================================================================= */
* { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(14px * var(--density-font));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--f-display); letter-spacing: -0.01em; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* Animations */
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}
@keyframes tick-up {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes scale-in {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fade-up {
  0% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes sweep {
  0% { transform: translateX(-110%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes confetti-fall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}