/* Color tokens: edit values here to re-theme the whole site. */
:root {
  /* ── Neutrals ───────────────────────────────── */
  --palette-white: #ffffff;
  --palette-gray-050: #f8f9fa;
  --palette-gray-200: #dddddd;
  --palette-gray-300: #aaaaaa;
  --palette-gray-400: #999999;
  --palette-gray-600: #555555;
  --palette-gray-800: #333333;

  /* ── Brand core (purple / cream) ────────────── */
  --palette-purple-900: #1b0b2b;
  --palette-purple-800: #2a1450;
  --palette-purple-700: #432080;
  --palette-purple-400: #9884b9;
  --palette-purple-100: #e3ddec;
  --palette-purple-050: #f6f4f9;
  --palette-navy-650: #2a4a6a;
  --palette-cream-100: #e8dcc6;
  --palette-cream-050: #f5f3ef;

  /* ── Gold / amber accents ───────────────────── */
  --palette-gold-400: #d5aa68;
  --palette-gold-700: #cda461;
  --palette-gold-bright: #ffd700;
  --palette-gold-bright-end: #ffb000;
  --palette-amber-700: #ff8f00;
  --palette-amber-600: #d97706;
  --palette-amber-400: #f59e0b;
  --palette-amber-950: #7a4800;

  /* ── Cyan (bg-selected) ──────────────── */
  --palette-cyan-150: #dbf3f7;

  /* ── Red / danger ───────────────────────────── */
  --palette-red-100: #ffebee;
  --palette-red-200: #ffcdd2;
  --palette-red-300: #ff8a80;
  --palette-red-400: #ff6b6b;
  --palette-red-600: #e53935;
  --palette-red-700: #b71c1c;
  --palette-red-900: #5c1a1a;

  /* ── Green / success ────────────────────────── */
  --palette-green-100: #e8f5e9;
  --palette-green-200: #c8e6c9;
  --palette-green-300: #6ddc6d;
  --palette-green-400: #66bb6a;
  --palette-green-700: #1b5e20;
  --palette-green-950: #1a3a1a;

  /* ── Blue / info ────────────────────────────── */
  --palette-blue-100: #e3f2fd;
  --palette-blue-200: #90caf9;
  --palette-blue-300: #82b1ff;
  --palette-blue-700: #1565c0;

  /* ── Orange / warning ───────────────────────── */
  --palette-orange-050: #fff8f0;
  --palette-orange-100: #fff3e0;
  --palette-orange-200: #ffcc80;
  --palette-orange-700: #e65100;

  /* ── Dark-mode fallback (admin.html body.dark) ─ */
  --palette-dark-text: #f0f0f0;
  --palette-dark-border: #444444;
  --palette-dark-surface: #2a2a2a;
  --palette-dark-muted: #888888;

  /* ════════ Semantic tokens (used in CSS/HTML/JS) ════════ */

  /* Surfaces & text */
  --color-bg-page: var(--palette-cream-100);
  --color-bg-surface-dark: var(--palette-purple-900);
  --color-bg-subtle: var(--palette-purple-050);
  --color-bg-neutral: var(--palette-gray-050);
  --color-bg-deep: var(--palette-purple-900);
  --color-bg-readonly: var(--palette-purple-050);
  --color-bg-selected: var(--palette-cyan-150);
  --color-text-primary: var(--palette-purple-700);
  --color-text-on-dark: var(--palette-cream-050);
  --color-text-muted: var(--palette-gray-400);
  --color-text-secondary: var(--palette-gray-600);
  --color-text-strong: var(--palette-gray-800);
  --color-text-faint: var(--palette-gray-300);
  --color-text-heading: var(--palette-purple-700);
  --color-text-subtle: var(--palette-purple-400);
  --color-text-placeholder: var(--palette-purple-400);
  --color-label: var(--palette-purple-700);

  /* Borders */
  --color-border: var(--palette-purple-100);
  --color-border-subtle: var(--palette-purple-100);
  --color-border-hover: var(--palette-gold-400);
  --color-border-neutral: var(--palette-gray-200);
  --color-border-muted: var(--palette-purple-100);
  --color-border-card: var(--palette-purple-100);
  --color-border-divider: var(--palette-purple-100);
  --color-border-dark-mode: var(--palette-navy-650);
  --color-border-on-dark: rgba(255, 255, 255, 0.15);
  --color-border-translucent: rgba(227, 221, 236, 0.4);

  /* Brand / primary actions */
  --color-primary: var(--palette-purple-700);
  --color-primary-hover: var(--palette-purple-800);
  --color-primary-muted: var(--palette-purple-400);
  --color-primary-dark-hover: var(--palette-purple-800);
  --color-focus-ring: var(--palette-gold-400);
  --color-focus-ring-glow: rgba(213, 170, 104, 0.2);
  --color-accent: var(--palette-gold-400);
  --color-accent-muted: var(--palette-gold-700);

  /* State colors */
  --color-danger: var(--palette-red-700);
  --color-danger-bg: var(--palette-red-100);
  --color-danger-border: var(--palette-red-200);
  --color-danger-accent: var(--palette-red-300);
  --color-success: var(--palette-green-700);
  --color-success-bg: var(--palette-green-100);
  --color-success-border: var(--palette-green-200);
  --color-success-accent: var(--palette-green-400);
  --color-info: var(--palette-blue-700);
  --color-info-bg: var(--palette-blue-100);
  --color-info-border: var(--palette-blue-200);
  --color-info-accent: var(--palette-blue-300);
  --color-warning: var(--palette-orange-700);
  --color-warning-bg: var(--palette-orange-100);
  --color-warning-bg-subtle: var(--palette-orange-050);
  --color-warning-border: var(--palette-orange-200);

  /* Overlays */
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-faint: rgba(255, 255, 255, 0.12);
  --color-overlay-strong: rgba(255, 255, 255, 0.85);
  --color-overlay-dark: rgba(15, 30, 55, 0.6);
  --color-text-on-dark-subtle: rgba(255, 255, 255, 0.35);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.65);
  --color-team-divider: rgba(233, 236, 239, 0.3);

  /* Badges / champion / score feedback */
  --color-badge-gradient-start: var(--palette-amber-400);
  --color-badge-gradient-end: var(--palette-amber-600);
  --color-champion-start: var(--palette-gold-bright);
  --color-champion-end: var(--palette-gold-bright-end);
  --color-champion-border: var(--palette-amber-700);
  --color-score-bust-bg: var(--palette-red-900);
  --color-score-bust-accent: var(--palette-red-400);
  --color-score-high-bg: var(--palette-green-950);
  --color-score-high-text: var(--palette-green-300);
  --color-score-180-bg: var(--palette-amber-950);

  /* TV mode (live-games fullscreen overlay) */
  --color-tv-bg-header: var(--color-bg-surface-dark);
  --color-tv-bg-overlay: var(--color-bg-deep);
  --color-tv-bg-card: var(--color-primary-dark-hover);
  --color-tv-bg-header-row: var(--color-primary);
  --color-tv-text-bright: var(--color-text-on-dark);
  --color-tv-text-dim: var(--color-border);
  --color-tv-live-dot: var(--palette-red-600);

  /* Shadows */
  --shadow-primary-sm: rgba(67, 32, 128, 0.08);
  --shadow-primary-md: rgba(67, 32, 128, 0.15);
  --shadow-primary-lg: rgba(67, 32, 128, 0.25);
  --shadow-dark-sm: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-dark-lg: rgba(0, 0, 0, 0.3);
  --shadow-surface-dark: rgba(27, 11, 43, 0.12);
  --shadow-champion: rgba(255, 215, 0, 0.3);
  --shadow-success: rgba(20, 100, 50, 0.3);
  --shadow-border-dark: rgba(42, 74, 106, 0.5);
}

/* AUTO-GENERATED THEME BLOCKS START (do not edit by hand — edit scripts/themes.mjs) */
:root[data-theme="navy"] {
  /* Navy Blue */
  --color-bg-page: #eef3f8;
  --color-bg-surface-dark: #0d2a45;
  --color-text-primary: #1e3a5f;
  --color-text-on-dark: #f5f3ef;
  --color-accent: #61b4dc;
  --color-accent-muted: #4a9fc8;
  --color-primary: #1e3a5f;
  --color-primary-hover: #2c5070;
  --color-primary-muted: #5b8db8;
  --color-primary-dark-hover: #16304f;
  --color-focus-ring: #61b4dc;
  --color-focus-ring-glow: rgba(97, 180, 220, 0.2);
  --color-border: #b3e5fc;
  --color-border-subtle: #e1f5fe;
  --color-border-hover: #81d4fa;
  --color-border-muted: #b0c4d8;
  --color-border-card: #d0dce8;
  --color-border-divider: #e0eaf4;
  --color-border-translucent: rgba(179, 229, 252, 0.4);
  --color-bg-subtle: #f0fbff;
  --color-bg-deep: #0d2a45;
  --color-bg-readonly: #f4f8fc;
  --color-text-heading: #37474f;
  --color-text-subtle: #5a7a9a;
  --color-text-placeholder: #8aa0b8;
  --color-label: #2c4a6e;
  --shadow-primary-sm: rgba(30, 58, 95, 0.08);
  --shadow-primary-md: rgba(30, 58, 95, 0.15);
  --shadow-primary-lg: rgba(30, 58, 95, 0.25);
  --shadow-surface-dark: rgba(13, 42, 69, 0.12);
}

:root[data-theme="monochrome"] {
  /* Black & White */
  --color-bg-page: #f2f2f2;
  --color-bg-surface-dark: #111111;
  --color-text-primary: #1a1a1a;
  --color-text-on-dark: #f5f5f5;
  --color-accent: #cfcfcf;
  --color-accent-muted: #b5b5b5;
  --color-primary: #1a1a1a;
  --color-primary-hover: #333333;
  --color-primary-muted: #808080;
  --color-primary-dark-hover: #000000;
  --color-focus-ring: #666666;
  --color-focus-ring-glow: rgba(102, 102, 102, 0.2);
  --color-border: #d5d5d5;
  --color-border-subtle: #e0e0e0;
  --color-border-hover: #999999;
  --color-border-muted: #cccccc;
  --color-border-card: #d5d5d5;
  --color-border-divider: #e0e0e0;
  --color-border-translucent: rgba(213, 213, 213, 0.4);
  --color-bg-subtle: #f5f5f5;
  --color-bg-deep: #111111;
  --color-bg-readonly: #ececec;
  --color-text-heading: #1a1a1a;
  --color-text-subtle: #666666;
  --color-text-placeholder: #999999;
  --color-label: #333333;
  --shadow-primary-sm: rgba(0, 0, 0, 0.08);
  --shadow-primary-md: rgba(0, 0, 0, 0.15);
  --shadow-primary-lg: rgba(0, 0, 0, 0.25);
  --shadow-surface-dark: rgba(17, 17, 17, 0.12);
}

:root[data-theme="royal"] {
  /* Royal Green & Gold */
  --color-bg-page: #efe6cf;
  --color-bg-surface-dark: #0b2e1d;
  --color-text-primary: #1f4d2e;
  --color-text-on-dark: #f5f1e0;
  --color-accent: #d4af37;
  --color-accent-muted: #b8962e;
  --color-primary: #1f4d2e;
  --color-primary-hover: #163a22;
  --color-primary-muted: #4f8562;
  --color-primary-dark-hover: #0f2a19;
  --color-focus-ring: #d4af37;
  --color-focus-ring-glow: rgba(212, 175, 55, 0.2);
  --color-border: #d7e4da;
  --color-border-subtle: #e3ede6;
  --color-border-hover: #d4af37;
  --color-border-muted: #cfe0d2;
  --color-border-card: #d7e4da;
  --color-border-divider: #e3ede6;
  --color-border-translucent: rgba(215, 228, 218, 0.4);
  --color-bg-subtle: #eef5f0;
  --color-bg-deep: #0b2e1d;
  --color-bg-readonly: #eef5f0;
  --color-text-heading: #1f4d2e;
  --color-text-subtle: #4f8562;
  --color-text-placeholder: #7da98c;
  --color-label: #1f4d2e;
  --shadow-primary-sm: rgba(31, 77, 46, 0.08);
  --shadow-primary-md: rgba(31, 77, 46, 0.15);
  --shadow-primary-lg: rgba(31, 77, 46, 0.25);
  --shadow-surface-dark: rgba(11, 46, 29, 0.12);
}
/* AUTO-GENERATED THEME BLOCKS END */