/* ══════════════════════════════════════════════════════════════════════════ SOL THEME — CSS custom property system for Dark / Light / Auto modes ══════════════════════════════════════════════════════════════════════════ Applied by assets/sol-theme.js which: 1. Reads sol_theme from localStorage (instant no-flash load) 2. Syncs with DB preference via /api/me (on auth pages) 3. Writes data-theme="dark|light" on Dark = default · gold-on-navy SOL brand Light = white-with-navy-text, gold accents preserved Auto = follows OS prefers-color-scheme Usage in HTML/CSS: color: var(--sol-text-primary); background: var(--sol-bg-primary); ══════════════════════════════════════════════════════════════════════════ */ /* ── DARK (default) ─────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --sol-bg-primary: #12162B; --sol-bg-secondary: #1A1A2E; --sol-bg-tertiary: #1A1F3A; --sol-bg-card: #0D0F1A; --sol-bg-hover: rgba(255,255,255,0.03); --sol-text-primary: #F5EDD6; --sol-text-secondary: rgba(245,237,214,0.65); --sol-text-muted: rgba(245,237,214,0.35); --sol-text-inverse: #12162B; --sol-accent-gold: #C9A84C; --sol-accent-gold-bright:#E8C840; --sol-accent-gold-dim: rgba(201,168,76,0.35); --sol-accent-green: #22C55E; --sol-accent-red: #E07A5F; --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(245,237,214,0.12); --sol-border-accent: #C9A84C; --sol-border-strong: rgba(245,237,214,0.3); --sol-input-bg: #12162B; --sol-input-border: rgba(245,237,214,0.2); --sol-input-text: #F5EDD6; --sol-input-placeholder: rgba(245,237,214,0.35); --sol-input-focus: #1155CC; --sol-shadow: 0 4px 24px rgba(0,0,0,0.5); --sol-shadow-sm: 0 1px 6px rgba(0,0,0,0.4); /* Status colours (same in both modes — semantic, not theme-dependent) */ --sol-hit: #22C55E; --sol-miss: #D4A84C; --sol-adjust: #4A90E2; } /* ── LIGHT ──────────────────────────────────────────────────────────────── */ /* Cool grey page background — cards float as white surfaces above it. More visual hierarchy than pure white-on-white. */ [data-theme="light"] { --sol-bg-primary: #EEF0F7; /* cool grey page bg — cards pop above */ --sol-bg-secondary: #E2E5F0; /* secondary sections */ --sol-bg-tertiary: #D5D9EA; /* deepest tint / alt rows */ --sol-bg-card: #FFFFFF; /* card surfaces — pure white on grey bg */ --sol-bg-hover: rgba(26,26,80,0.05); --sol-text-primary: #111827; /* near-black with slight blue tint */ --sol-text-secondary: rgba(17,24,39,0.6); --sol-text-muted: rgba(17,24,39,0.38); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #9A7010; /* deeper gold — readable on white */ --sol-accent-gold-bright:#B8941E; --sol-accent-gold-dim: rgba(154,112,16,0.18); --sol-accent-green: #15803D; --sol-accent-red: #B91C1C; --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(17,24,39,0.14); /* more visible than before */ --sol-border-accent: #9A7010; --sol-border-strong: rgba(17,24,39,0.32); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(17,24,39,0.22); --sol-input-text: #111827; --sol-input-placeholder: rgba(17,24,39,0.38); --sol-input-focus: #1155CC; --sol-shadow: 0 2px 12px rgba(17,24,39,0.12); --sol-shadow-sm: 0 1px 4px rgba(17,24,39,0.1); --sol-hit: #15803D; --sol-miss: #9A7010; --sol-adjust: #1155CC; } /* ── AUTO — defer to OS preference ─────────────────────────────────────── */ /* sol-theme.js handles the data-theme attribute swap for auto mode. This block is a safety net for JS-off or SSR scenarios. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --sol-bg-primary: #FFFFFF; --sol-bg-secondary: #F4F4F6; --sol-bg-tertiary: #E9E9EE; --sol-bg-card: #FAFAFA; --sol-bg-hover: rgba(0,0,0,0.03); --sol-text-primary: #0A0A0A; --sol-text-secondary: rgba(10,10,10,0.6); --sol-text-muted: rgba(10,10,10,0.35); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #B8941E; --sol-accent-gold-bright:#C9A84C; --sol-accent-gold-dim: rgba(184,148,30,0.2); --sol-accent-green: #16A34A; --sol-accent-red: #DC2626; --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(10,10,10,0.1); --sol-border-accent: #B8941E; --sol-border-strong: rgba(10,10,10,0.25); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(10,10,10,0.2); --sol-input-text: #0A0A0A; --sol-input-placeholder: rgba(10,10,10,0.35); --sol-input-focus: #1155CC; --sol-shadow: 0 4px 24px rgba(0,0,0,0.1); --sol-shadow-sm: 0 1px 6px rgba(0,0,0,0.08); --sol-hit: #16A34A; --sol-miss: #B8941E; --sol-adjust: #1155CC; } }