/* ============================================================ DESIGN TOKENS — SportStrata Complete token system. All CSS must use variables from here. Light/dark themes driven by [data-theme] on . ============================================================ */ :root { /* ── Base palette ── */ --bg-base: #060c18; --bg-surface: #0c1629; --bg-raised: #111e38; --bg-card: rgba(12, 22, 41, 0.85); --bg-card-hover: rgba(17, 30, 56, 0.95); --bg-overlay: rgba(6, 12, 24, 0.96); --bg-subtle: rgba(255, 255, 255, 0.028); --bg-interactive: rgba(255, 255, 255, 0.05); --bg-interactive-hov: rgba(255, 255, 255, 0.08); /* ── Borders ── */ --border-default: rgba(255, 255, 255, 0.07); --border-mid: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --border-accent: rgba(255, 129, 0, 0.32); --border-accent-hov: rgba(255, 129, 0, 0.55); /* ── Text ── */ --text-primary: #eef2f8; --text-secondary: #adc3d9; --text-muted: #7fa5c8; --text-subtle: #6d8fb8; /* raised from #556d8f for WCAG AA on --bg-card */ --text-disabled: #2e4260; /* ── Brand (orange-gold) ── */ --accent: #ff8100; --accent-light: #ffd200; --accent-dark: #d96a00; --accent-subtle: rgba(255, 129, 0, 0.10); --accent-border: rgba(255, 129, 0, 0.28); --accent-glow: rgba(255, 129, 0, 0.22); /* ── Semantic ── */ --color-win: #22d3a0; --color-loss: #f26b6b; --color-live: #f59e0b; --shadow-live: 0 0 0 1px rgba(245,158,11,0.45); --color-error: #ef4444; --color-warn: #f59e0b; --color-info: #38bdf8; /* ── Conference ── */ --color-east: #3b82f6; --color-west: #f43f5e; /* ── Stat categories (tuned for dark bg) ── */ --color-pts: #fbbf24; /* Points — amber-gold */ --color-reb: #34d399; /* Rebounds — emerald */ --color-ast: #60a5fa; /* Assists — sky blue */ --color-stl: #c084fc; /* Steals — violet */ --color-blk: #f472b6; /* Blocks — pink */ --color-pct: #fb923c; /* FG% — orange */ --color-min: #7c8df0; /* Minutes — indigo */ --color-tov: #f87171; /* Turnovers — red-light */ /* ── Semantic tints ── Tinted backgrounds and borders derived from semantic colors. Rule: never write raw rgba() variations of semantic colors in component files — use these tokens instead. Component files must not compute opacity. ── */ --color-win-subtle: rgba(34,211,160,0.10); --color-win-border: rgba(34,211,160,0.25); --color-loss-subtle: rgba(242,107,107,0.08); --color-loss-border: rgba(242,107,107,0.25); --color-error-subtle: rgba(239,68,68,0.05); --color-error-border: rgba(239,68,68,0.20); --color-live-subtle: rgba(245,158,11,0.12); --color-live-border: rgba(245,158,11,0.30); /* Stat-category tints: use ONLY on elements labeled with that stat type */ --color-pts-subtle: rgba(251,191,36,0.08); --color-pts-border: rgba(251,191,36,0.22); --color-reb-subtle: rgba(52,211,153,0.08); --color-reb-border: rgba(52,211,153,0.25); /* ── League distinction (AL / NL) ── */ --color-al: #60a5fa; --color-nl: #f87171; --color-al-subtle: rgba(96,165,250,0.15); --color-nl-subtle: rgba(239,68,68,0.12); --color-al-border: rgba(96,165,250,0.30); --color-nl-border: rgba(239,68,68,0.25); /* ── Performance tiers ── For power rankings, scout grades, and any badge that scores performance along an elite→poor axis. Rule: do NOT use stat-category tokens (--color-pts through --color-tov) for performance grading — those tokens mark category, not quality. ── */ --color-tier-elite: #4ade80; --color-tier-good: #34d399; --color-tier-avg: #60a5fa; --color-tier-below: #fbbf24; --color-tier-poor: #f87171; --color-tier-elite-subtle: rgba(74,222,128,0.12); --color-tier-good-subtle: rgba(52,211,153,0.10); --color-tier-avg-subtle: rgba(96,165,250,0.10); --color-tier-below-subtle: rgba(251,191,36,0.10); --color-tier-poor-subtle: rgba(248,113,113,0.10); /* ── Comparison bars ── Rule: in any two-player comparison layout, amber = Player A, emerald = Player B. Categorical — not a quality signal. ── */ --color-cmp-a: rgba(129,140,248,0.35); --color-cmp-b: rgba(52,211,153,0.35); /* ── Text on accent backgrounds (buttons, badges, active states) ── */ --text-on-accent: #0f172a; /* dark text on #ff8100 orange (~7:1) */ /* ── UI state (not stat categories, not semantic status) ── */ --color-fav: #f472b6; /* favorite/heart icon */ --color-fav-subtle: rgba(244,114,182,0.12); --color-fav-border: rgba(244,114,182,0.40); /* ── Scorecard surface ── Paper-physical aesthetic — intentional break from dark-mode surface. Rule: these tokens apply only within .scorecard-* selectors in scorecard.css. ── */ --scorecard-paper: #f5f0e6; --scorecard-ink: #1a1209; --scorecard-border: #c4a882; --scorecard-border-light: #ddd0b8; --scorecard-highlight: #e8a830; --scorecard-run: #d4380d; --scorecard-active-border: rgba(245,158,11,0.90); --scorecard-shadow: 0 4px 24px rgba(0,0,0,0.30), 0 0 0 1px rgba(180,160,130,0.25); /* Back-compat aliases */ --color-bg: var(--bg-base); --color-surface: var(--bg-card); --color-surface-raised: rgba(17, 30, 56, 0.95); --color-surface-subtle: var(--bg-subtle); --color-surface-hover: var(--bg-interactive); --color-border: var(--border-default); --color-border-mid: var(--border-mid); --color-border-hover: var(--border-accent); --color-border-active:var(--border-accent-hov); --color-text-primary: var(--text-primary); --color-text-secondary:var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-subtle: var(--text-subtle); --color-text-disabled:var(--text-disabled); --color-accent: var(--accent); --color-accent-light: var(--accent-light); --color-accent-dark: var(--accent-dark); --color-accent-bg: var(--accent-subtle); --color-accent-border:var(--accent-border); --color-accent-glow: var(--accent-glow); /* ── Spacing ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── Border radius ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 8px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); --shadow-accent: 0 8px 32px var(--accent-glow); --shadow-card: 0 2px 12px rgba(0,0,0,0.35), 0 0 0 1px var(--border-default); --shadow-card-hov:0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--border-accent); /* ── Glassmorphism ── */ --blur-sm: blur(12px); --blur-md: blur(20px); --blur-lg: blur(28px); --blur-xl: blur(40px); /* ── Easing curves ── */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-snap: cubic-bezier(0.25, 0, 0, 1); /* ── Transitions ── */ --transition-fast: 120ms var(--ease-snap); --transition-base: 220ms var(--ease-out); --transition-slow: 380ms var(--ease-out); /* ── Deprecated aliases ── */ --blur-md: blur(20px); /* ── Typography ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Roboto Mono', monospace; --font-display: 'Barlow Semi Condensed', var(--font-sans); /* ── Selection / chip accent (indigo — secondary interactive, distinct from orange nav) ── */ --color-chip: #818cf8; --color-chip-bg: rgba(99,102,241,0.12); --color-chip-border: rgba(99,102,241,0.45); /* Fluid type: clamp(min, preferred, max) */ --text-xs: 0.72rem; /* 11.5px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: clamp(1.75rem, 4vw, 2.25rem); --text-4xl: clamp(2rem, 5vw, 3rem); /* ── Z-index scale ── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Layout ── */ --max-width: 1440px; --content-width: 1200px; --header-height: 60px; --ticker-height: 38px; --header-sub-h: 36px; /* sub-nav row height */ --mobile-nav-h: 58px; --sidebar-w: 280px; --card-min-w: 240px; --card-lb-min-w: 300px; --card-game-min-w:360px; /* ── Team color CSS custom property (set inline per card) ── */ --team-color: #667eea; /* fallback; overridden per element */ --team-color-dim: rgba(102,126,234,0.15); /* ── Chart.js ── */ --chart-grid: rgba(255,255,255,0.05); --chart-tick: #5b7497; --chart-tooltip-bg: rgba(6,12,24,0.97); --chart-tooltip-border: rgba(255,255,255,0.08); /* ── Theme-aware surface tokens (used in place of raw rgba) ── */ /* Skeleton shimmer */ --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.09); --bg-header: rgba(6, 12, 24, 0.96); --bg-waffle-panel: rgba(4, 9, 20, 0.98); --bg-table-head: rgba(6, 12, 24, 0.85); --bg-table-sub: rgba(6, 12, 24, 0.55); --bg-mobile-nav: rgba(6, 12, 24, 0.97); --bg-toast: rgba(6, 12, 24, 0.97); --shadow-header: 0 1px 0 rgba(255,129,0,0.12), 0 4px 24px rgba(0,0,0,0.40); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.50); --shadow-waffle-panel: 0 8px 32px rgba(0,0,0,0.55); } /* ── Light Theme ────────────────────────────────────────────── All overrides use the same CSS custom property names so every component picks up the new values without any code changes. ─────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg-base: #f0f4f9; --bg-surface: #ffffff; --bg-raised: #f8fafc; --bg-card: rgba(255, 255, 255, 1.0); --bg-card-hover: rgba(248, 250, 252, 1.0); --bg-overlay: rgba(248, 250, 252, 0.97); --bg-subtle: rgba(0, 0, 0, 0.025); --bg-interactive: rgba(0, 0, 0, 0.04); --bg-interactive-hov: rgba(0, 0, 0, 0.07); /* Borders */ --border-default: rgba(0, 0, 0, 0.08); --border-mid: rgba(0, 0, 0, 0.13); --border-strong: rgba(0, 0, 0, 0.22); --border-accent: rgba(217, 106, 0, 0.32); --border-accent-hov: rgba(217, 106, 0, 0.58); /* Text */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-subtle: #64748b; /* raised from #94a3b8 — matches --text-muted for AA on white */ --text-disabled: #cbd5e1; /* Text on accent backgrounds — white on #d96a00 clears AA (~4.7:1) */ --text-on-accent: #ffffff; /* Accent — slightly deeper for light-bg contrast */ --accent: #d96a00; --accent-light: #ff8100; --accent-dark: #b35200; --accent-subtle: rgba(217, 106, 0, 0.08); --accent-border: rgba(217, 106, 0, 0.26); --accent-glow: rgba(217, 106, 0, 0.12); /* Shadows (much lighter on white) */ --shadow-sm: 0 1px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06); --shadow-accent: 0 8px 32px var(--accent-glow); --shadow-card: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px var(--border-accent); /* Charts */ --chart-grid: rgba(0, 0, 0, 0.06); --chart-tick: #64748b; --chart-tooltip-bg: rgba(255, 255, 255, 0.98); --chart-tooltip-border: rgba(0, 0, 0, 0.10); /* Semantic tints — light theme (slightly higher opacity for light-bg readability) */ --color-win-subtle: rgba(16,185,129,0.10); --color-win-border: rgba(16,185,129,0.28); --color-loss-subtle: rgba(239,68,68,0.08); --color-loss-border: rgba(239,68,68,0.25); --color-error-subtle: rgba(239,68,68,0.06); --color-error-border: rgba(239,68,68,0.20); --color-live-subtle: rgba(217,119,6,0.10); --color-live-border: rgba(217,119,6,0.28); --color-pts-subtle: rgba(217,119,6,0.08); --color-pts-border: rgba(217,119,6,0.22); --color-reb-subtle: rgba(16,185,129,0.08); --color-reb-border: rgba(16,185,129,0.25); --color-al-subtle: rgba(59,130,246,0.12); --color-nl-subtle: rgba(239,68,68,0.10); --color-al-border: rgba(59,130,246,0.28); --color-nl-border: rgba(239,68,68,0.22); --color-tier-elite-subtle: rgba(74,222,128,0.14); --color-tier-good-subtle: rgba(52,211,153,0.12); --color-tier-avg-subtle: rgba(96,165,250,0.12); --color-tier-below-subtle: rgba(251,191,36,0.12); --color-tier-poor-subtle: rgba(248,113,113,0.12); /* Theme-aware surfaces */ /* Skeleton shimmer */ --skeleton-from: rgba(0,0,0,0.05); --skeleton-mid: rgba(0,0,0,0.11); --bg-header: rgba(255, 255, 255, 0.96); --bg-waffle-panel: rgba(255, 255, 255, 0.98); --bg-table-head: rgba(248, 250, 252, 0.95); --bg-table-sub: rgba(241, 245, 249, 0.70); --bg-mobile-nav: rgba(255, 255, 255, 0.97); --bg-toast: rgba(255, 255, 255, 0.98); --shadow-header: 0 1px 0 rgba(217,106,0,0.10), 0 4px 24px rgba(0,0,0,0.08); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.08); --shadow-waffle-panel: 0 8px 32px rgba(0,0,0,0.10); /* Chip tokens — darker indigo for AA contrast on white (#4f46e5 on #fff = 4.54:1) */ --color-chip: #4f46e5; --color-chip-bg: rgba(79,70,229,0.09); --color-chip-border: rgba(79,70,229,0.38); } /* ── City Connect Themes ────────────────────────────────────── Each theme overrides only the tokens that change from the dark base. All other tokens inherit from :root. ─────────────────────────────────────────────────────────── */ /* Atlanta Braves — "Superstation" powder blue */ [data-theme="cc-braves"] { --bg-base: #080e1a; --bg-surface: #0e1929; --bg-raised: #142038; --bg-card: rgba(14, 25, 41, 0.87); --bg-card-hover: rgba(20, 32, 56, 0.96); --bg-overlay: rgba(8, 14, 26, 0.97); --bg-subtle: rgba(124, 185, 232, 0.04); --bg-interactive: rgba(124, 185, 232, 0.07); --bg-interactive-hov: rgba(124, 185, 232, 0.12); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(124, 185, 232, 0.32); --border-accent-hov: rgba(124, 185, 232, 0.55); --text-primary: #eef4fc; --text-secondary: #a8cce8; --text-muted: #6a9dc0; --text-subtle: #3d6b90; --text-disabled: #1e3d5a; --accent: #7CB9E8; --accent-light: #a8d6f0; --accent-dark: #5a9ad0; --accent-subtle: rgba(124, 185, 232, 0.10); --accent-border: rgba(124, 185, 232, 0.28); --accent-glow: rgba(124, 185, 232, 0.20); --shadow-sm: 0 1px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.38), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.08); --bg-header: rgba(8, 14, 26, 0.96); --bg-waffle-panel: rgba(6, 10, 20, 0.98); --bg-table-head: rgba(8, 14, 26, 0.90); --bg-table-sub: rgba(8, 14, 26, 0.55); --bg-mobile-nav: rgba(8, 14, 26, 0.97); --bg-toast: rgba(8, 14, 26, 0.97); --shadow-header: 0 1px 0 rgba(124,185,232,0.15), 0 4px 24px rgba(0,0,0,0.45); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.55); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.60); } /* Baltimore Orioles — "From the Stoop to the Yard" Camden green / cream */ [data-theme="cc-orioles"] { --bg-base: #050f0a; --bg-surface: #0a1a11; --bg-raised: #0f2218; --bg-card: rgba(10, 26, 17, 0.87); --bg-card-hover: rgba(15, 34, 24, 0.96); --bg-overlay: rgba(5, 15, 10, 0.97); --bg-subtle: rgba(223, 70, 1, 0.04); --bg-interactive: rgba(223, 70, 1, 0.07); --bg-interactive-hov: rgba(223, 70, 1, 0.12); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(223, 70, 1, 0.32); --border-accent-hov: rgba(223, 70, 1, 0.55); --text-primary: #f5f5dc; --text-secondary: #bacabb; --text-muted: #789478; --text-subtle: #3d6645; --text-disabled: #1e3525; --accent: #DF4601; --accent-light: #ff6520; --accent-dark: #b33800; --accent-subtle: rgba(223, 70, 1, 0.10); --accent-border: rgba(223, 70, 1, 0.28); --accent-glow: rgba(223, 70, 1, 0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.38), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.08); --bg-header: rgba(5, 15, 10, 0.96); --bg-waffle-panel: rgba(3, 10, 6, 0.98); --bg-table-head: rgba(5, 15, 10, 0.90); --bg-table-sub: rgba(5, 15, 10, 0.55); --bg-mobile-nav: rgba(5, 15, 10, 0.97); --bg-toast: rgba(5, 15, 10, 0.97); --shadow-header: 0 1px 0 rgba(0,90,60,0.30), 0 4px 24px rgba(0,0,0,0.45); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.55); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.60); } /* Cincinnati Reds — monochromatic crimson */ [data-theme="cc-reds"] { --bg-base: #0e0003; --bg-surface: #1c0007; --bg-raised: #2a000b; --bg-card: rgba(28, 0, 7, 0.87); --bg-card-hover: rgba(42, 0, 11, 0.96); --bg-overlay: rgba(14, 0, 3, 0.97); --bg-subtle: rgba(198, 1, 31, 0.05); --bg-interactive: rgba(198, 1, 31, 0.08); --bg-interactive-hov: rgba(198, 1, 31, 0.14); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(198, 1, 31, 0.40); --border-accent-hov: rgba(198, 1, 31, 0.65); --text-primary: #ffeef0; --text-secondary: #e0a0a8; --text-muted: #a05060; --text-subtle: #5a2030; --text-disabled: #2e0f18; --accent: #E8203A; --accent-light: #ff4560; --accent-dark: #a80018; --accent-subtle: rgba(232, 32, 58, 0.10); --accent-border: rgba(232, 32, 58, 0.32); --accent-glow: rgba(232, 32, 58, 0.25); --shadow-sm: 0 1px 8px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.03); --skeleton-mid: rgba(255,255,255,0.07); --bg-header: rgba(14, 0, 3, 0.97); --bg-waffle-panel: rgba(10, 0, 2, 0.98); --bg-table-head: rgba(14, 0, 3, 0.90); --bg-table-sub: rgba(14, 0, 3, 0.55); --bg-mobile-nav: rgba(14, 0, 3, 0.97); --bg-toast: rgba(14, 0, 3, 0.97); --shadow-header: 0 1px 0 rgba(198,1,31,0.25), 0 4px 24px rgba(0,0,0,0.50); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.60); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.65); } /* Kansas City Royals — "Forever Fountains" 2026 CC Fuchsia-to-royal-blue gradient, purple letter ensemble. Palette: fuchsia #FF00AF, purple #7851A9, royal blue #004687. */ [data-theme="cc-royals"] { --bg-base: #06011a; --bg-surface: #0d0430; --bg-raised: #160848; --bg-card: rgba(13, 4, 48, 0.90); --bg-card-hover: rgba(22, 8, 72, 0.96); --bg-overlay: rgba(6, 1, 26, 0.97); --bg-subtle: rgba(255, 0, 175, 0.05); --bg-interactive: rgba(120, 81, 169, 0.09); --bg-interactive-hov: rgba(120, 81, 169, 0.16); --border-default: rgba(255, 255, 255, 0.07); --border-mid: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --border-accent: rgba(224, 64, 181, 0.40); --border-accent-hov: rgba(224, 64, 181, 0.65); --text-primary: #f0e8fc; --text-secondary: #c8a0e0; --text-muted: #9070c8; --text-subtle: #4a3068; --text-disabled: #201038; --accent: #e040b5; --accent-light: #ff60d0; --accent-dark: #a02080; --accent-subtle: rgba(224, 64, 181, 0.10); --accent-border: rgba(224, 64, 181, 0.32); --accent-glow: rgba(224, 64, 181, 0.28); --shadow-sm: 0 1px 8px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.50), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.70), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.09); --bg-header: rgba(6, 1, 26, 0.97); --bg-waffle-panel: rgba(4, 0, 18, 0.99); --bg-table-head: rgba(6, 1, 26, 0.90); --bg-table-sub: rgba(6, 1, 26, 0.55); --bg-mobile-nav: rgba(6, 1, 26, 0.97); --bg-toast: rgba(6, 1, 26, 0.97); --shadow-header: 0 1px 0 rgba(224,64,181,0.25), 0 4px 24px rgba(0,0,0,0.60); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.65); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.70); } /* Milwaukee Brewers — "Wisco Way" Great Lakes blue / Wild Mango */ [data-theme="cc-brewers"] { --bg-base: #051b28; --bg-surface: #0b2a3e; --bg-raised: #113450; --bg-card: rgba(11, 42, 62, 0.87); --bg-card-hover: rgba(17, 52, 80, 0.96); --bg-overlay: rgba(5, 27, 40, 0.97); --bg-subtle: rgba(255, 122, 0, 0.04); --bg-interactive: rgba(255, 122, 0, 0.07); --bg-interactive-hov: rgba(255, 122, 0, 0.12); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(255, 122, 0, 0.32); --border-accent-hov: rgba(255, 122, 0, 0.55); --text-primary: #eef5f8; --text-secondary: #90c0d5; --text-muted: #4a8aaa; --text-subtle: #245268; --text-disabled: #0e2c3a; --accent: #FF7A00; --accent-light: #ff9a30; --accent-dark: #cc6000; --accent-subtle: rgba(255, 122, 0, 0.10); --accent-border: rgba(255, 122, 0, 0.28); --accent-glow: rgba(255, 122, 0, 0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.58), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.08); --bg-header: rgba(5, 27, 40, 0.96); --bg-waffle-panel: rgba(3, 18, 27, 0.98); --bg-table-head: rgba(5, 27, 40, 0.90); --bg-table-sub: rgba(5, 27, 40, 0.55); --bg-mobile-nav: rgba(5, 27, 40, 0.97); --bg-toast: rgba(5, 27, 40, 0.97); --shadow-header: 0 1px 0 rgba(35,107,142,0.35), 0 4px 24px rgba(0,0,0,0.48); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.58); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.62); } /* Pittsburgh Pirates — "Steel City" matte black / gold */ [data-theme="cc-pirates"] { --bg-base: #0a0907; --bg-surface: #131209; --bg-raised: #1c1a10; --bg-card: rgba(19, 18, 9, 0.87); --bg-card-hover: rgba(28, 26, 16, 0.96); --bg-overlay: rgba(10, 9, 7, 0.97); --bg-subtle: rgba(253, 184, 39, 0.04); --bg-interactive: rgba(253, 184, 39, 0.07); --bg-interactive-hov: rgba(253, 184, 39, 0.12); --border-default: rgba(255, 255, 255, 0.05); --border-mid: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: rgba(253, 184, 39, 0.30); --border-accent-hov: rgba(253, 184, 39, 0.55); --text-primary: #f5f0e5; --text-secondary: #d0b870; --text-muted: #8a7040; --text-subtle: #4a3e18; --text-disabled: #261f0a; --accent: #FDB827; --accent-light: #fdc840; --accent-dark: #cc9200; --accent-subtle: rgba(253, 184, 39, 0.10); --accent-border: rgba(253, 184, 39, 0.28); --accent-glow: rgba(253, 184, 39, 0.20); --shadow-sm: 0 1px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.03); --skeleton-mid: rgba(255,255,255,0.06); --bg-header: rgba(10, 9, 7, 0.97); --bg-waffle-panel: rgba(7, 6, 5, 0.99); --bg-table-head: rgba(10, 9, 7, 0.90); --bg-table-sub: rgba(10, 9, 7, 0.55); --bg-mobile-nav: rgba(10, 9, 7, 0.97); --bg-toast: rgba(10, 9, 7, 0.97); --shadow-header: 0 1px 0 rgba(253,184,39,0.18), 0 4px 24px rgba(0,0,0,0.55); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.65); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.70); } /* San Diego Padres — "Día de los Muertos" obsidian / aqua coast / marigold altar */ [data-theme="cc-padres"] { --bg-base: #0c0e13; --bg-surface: #131620; --bg-raised: #1c1f2a; --bg-card: rgba(19, 22, 32, 0.87); --bg-card-hover: rgba(28, 31, 42, 0.96); --bg-overlay: rgba(12, 14, 19, 0.97); --bg-subtle: rgba(0, 181, 184, 0.04); --bg-interactive: rgba(0, 181, 184, 0.07); --bg-interactive-hov: rgba(0, 181, 184, 0.12); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(0, 181, 184, 0.30); --border-accent-hov: rgba(0, 181, 184, 0.55); --text-primary: #eff0ea; --text-secondary: #88c0c5; --text-muted: #4e7880; --text-subtle: #283e44; --text-disabled: #141e20; --accent: #00B5B8; --accent-light: #00d4d8; --accent-dark: #008a8d; --accent-subtle: rgba(0, 181, 184, 0.10); --accent-border: rgba(0, 181, 184, 0.28); --accent-glow: rgba(0, 181, 184, 0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.08); --bg-header: rgba(12, 14, 19, 0.97); --bg-waffle-panel: rgba(8, 9, 13, 0.98); --bg-table-head: rgba(12, 14, 19, 0.90); --bg-table-sub: rgba(12, 14, 19, 0.55); --bg-mobile-nav: rgba(12, 14, 19, 0.97); --bg-toast: rgba(12, 14, 19, 0.97); --shadow-header: 0 1px 0 rgba(0,181,184,0.20), 0 4px 24px rgba(0,0,0,0.50); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.60); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.65); } /* Texas Rangers — "Tejas" cochineal red / cream */ [data-theme="cc-rangers"] { --bg-base: #0d0203; --bg-surface: #1a0507; --bg-raised: #280809; --bg-card: rgba(26, 5, 7, 0.87); --bg-card-hover: rgba(40, 8, 9, 0.96); --bg-overlay: rgba(13, 2, 3, 0.97); --bg-subtle: rgba(157, 32, 36, 0.06); --bg-interactive: rgba(157, 32, 36, 0.10); --bg-interactive-hov: rgba(157, 32, 36, 0.16); --border-default: rgba(255, 255, 255, 0.05); --border-mid: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: rgba(157, 32, 36, 0.40); --border-accent-hov: rgba(157, 32, 36, 0.65); --text-primary: #f5f5dc; --text-secondary: #d0b888; --text-muted: #8a6040; --text-subtle: #4e2e18; --text-disabled: #2a1508; --accent: #C23035; --accent-light: #e04548; --accent-dark: #8a1e22; --accent-subtle: rgba(194, 48, 53, 0.10); --accent-border: rgba(194, 48, 53, 0.32); --accent-glow: rgba(194, 48, 53, 0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.03); --skeleton-mid: rgba(255,255,255,0.06); --bg-header: rgba(13, 2, 3, 0.97); --bg-waffle-panel: rgba(9, 1, 2, 0.98); --bg-table-head: rgba(13, 2, 3, 0.90); --bg-table-sub: rgba(13, 2, 3, 0.55); --bg-mobile-nav: rgba(13, 2, 3, 0.97); --bg-toast: rgba(13, 2, 3, 0.97); --shadow-header: 0 1px 0 rgba(157,32,36,0.25), 0 4px 24px rgba(0,0,0,0.55); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.65); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.70); } /* ── Fun & Bonus Themes ─────────────────────────────────────── Four bonus themes: independent/minor league and retro. ─────────────────────────────────────────────────────────── */ /* Savannah Bananas — banana yellow floodlights over near-black asphalt */ [data-theme="cc-bananas"] { --bg-base: #0d0c00; --bg-surface: #191600; --bg-raised: #242100; --bg-card: rgba(25, 22, 0, 0.90); --bg-card-hover: rgba(36, 33, 0, 0.97); --bg-overlay: rgba(13, 12, 0, 0.97); --bg-subtle: rgba(255, 224, 51, 0.05); --bg-interactive: rgba(255, 224, 51, 0.09); --bg-interactive-hov: rgba(255, 224, 51, 0.15); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(255, 224, 51, 0.38); --border-accent-hov: rgba(255, 224, 51, 0.62); --text-primary: #faf7e8; --text-secondary: #d4c870; --text-muted: #8a7e30; --text-subtle: #4a4418; --text-disabled: #252010; --accent: #FFE033; --accent-light: #fff066; --accent-dark: #cca800; --accent-subtle: rgba(255, 224, 51, 0.10); --accent-border: rgba(255, 224, 51, 0.30); --accent-glow: rgba(255, 224, 51, 0.25); --shadow-sm: 0 1px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.03); --skeleton-mid: rgba(255,255,255,0.07); --bg-header: rgba(13, 12, 0, 0.97); --bg-waffle-panel: rgba(9, 8, 0, 0.98); --bg-table-head: rgba(13, 12, 0, 0.90); --bg-table-sub: rgba(13, 12, 0, 0.55); --bg-mobile-nav: rgba(13, 12, 0, 0.97); --bg-toast: rgba(13, 12, 0, 0.97); --shadow-header: 0 1px 0 rgba(255,224,51,0.24), 0 4px 24px rgba(0,0,0,0.55); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.65); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.70); } /* Montreal Expos (Retro 1969–2004) — Olympic Stadium nights, tricolor pride */ [data-theme="retro-expos"] { --bg-base: #06091f; --bg-surface: #090f2c; --bg-raised: #0f163a; --bg-card: rgba(9, 15, 44, 0.87); --bg-card-hover: rgba(15, 22, 58, 0.96); --bg-overlay: rgba(4, 7, 30, 0.97); --bg-subtle: rgba(206, 17, 38, 0.05); --bg-interactive: rgba(206, 17, 38, 0.09); --bg-interactive-hov: rgba(206, 17, 38, 0.15); --border-default: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.17); --border-accent: rgba(206, 17, 38, 0.38); --border-accent-hov: rgba(206, 17, 38, 0.62); --text-primary: #f0f4ff; --text-secondary: #96aadc; --text-muted: #4c62a0; --text-subtle: #283268; --text-disabled: #131930; --accent: #CE1126; --accent-light: #e82040; --accent-dark: #a00d1e; --accent-subtle: rgba(206, 17, 38, 0.10); --accent-border: rgba(206, 17, 38, 0.28); --accent-glow: rgba(206, 17, 38, 0.20); --shadow-sm: 0 1px 8px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.04); --skeleton-mid: rgba(255,255,255,0.08); --bg-header: rgba(4, 7, 30, 0.97); --bg-waffle-panel: rgba(2, 5, 20, 0.98); --bg-table-head: rgba(4, 7, 30, 0.90); --bg-table-sub: rgba(4, 7, 30, 0.55); --bg-mobile-nav: rgba(4, 7, 30, 0.97); --bg-toast: rgba(4, 7, 30, 0.97); --shadow-header: 0 1px 0 rgba(0,48,135,0.38), 0 4px 24px rgba(0,0,0,0.50); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.60); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.65); } /* Kansas City Monarchs — Negro Leagues tribute (1920–1965), Muehlebach Field. Royal blue and antique gold: Satchel Paige, Buck O'Neil, the greatest dynasty in Negro Leagues history. Borders tinted warm-parchment (not white) for period feel. */ /* Kansas City Monarchs — classic white & red pinstripe Negro Leagues era Cream-warm dark base, classic red accent, old-school ballpark atmosphere. */ [data-theme="nl-monarchs"] { --bg-base: #0a0204; --bg-surface: #140508; --bg-raised: #1e080c; --bg-card: rgba(20, 5, 8, 0.90); --bg-card-hover: rgba(30, 8, 12, 0.96); --bg-overlay: rgba(10, 2, 4, 0.97); --bg-subtle: rgba(180, 20, 36, 0.05); --bg-interactive: rgba(180, 20, 36, 0.09); --bg-interactive-hov: rgba(180, 20, 36, 0.16); --border-default: rgba(245, 230, 210, 0.07); --border-mid: rgba(245, 230, 210, 0.12); --border-strong: rgba(245, 230, 210, 0.20); --border-accent: rgba(180, 20, 36, 0.38); --border-accent-hov: rgba(180, 20, 36, 0.62); --text-primary: #f5ece0; --text-secondary: #d4a898; --text-muted: #8a5048; --text-subtle: #4a2828; --text-disabled: #241212; --accent: #B41428; --accent-light: #d41830; --accent-dark: #8a0e1e; --accent-subtle: rgba(180, 20, 36, 0.10); --accent-border: rgba(180, 20, 36, 0.30); --accent-glow: rgba(180, 20, 36, 0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(245,230,210,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,230,210,0.05); --shadow-lg: 0 8px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(245,230,210,0.06); --shadow-card: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(245,230,210,0.03); --skeleton-mid: rgba(245,230,210,0.08); --bg-header: rgba(10, 2, 4, 0.97); --bg-waffle-panel: rgba(7, 1, 3, 0.99); --bg-table-head: rgba(10, 2, 4, 0.90); --bg-table-sub: rgba(10, 2, 4, 0.55); --bg-mobile-nav: rgba(10, 2, 4, 0.97); --bg-toast: rgba(10, 2, 4, 0.97); --shadow-header: 0 1px 0 rgba(180,20,36,0.22), 0 4px 24px rgba(0,0,0,0.55); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.65); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.70); } /* Rocket City Trash Pandas — deep space navy, rocket-engine orange, cold void above */ [data-theme="aa-trash-pandas"] { --bg-base: #02030e; --bg-surface: #05081e; --bg-raised: #0b1030; --bg-card: rgba(5, 8, 30, 0.88); --bg-card-hover: rgba(11, 16, 48, 0.96); --bg-overlay: rgba(2, 3, 14, 0.97); --bg-subtle: rgba(232, 104, 48, 0.04); --bg-interactive: rgba(232, 104, 48, 0.08); --bg-interactive-hov: rgba(232, 104, 48, 0.14); --border-default: rgba(255, 255, 255, 0.05); --border-mid: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.15); --border-accent: rgba(232, 104, 48, 0.38); --border-accent-hov: rgba(232, 104, 48, 0.62); --text-primary: #e8eef5; --text-secondary: #88a0c0; --text-muted: #486078; --text-subtle: #253545; --text-disabled: #121a22; --accent: #E86830; --accent-light: #ff8040; --accent-dark: #b84c18; --accent-subtle: rgba(232, 104, 48, 0.10); --accent-border: rgba(232, 104, 48, 0.28); --accent-glow: rgba(232, 104, 48, 0.24); /* Accent-tinted shadows — black-on-void is invisible on #02030e; engine-exhaust glow restores depth */ --shadow-sm: 0 1px 8px rgba(232,104,48,0.15), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 20px rgba(232,104,48,0.18), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 40px rgba(232,104,48,0.22), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 2px 12px rgba(232,104,48,0.12), 0 0 0 1px var(--border-default); --shadow-card-hov: 0 8px 32px rgba(232,104,48,0.20), 0 0 0 1px var(--border-accent); --skeleton-from: rgba(255,255,255,0.02); --skeleton-mid: rgba(255,255,255,0.06); --bg-header: rgba(2, 3, 14, 0.98); --bg-waffle-panel: rgba(1, 2, 10, 0.99); --bg-table-head: rgba(2, 3, 14, 0.92); --bg-table-sub: rgba(2, 3, 14, 0.55); --bg-mobile-nav: rgba(2, 3, 14, 0.98); --bg-toast: rgba(2, 3, 14, 0.98); --shadow-header: 0 1px 0 rgba(232,104,48,0.22), 0 4px 24px rgba(0,0,0,0.64); --shadow-mobile-nav: 0 -4px 24px rgba(0,0,0,0.78); --shadow-waffle-panel:0 8px 32px rgba(0,0,0,0.80); }