/* ============================================================ DESIGN TOKENS — SportsStrata 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(124, 141, 240, 0.32); --border-accent-hov: rgba(124, 141, 240, 0.55); /* ── Text ── */ --text-primary: #eef2f8; --text-secondary: #8fa3c0; --text-muted: #5b7497; --text-subtle: #3d5470; --text-disabled: #253347; /* ── Brand (indigo-violet) ── */ --accent: #7c8df0; --accent-light: #a5b4fc; --accent-dark: #6d28d9; --accent-subtle: rgba(124, 141, 240, 0.10); --accent-border: rgba(124, 141, 240, 0.28); --accent-glow: rgba(124, 141, 240, 0.22); /* ── Semantic ── */ --color-win: #22d3a0; --color-loss: #f26b6b; --color-live: #f5a623; --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 */ /* 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', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* 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; --mobile-nav-h: 58px; --sidebar-w: 280px; --card-min-w: 280px; --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(124,141,240,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, 0.92); --bg-card-hover: rgba(248, 250, 252, 0.98); --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(91, 112, 224, 0.32); --border-accent-hov: rgba(91, 112, 224, 0.58); /* Text */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-subtle: #94a3b8; --text-disabled: #cbd5e1; /* Accent — slightly deeper for light-bg contrast */ --accent: #5b70e0; --accent-light: #818cf8; --accent-dark: #4338ca; --accent-subtle: rgba(91, 112, 224, 0.08); --accent-border: rgba(91, 112, 224, 0.26); --accent-glow: rgba(91, 112, 224, 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); /* 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(91,112,224,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); }