/* ── themes.css ────────────────────────────────────────────────────────────── Color token definitions for all SaaDhaGaa themes. Load BEFORE style.css — this file sets the full color palette so all downstream sheets can consume theme-aware tokens. Theme switching: set [data-theme="dark-gold|dark-teal|dark-indigo|dark-rose"] on . The :root block provides dark-gold defaults so the app works even without an explicit data-theme attribute (e.g., before JS runs). Persistence: theme name stored in localStorage key "sgd.colorTheme". The inline anti-FOUC script in index.html reads this key and sets data-theme on before any CSS renders, eliminating flash. */ /* ── State / status colors — constant across all themes ───────────────────── These are semantic (success/error/warning/info) and intentionally NOT part of the accent/brand color palette. */ :root { --success: #10b981; --success-bg: rgba(16, 185, 129, 0.10); --success-text: #a7f3d0; --error: #ef4444; --error-bg: rgba(239, 68, 68, 0.12); --error-text: #fecaca; --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.10); --warning-text: #fed7aa; --info: #3b82f6; --info-bg: rgba( 59, 130, 246, 0.10); --info-text: #93c5fd; /* ── Extended semantic tokens ───────────────────────────────────────────── Fills the gap for the ~374 hardcoded hex values across feature CSS. */ --text-dim: #9ca3af; /* dimmer than --text-muted */ --text-bright: #f3f4f6; /* brighter than --text-secondary */ --surface-subtle: rgba(51, 65, 85, 0.30); /* dividers, faint borders */ --surface-hover: rgba(55, 65, 81, 0.90); /* interactive hover bg */ --divider: rgba(100, 116, 139, 0.15); /* card-internal dividers */ --bg-deep: #0f172a; /* deeper card/modal backgrounds */ --bg-input: rgba(15, 23, 42, 0.60); /* form inputs */ } /* ══════════════════════════════════════════════════════════════════════════ THEME: Dark Gold (default) Deep navy background — warm gold accents. This is the canonical SaaDhaGaa look. ══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark-gold"] { /* Page / surface backgrounds */ --bg: #0B1426; --bg-surface: rgba(15, 23, 42, 0.95); --surface-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(20, 30, 50, 0.85)); /* Card border */ --card-border: rgba(212, 175, 55, 0.30); /* Text hierarchy */ --text: #FFFFFF; --text-secondary: #e2e8f0; --muted: #CBD5E1; --text-muted: #94a3b8; --text-faint: #64748b; /* Brand accent */ --accent-1: #D4AF37; --accent-2: #F4D03F; --accent-gradient: linear-gradient(90deg, #D4AF37, #F4D03F); --surface-border: rgba(212, 175, 55, 0.30); --primary: #D4AF37; --primary-text: #111827; /* Buttons */ --btn-primary-bg: linear-gradient(135deg, #D4AF37, #F4D03F); --btn-primary-text: #111827; --btn-primary-shadow: rgba(212, 175, 55, 0.30); --btn-secondary-text: #CBD5E1; --btn-secondary-border: rgba(203, 213, 225, 0.30); /* UI chrome */ --header-accent: #D4AF37; --scrollbar-thumb: rgba(212, 175, 55, 0.25); --scrollbar-track: rgba( 15, 23, 42, 0.50); /* Backward-compat aliases (used by login.css, register.css, etc.) */ --bg-card: rgba(15, 23, 42, 0.90); --card-bg: rgba(15, 23, 42, 0.90); --text-main: #FFFFFF; /* Extended semantic tokens — theme-tuned */ --text-dim: #9ca3af; --text-bright: #f3f4f6; --text-faint: #64748b; --bg-deep: #0a0f1c; --bg-input: rgba(15, 23, 42, 0.60); --surface-subtle: rgba(51, 65, 85, 0.30); --surface-hover: rgba(55, 65, 81, 0.90); --divider: rgba(100, 116, 139, 0.15); } /* ══════════════════════════════════════════════════════════════════════════ THEME: Dark Teal Deep ocean tones — teal/cyan accents. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-teal"] { --bg: #071519; --bg-surface: rgba(7, 35, 42, 0.95); --surface-bg: linear-gradient(135deg, rgba(7, 35, 42, 0.90), rgba(10, 42, 50, 0.85)); --card-border: rgba(13, 148, 136, 0.35); --text: #F0FDFA; --text-secondary: #CCFBF1; --muted: #99F6E4; --text-muted: #5EEAD4; --text-faint: #2DD4BF; --accent-1: #0D9488; --accent-2: #14B8A6; --accent-gradient: linear-gradient(90deg, #0D9488, #14B8A6); --surface-border: rgba(13, 148, 136, 0.35); --primary: #0D9488; --primary-text: #011c19; --btn-primary-bg: linear-gradient(135deg, #0D9488, #14B8A6); --btn-primary-text: #011c19; --btn-primary-shadow: rgba(13, 148, 136, 0.35); --btn-secondary-text: #99F6E4; --btn-secondary-border: rgba(153, 246, 228, 0.35); --header-accent: #14B8A6; --scrollbar-thumb: rgba(13, 148, 136, 0.30); --scrollbar-track: rgba( 7, 35, 42, 0.50); --bg-card: rgba(7, 35, 42, 0.90); --card-bg: rgba(7, 35, 42, 0.90); --text-main: #F0FDFA; /* Extended semantic tokens — teal-tuned */ --text-dim: rgba(94, 234, 212, 0.55); --text-bright: #CCFBF1; --text-faint: #2DD4BF; --bg-deep: #041210; --bg-input: rgba(7, 35, 42, 0.60); --surface-subtle: rgba(13, 148, 136, 0.15); --surface-hover: rgba(13, 148, 136, 0.20); --divider: rgba(13, 148, 136, 0.12); } /* ══════════════════════════════════════════════════════════════════════════ THEME: Dark Indigo Space-dark background — electric indigo/violet accents. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-indigo"] { --bg: #0A0D1A; --bg-surface: rgba(10, 13, 40, 0.95); --surface-bg: linear-gradient(135deg, rgba(10, 13, 40, 0.90), rgba(15, 20, 52, 0.85)); --card-border: rgba(99, 102, 241, 0.35); --text: #F1F5F9; --text-secondary: #E0E7FF; --muted: #C7D2FE; --text-muted: #A5B4FC; --text-faint: #818CF8; --accent-1: #6366F1; --accent-2: #818CF8; --accent-gradient: linear-gradient(90deg, #6366F1, #818CF8); --surface-border: rgba(99, 102, 241, 0.35); --primary: #6366F1; --primary-text: #0f0c29; --btn-primary-bg: linear-gradient(135deg, #6366F1, #818CF8); --btn-primary-text: #0f0c29; --btn-primary-shadow: rgba(99, 102, 241, 0.35); --btn-secondary-text: #C7D2FE; --btn-secondary-border: rgba(199, 210, 254, 0.35); --header-accent: #818CF8; --scrollbar-thumb: rgba(99, 102, 241, 0.30); --scrollbar-track: rgba(10, 13, 40, 0.50); --bg-card: rgba(10, 13, 40, 0.90); --card-bg: rgba(10, 13, 40, 0.90); --text-main: #F1F5F9; /* Extended semantic tokens — indigo-tuned */ --text-dim: rgba(165, 180, 252, 0.55); --text-bright: #E0E7FF; --text-faint: #818CF8; --bg-deep: #06081a; --bg-input: rgba(10, 13, 40, 0.60); --surface-subtle: rgba(99, 102, 241, 0.15); --surface-hover: rgba(99, 102, 241, 0.20); --divider: rgba(99, 102, 241, 0.12); } /* ══════════════════════════════════════════════════════════════════════════ THEME: Dark Rose Deep burgundy tones — rose / crimson accents. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-rose"] { --bg: #130A0F; --bg-surface: rgba(30, 10, 20, 0.95); --surface-bg: linear-gradient(135deg, rgba(30, 10, 20, 0.90), rgba(40, 15, 30, 0.85)); --card-border: rgba(244, 63, 94, 0.35); --text: #FFF1F2; --text-secondary: #FECDD3; --muted: #FDA4AF; --text-muted: #FB7185; --text-faint: #F43F5E; --accent-1: #F43F5E; --accent-2: #FB7185; --accent-gradient: linear-gradient(90deg, #F43F5E, #FB7185); --surface-border: rgba(244, 63, 94, 0.35); --primary: #F43F5E; --primary-text: #1a0008; --btn-primary-bg: linear-gradient(135deg, #F43F5E, #FB7185); --btn-primary-text: #1a0008; --btn-primary-shadow: rgba(244, 63, 94, 0.35); --btn-secondary-text: #FDA4AF; --btn-secondary-border: rgba(253, 164, 175, 0.35); --header-accent: #FB7185; --scrollbar-thumb: rgba(244, 63, 94, 0.30); --scrollbar-track: rgba( 30, 10, 20, 0.50); --bg-card: rgba(30, 10, 20, 0.90); --card-bg: rgba(30, 10, 20, 0.90); --text-main: #FFF1F2; /* Extended semantic tokens — rose-tuned */ --text-dim: rgba(251, 113, 133, 0.55); --text-bright: #FECDD3; --text-faint: #F43F5E; --bg-deep: #0d0509; --bg-input: rgba(30, 10, 20, 0.60); --surface-subtle: rgba(244, 63, 94, 0.15); --surface-hover: rgba(244, 63, 94, 0.20); --divider: rgba(244, 63, 94, 0.12); }