/* ============================================================
   STATDEK DESIGN SYSTEM — FULL UPGRADE (Hybrid: Enterprise + Sport)
   Backwards-compatible: no existing token names removed or renamed.
   Adds spacing, radius, elevation, dim accents, neutral surfaces,
   typography tokens, and layout structure.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES: COLOR (Original) ---------- */
  --color-navy-950: #0b1220;
  --color-navy-900: #0f172a;
  --color-navy-800: #1e293b;
  --color-slate-700: #334155;
  --color-white: #f8fafc;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-green-500: #22c55e;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-red-500: #ef4444;
  --color-purple-500: #8b5cf6;
  --color-purple-900: #4c1d95;

  /* Format-badge one-offs */
  --color-blue-400: #60a5fa;
  --color-blue-950: #1e3a8a;
  --color-rose-500: #f43f5e;
  --color-rose-950: #881337;
  --color-emerald-400: #34d399;
  --color-emerald-800: #065f46;

  /* TV Mode primitives */
  --color-tv-navy-950: #05070d;
  --color-tv-navy-900: #0d1220;
  --color-tv-slate-800: #1f2937;
  --color-tv-white: #ffffff;
  --color-tv-slate-300: #b8c2d4;

  /* ---------- NEW PRIMITIVES: NEUTRALS & DIM ACCENTS ---------- */
  --color-surface-neutral: #111827;   /* enterprise neutral */
  --color-surface-subtle: #1f2933;    /* lighter neutral for filters/sidebars */
  --color-border-subtle: #1f2937;     /* softer divider */

  --color-blue-500-dim: #2f5fb8;
  --color-green-500-dim: #1c9a4b;
  --color-amber-500-dim: #c47a08;
  --color-red-500-dim: #c33636;
  --color-purple-500-dim: #6c46c4;

  /* ---------- SEMANTIC TOKENS: "app" scheme (Original) ---------- */
  --bg-color: var(--color-navy-900);
  --card-bg: var(--color-navy-800);
  --card-border: var(--color-slate-700);
  --bg-hero-app: var(--color-navy-950);
  --text-main: var(--color-white);
  --text-muted: var(--color-slate-400);
  --text-tertiary: var(--color-slate-500);
  --accent-win: var(--color-green-500);
  --accent-active: var(--color-blue-500);
  --accent-warn: var(--color-amber-500);
  --accent-danger: var(--color-red-500);
  --accent-swiss: var(--color-purple-500);
  --accent-swiss-border: var(--color-purple-900);

  /* ---------- SEMANTIC TOKENS: "site" scheme (Original) ---------- */
  --bg-dark: var(--color-navy-900);
  --panel-bg: var(--color-navy-800);
  --panel-border: var(--color-slate-700);
  --bg-hero: var(--color-navy-950);
  --accent: var(--color-blue-500);
  --accent-hover: var(--color-blue-600);
  --success: var(--color-green-500);
  --gold: var(--color-amber-500);
  --silver: var(--color-slate-400);
  --bronze: var(--color-amber-600);
  --swiss: var(--color-purple-500);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;

  /* ---------- NEW SEMANTIC TOKENS: NEUTRAL SURFACES ---------- */
  --bg-neutral: var(--color-surface-neutral);
  --bg-subtle: var(--color-surface-subtle);

  /* ---------- NEW SEMANTIC TOKENS: DIM ACCENTS ---------- */
  --accent-active-dim: var(--color-blue-500-dim);
  --accent-win-dim: var(--color-green-500-dim);
  --accent-warn-dim: var(--color-amber-500-dim);
  --accent-danger-dim: var(--color-red-500-dim);
  --accent-swiss-dim: var(--color-purple-500-dim);

  /* ---------- NEW SEMANTIC TOKENS: SURFACE ELEVATION ---------- */
  --surface-page: var(--bg-dark);
  --surface-card: var(--panel-bg);
  --surface-raised: var(--bg-neutral);
  --surface-raised-border: var(--color-border-subtle);

  /* ---------- FORMAT BADGES (Original) ---------- */
  --badge-double: var(--color-blue-400);
  --badge-double-border: var(--color-blue-950);
  --badge-single: var(--color-rose-500);
  --badge-single-border: var(--color-rose-950);
  --badge-swiss: var(--accent-swiss);
  --badge-swiss-border: var(--accent-swiss-border);

  /* ---------- TV MODE (Original + dim accent) ---------- */
  --tv-bg: var(--color-tv-navy-950);
  --tv-panel-bg: var(--color-tv-navy-900);
  --tv-panel-border: var(--color-tv-slate-800);
  --tv-text: var(--color-tv-white);
  --tv-text-dim: var(--color-tv-slate-300);
  --tv-accent: var(--accent-active);
  --tv-active: var(--accent-danger);
  --tv-win: var(--accent-win);
  --tv-warn: var(--accent-warn);
  --tv-swiss: var(--accent-swiss);
  --tv-accent-dim: var(--accent-active-dim);

  /* ---------- TYPOGRAPHY SYSTEM ---------- */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-scoreboard: "Oswald", "Arial Narrow", sans-serif;

  --line-height-body: 1.5;
  --line-height-tight: 1.25;
  --letter-spacing-label: 0.06em;
  --letter-spacing-metadata: 0.02em;

  --text-size-tournament-name: 32px;
  --text-size-section-title: 21px;
  --text-size-winner: 18px;
  --text-size-supporting: 14px;
  --text-size-metadata: 12px;
  --text-size-label: 11px;

  /* ---------- LAYOUT SYSTEM ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --elevation-none: none;
  --elevation-sm: 0 1px 2px rgba(15, 23, 42, 0.45);
  --elevation-md: 0 4px 10px rgba(15, 23, 42, 0.55);
  --elevation-lg: 0 10px 25px rgba(15, 23, 42, 0.65);

  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 20;
  --z-modal: 30;
  --z-toast: 40;
}

/* ---------- SCOREBOARD NUMERALS ---------- */
.scoreboard-num {
  font-family: var(--font-family-scoreboard);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- TYPOGRAPHY ROLES ---------- */
.text-tournament-name {
  font-family: var(--font-family-base);
  font-size: var(--text-size-tournament-name);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--text-main);
}
.text-section-title {
  font-family: var(--font-family-base);
  font-size: var(--text-size-section-title);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--text-main);
}
.text-winner {
  font-family: var(--font-family-base);
  font-size: var(--text-size-winner);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--text-main);
}
.text-supporting {
  font-family: var(--font-family-base);
  font-size: var(--text-size-supporting);
  line-height: var(--line-height-body);
  color: var(--text-muted);
}
.text-metadata {
  font-family: var(--font-family-base);
  font-size: var(--text-size-metadata);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-metadata);
  color: var(--text-tertiary);
}
.text-label {
  font-family: var(--font-family-base);
  font-size: var(--text-size-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--text-tertiary);
}

/* ---------- LIVE PULSE ---------- */
@keyframes statdek-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.live-pulse {
  animation: statdek-live-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse {
    animation: none;
  }
}