/* ============================================================================ SplitLab Design System — "Lab Slate" (see design/SYSTEM.md) Single source of truth for design tokens, light AND dark. Loaded LAST so it consolidates the drifted per-file tokens: the new semantic roles are defined here, and every legacy token name is re-pointed at them as a live `var()` alias — so the existing CSS (3.9k lines) adapts to the system and to dark mode without rewriting each rule. Only hardcoded hex values (and d3-inlined chart chrome) still need hand-migration. Type scale, spacing, weights, chip/discipline/medal tokens are left to their original files (unchanged by the redesign). ============================================================================ */ :root { color-scheme: light; /* ── Semantic surfaces ───────────────────────────────────────────────── */ --bg-app: #f8fafc; --surface: #ffffff; --surface-raised: #ffffff; /* tooltips, dropdowns, popovers, sticky bars */ --surface-sunken: #fafbfc; /* recessed panels inside cards */ --surface-hover: #f1f5f9; --surface-tint: #eef2f6; /* zebra, muted chips, rank-badge bg */ /* Always-dark chrome (hero toolbars, dark tooltips): NOT re-defined in dark, so it stays dark in both themes. Pair with white/near-white text. */ --surface-inverse: #1e293b; --on-surface-inverse: #f8fafc; /* Always-white tile behind NCAA team logos: most logos are authored on a solid white background, so they need a white backing in BOTH themes to sit cleanly on coloured rows / selection tints / dark mode. NOT re-defined in dark. The ring is a translucent hairline so it reads on light backgrounds and disappears against dark ones (where the white tile already contrasts). */ --logo-tile: #ffffff; --logo-tile-ring: rgba(15, 23, 42, .12); /* ── Borders ─────────────────────────────────────────────────────────── */ --border: #e2e8f0; --border-soft: #eef2f6; --border-strong: #cbd5e1; /* ── Text ────────────────────────────────────────────────────────────── */ --text: #0f172a; --text-2: #334155; --text-muted: #64748b; --text-faint: #94a3b8; /* ── Accent (one brand: indigo) ──────────────────────────────────────── */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-ink: #4f46e5; /* accent-colored TEXT/links on a surface */ --accent-subtle: rgba(79, 70, 229, .08); --on-accent: #ffffff; /* ── State ───────────────────────────────────────────────────────────── */ --success: #047857; --success-bg: #ecfdf5; --danger: #dc2626; --danger-bg: #fee2e2; --warning: #b45309; --warning-bg: #fffbeb; --focus-ring: rgba(79, 70, 229, .30); /* ── Soft status badges (one canonical tint per hue; adapts to dark) ────── Replaces a scatter of one-off pastel hexes on rank/position/ability/T100 pills so they share a look and don't glare on dark. */ --badge-green-bg: rgba(16, 185, 129, .12); --badge-green-ink: #047857; --badge-amber-bg: rgba(245, 158, 11, .15); --badge-amber-ink: #b45309; --badge-red-bg: rgba(239, 68, 68, .12); --badge-red-ink: #b91c1c; --badge-blue-bg: rgba(59, 130, 246, .12); --badge-blue-ink: #1d4ed8; --badge-violet-bg: rgba(139, 92, 246, .12); --badge-violet-ink: #6d28d9; --badge-cyan-bg: rgba(6, 182, 212, .12); --badge-cyan-ink: #0e7490; --badge-neutral-bg: rgba(100, 116, 139, .14); --badge-neutral-ink: #475569; /* ── Heat cells (race-history place grids; the number sits ON the fill) ── Two scales: finish POSITION (medals + blue depth) and PLACE-IN-FIELD percentile (green→red). Dark-mode values are selected tints over the dark surface, not flips of these — light pastels glare there and the light ink vanishes on them. */ --heat-gold-bg: #FFD700; --heat-gold-ink: #1e293b; --heat-silver-bg: #C0C0C0; --heat-silver-ink: #1e293b; --heat-bronze-bg: #CD7F32; --heat-bronze-ink: #1e293b; --heat-blue-2-bg: #bfdbfe; --heat-blue-2-ink: #1e293b; --heat-blue-1-bg: #dbeafe; --heat-blue-1-ink: #1e293b; --heat-blue-0-bg: #eff6ff; --heat-blue-0-ink: #334155; --heat-pct-0-bg: #15803d; --heat-pct-0-ink: #ffffff; --heat-pct-1-bg: #22c55e; --heat-pct-1-ink: #1e293b; --heat-pct-2-bg: #86efac; --heat-pct-2-ink: #1e293b; --heat-pct-3-bg: #fde68a; --heat-pct-3-ink: #1e293b; --heat-pct-4-bg: #fdba74; --heat-pct-4-ink: #1e293b; --heat-pct-5-bg: #fecaca; --heat-pct-5-ink: #1e293b; /* ── Chart chrome (frames only; series/discipline colors untouched) ───── */ --major-accent: #f59e0b; /* major-championship / Grand-Final marker (rings, win cells, FINAL tags) */ --chart-axis: #94a3b8; /* tick text */ --chart-axis-line: #e2e8f0; /* tick marks / axis rules */ --chart-grid: #f1f5f9; /* gridlines */ --chart-label: #64748b; /* axis titles, in-SVG captions */ --chart-halo: #ffffff; /* label halos, dot outlines, "white" strokes */ --chart-ref: #cbd5e1; /* neutral reference lines (VS midline, medians) */ --data-line-op: 0.5; /* unselected athlete-line opacity (boosted in dark) */ /* ── Radii (consolidated) ────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* cards, sections, chart frames */ --radius-xl: 14px; /* modals, page shell */ --radius-pill: 999px; /* ── Elevation (borders first; shadows mean "floats") ────────────────── */ --shadow-1: 0 1px 2px rgba(2, 6, 23, .06); --shadow-2: 0 4px 12px rgba(2, 6, 23, .10); --shadow-3: 0 12px 32px rgba(2, 6, 23, .16); /* ── Legacy aliases → new roles (live refs; adapt to dark automatically) ─ */ --background: var(--bg-app); --background-light: var(--surface-tint); --bg-surface: var(--surface); --bg-soft: var(--surface-sunken); --bg-hover: var(--surface-hover); --bg-tint: var(--surface-tint); --border-color: var(--border); --line: var(--border); --line-soft: var(--border-soft); --line-base: var(--border); --line-strong: var(--border-strong); --foreground: var(--text); --muted-foreground: var(--text-muted); --ink-1: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-2); --ink-4: var(--text-muted); --ink-5: var(--text-muted); --ink-6: var(--text-faint); --ink-7: var(--border-strong); --primary-color: var(--accent); --primary-dark: var(--accent-hover); --primary-darker: var(--accent-hover); --primary-subtle: var(--accent-subtle); --indigo-fg: var(--accent-ink); --indigo-bg: var(--accent-subtle); --indigo-bg-hover: var(--accent-subtle); --indigo-border: var(--accent); --amber-fg: var(--warning); --amber-strong: var(--warning); --amber-bg: var(--warning-bg); --amber-bg-hover: var(--warning-bg); --amber-border: var(--warning); --success-color: var(--success); --danger-color: var(--danger); --warning-color: var(--warning); --axis-color: var(--chart-axis-line); --grid-color: var(--chart-grid); --label-color: var(--chart-label); --shadow-card: none; --border-radius: var(--radius-lg); --border-radius-lg: var(--radius-xl); } /* ── Dark theme ────────────────────────────────────────────────────────── data-theme is resolved to "light" | "dark" by the FOUC-free head script (auto → the OS preference, kept live via a matchMedia listener), so only the semantic roles need dark values here; every alias above follows. ──── */ :root[data-theme="dark"] { color-scheme: dark; --bg-app: #0b1220; --surface: #131c2e; --surface-raised: #1b2740; --surface-sunken: #0e1626; --surface-hover: #1a2539; --surface-tint: #162135; --border: #243349; --border-soft: #1c2940; --border-strong: #33445f; --text: #e8edf6; --text-2: #c3cee0; --text-muted: #8ea0b8; --text-faint: #5d7089; --accent: #6366f1; --accent-hover: #818cf8; --accent-ink: #a5b4fc; --accent-subtle: rgba(99, 102, 241, .16); --on-accent: #ffffff; --success: #34d399; --success-bg: rgba(52, 211, 153, .12); --danger: #f87171; --danger-bg: rgba(248, 113, 113, .12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, .12); --focus-ring: rgba(129, 140, 248, .40); --badge-green-bg: rgba(16, 185, 129, .18); --badge-green-ink: #6ee7b7; --badge-amber-bg: rgba(245, 158, 11, .18); --badge-amber-ink: #fcd34d; --badge-red-bg: rgba(239, 68, 68, .20); --badge-red-ink: #fca5a5; --badge-blue-bg: rgba(59, 130, 246, .20); --badge-blue-ink: #93c5fd; --badge-violet-bg: rgba(139, 92, 246, .20); --badge-violet-ink: #c4b5fd; --badge-cyan-bg: rgba(34, 211, 238, .16); --badge-cyan-ink: #67e8f9; --badge-neutral-bg: rgba(148, 163, 184, .18); --badge-neutral-ink: #cbd5e1; /* Heat cells — same-hue tints selected for the dark surface (ink:bg ≥ 6:1, checked over --surface). Faintest tiers stay deliberately recessive. */ --heat-gold-bg: rgba(250, 204, 21, .25); --heat-gold-ink: #fcd34d; --heat-silver-bg: rgba(203, 213, 225, .22); --heat-silver-ink: #e2e8f0; --heat-bronze-bg: rgba(205, 127, 50, .30); --heat-bronze-ink: #fdba74; --heat-blue-2-bg: rgba(96, 165, 250, .32); --heat-blue-2-ink: #dbeafe; --heat-blue-1-bg: rgba(96, 165, 250, .18); --heat-blue-1-ink: #bfdbfe; --heat-blue-0-bg: rgba(96, 165, 250, .09); --heat-blue-0-ink: #93c5fd; --heat-pct-0-bg: #15803d; --heat-pct-0-ink: #ffffff; --heat-pct-1-bg: rgba(34, 197, 94, .42); --heat-pct-1-ink: #dcfce7; --heat-pct-2-bg: rgba(34, 197, 94, .20); --heat-pct-2-ink: #86efac; --heat-pct-3-bg: rgba(250, 204, 21, .18); --heat-pct-3-ink: #fde047; --heat-pct-4-bg: rgba(249, 115, 22, .20); --heat-pct-4-ink: #fdba74; --heat-pct-5-bg: rgba(239, 68, 68, .18); --heat-pct-5-ink: #fca5a5; --chart-axis: #7c90ac; /* tick text — clearly readable */ --chart-axis-line: #3a5279; /* axis rules / transitions — a clear step above grid */ --chart-grid: #182339; /* gridlines — the faintest layer */ --chart-label: #93a5be; --chart-halo: #131c2e; --chart-ref: #33445f; --data-line-op: 0.8; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 4px 14px rgba(0, 0, 0, .5); --shadow-3: 0 12px 36px rgba(0, 0, 0, .6); }