/* SCOUTSWING Design Tokens — Visual identity for the public dashboard. Public dashboard (stats.scoutswing.com) uses these tokens. Private dashboard uses tokens.css (STATSWING identity). Dual-mode: dark (default) + cream (toggle). Theme stored in localStorage. Use data-theme attribute on to switch: [data-theme="cream"] or [data-theme="dark"]. Default (:root) matches cream mode for progressive enhancement (no-JS fallback). */ /* === Cream Mode === */ :root, [data-theme="cream"] { /* ── Backgrounds ── */ --bg-base: #F5F3E8; --bg-surface: #FAFAF5; --bg-surface-hover: #F0EDE0; --bg-surface-active: #E8E5D6; /* ── Text ── */ --text-primary: #1B2A4A; --text-secondary: #4A5568; --text-muted: #7A8599; /* ── Accent (SCOUTSWING Blue) ── */ --accent: #0E5A8A; --accent-hover: #0B476C; --accent-muted: #4A6B80; --accent-bg: rgba(14, 90, 138, 0.08); --link: #0E5A8A; /* ── Status / Priority ── */ --status-critical: #9B2335; --status-high: #8B6914; --status-medium: #1B2A4A; --status-low: #7A8599; --status-new: #1565C0; --status-actioned: #4A6B80; --status-dismissed: #7A8599; /* ── Data colors (semantic — light mode) ── */ --data-positive: #1565C0; --data-negative: #9B2335; --data-caution: #B5843A; --data-neutral: #7A8599; /* ── Percentile bar scale (5-band: red/gold/slate/steel/blue) ── */ --pct-90: #0E5A8A; --pct-75: #4A6B80; --pct-50: #7A8599; --pct-30: #B5843A; --pct-low: #9B2335; /* ── Typography ── */ --font-heading: 'League Spartan', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; /* ── Spacing ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; /* ── Layout ── */ --sidebar-width: 220px; --sidebar-collapsed: 56px; --topbar-height: 48px; --row-height: 34px; --border-radius: 4px; --border-color: rgba(27, 42, 74, 0.14); /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /* === Dark Mode (Toggle) === */ [data-theme="dark"] { /* ── Backgrounds ── */ --bg-base: #0d1117; --bg-surface: #161b22; --bg-surface-hover: #1c2129; --bg-surface-active: #242a33; /* ── Text ── */ --text-primary: #e6edf3; --text-secondary: #7d8590; --text-muted: #484f58; /* ── Accent (SCOUTSWING Blue) ── */ --accent: #5AABDB; --accent-hover: #7BC0E7; --accent-muted: #4A6B80; --accent-bg: rgba(90, 171, 219, 0.12); --link: #7BC0E7; /* ── Status / Priority ── */ --status-critical: #f85149; --status-high: #d29922; --status-medium: #e6edf3; --status-low: #484f58; --status-new: #58a6ff; --status-actioned: #3fb950; --status-dismissed: #484f58; /* ── Data colors (semantic — dark mode) ── */ --data-positive: #5AABDB; --data-negative: #E86B63; --data-caution: #D4B87A; --data-neutral: #7A8599; /* ── Percentile bar scale (5-band: red/gold/slate/steel/blue) ── */ --pct-90: #5AABDB; --pct-75: #8BA3C7; --pct-50: #7A8599; --pct-30: #D4B87A; --pct-low: #E86B63; /* ── Layout overrides ── */ --border-color: #1c2129; } /* Alpine.js cloak — must be in first CSS file to prevent FOUC */ [x-cloak] { display: none !important; }