@import 'tailwindcss';

/* Class-based dark mode: toggling `.dark` on <html> swaps the token values below. */
@custom-variant dark (&:where(.dark, .dark *));

/* ============================================================================
   CUP26 — broadcast palette. Floodlit pitch (dark) · clean telecast (light).
   Accent is pitch-green; gold is the highlight. Outcome colors (win/draw/loss)
   drive the model bars. Components consume --app-* tokens, never raw hex.
   ============================================================================ */

/* ---- Light: clean telecast ---- */
:root {
  --app-surface:    oklch(0.975 0.005 160);
  --app-surface-2:  oklch(0.945 0.008 160);
  --app-panel:      oklch(1 0 0);
  --app-panel-2:    oklch(0.975 0.006 160);
  --app-elevated:   oklch(0.930 0.010 160);
  --app-line:       oklch(0.890 0.012 160);
  --app-line-strong:oklch(0.800 0.018 158);
  --app-ink:        oklch(0.235 0.022 158);
  --app-ink-soft:   oklch(0.360 0.020 158);
  --app-muted:      oklch(0.520 0.018 160);
  --app-faint:      oklch(0.640 0.014 162);

  --app-accent:      oklch(0.585 0.150 150);
  --app-accent-deep: oklch(0.500 0.140 150);
  --app-accent-soft: oklch(0.700 0.160 150);
  --app-accent-ink:  oklch(0.985 0.010 150);
  --app-accent-glow: oklch(0.585 0.150 150 / 0.16);

  --app-gold:    oklch(0.760 0.130 85);
  --app-pitch:   oklch(0.560 0.110 150);

  --app-win:     oklch(0.610 0.140 150);
  --app-draw:    oklch(0.730 0.120 85);
  --app-loss:    oklch(0.580 0.160 25);

  --app-danger:  oklch(0.560 0.170 28);
  --app-danger-glow: oklch(0.560 0.170 28 / 0.16);
  --app-success: oklch(0.600 0.130 150);
  --app-warning: oklch(0.720 0.130 80);
  --app-info:    oklch(0.560 0.120 250);

  --app-live:    oklch(0.600 0.200 25);

  color-scheme: light;
}

/* ---- Dark: floodlit pitch at night ---- */
.dark {
  --app-surface:    oklch(0.165 0.022 158);
  --app-surface-2:  oklch(0.135 0.020 158);
  --app-panel:      oklch(0.205 0.024 159);
  --app-panel-2:    oklch(0.235 0.026 159);
  --app-elevated:   oklch(0.275 0.028 160);
  --app-line:       oklch(0.320 0.026 160);
  --app-line-strong:oklch(0.420 0.030 158);
  --app-ink:        oklch(0.955 0.012 150);
  --app-ink-soft:   oklch(0.860 0.014 152);
  --app-muted:      oklch(0.680 0.020 156);
  --app-faint:      oklch(0.540 0.022 158);

  --app-accent:      oklch(0.800 0.175 148);
  --app-accent-deep: oklch(0.700 0.160 148);
  --app-accent-soft: oklch(0.870 0.165 146);
  --app-accent-ink:  oklch(0.165 0.030 158);
  --app-accent-glow: oklch(0.800 0.175 148 / 0.20);

  --app-gold:    oklch(0.840 0.140 88);
  --app-pitch:   oklch(0.620 0.130 150);

  --app-win:     oklch(0.800 0.165 148);
  --app-draw:    oklch(0.820 0.130 88);
  --app-loss:    oklch(0.680 0.180 25);

  --app-danger:  oklch(0.680 0.185 30);
  --app-danger-glow: oklch(0.680 0.185 30 / 0.22);
  --app-success: oklch(0.790 0.150 150);
  --app-warning: oklch(0.820 0.140 82);
  --app-info:    oklch(0.720 0.130 252);

  --app-live:    oklch(0.700 0.220 25);

  color-scheme: dark;
}

/* Expose tokens as Tailwind utilities: bg-surface, text-faint, border-line, text-win… */
@theme inline {
  --color-surface: var(--app-surface);
  --color-surface-2: var(--app-surface-2);
  --color-panel: var(--app-panel);
  --color-panel-2: var(--app-panel-2);
  --color-elevated: var(--app-elevated);
  --color-line: var(--app-line);
  --color-line-strong: var(--app-line-strong);
  --color-ink: var(--app-ink);
  --color-ink-soft: var(--app-ink-soft);
  --color-muted: var(--app-muted);
  --color-faint: var(--app-faint);
  --color-accent: var(--app-accent);
  --color-accent-deep: var(--app-accent-deep);
  --color-accent-soft: var(--app-accent-soft);
  --color-accent-ink: var(--app-accent-ink);
  --color-accent-glow: var(--app-accent-glow);
  --color-gold: var(--app-gold);
  --color-pitch: var(--app-pitch);
  --color-win: var(--app-win);
  --color-draw: var(--app-draw);
  --color-loss: var(--app-loss);
  --color-danger: var(--app-danger);
  --color-danger-glow: var(--app-danger-glow);
  --color-success: var(--app-success);
  --color-warning: var(--app-warning);
  --color-info: var(--app-info);
  --color-live: var(--app-live);

  --font-display: 'Hanken Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Spline Sans Mono', Menlo, monospace;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--app-surface);
  color: var(--app-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Small-caps section label */
.smallcaps {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: var(--app-muted);
}

/* Tabular figures for scores/odds so digits don't jitter as they tick. */
.tnum { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* Live pulse dot */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.live-dot { animation: live-pulse 1.4s ease-in-out infinite; }

/* Reduced-motion friendliness */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Thin themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-line) transparent;
}
