/* ============================================================ Theme palettes — applied by setting data-theme on . Default (no attribute) = the original ledger-green theme in style.css. ============================================================ */ /* ---------- Dark Blue (School) ---------- */ html[data-theme="dark-blue"]{ --bg: #0E1626; --surface: #16213A; --surface-soft: #1C2A47; --ink: #E8EEF9; --ink-soft: #A8B6D1; --ink-faint: #6E7CA0; --primary: #2563EB; --primary-dark: #0F1B3D; --primary-soft: #1E2E56; --accent: #F5A623; --accent-soft: #3A2E14; --border: #263455; --danger: #EF4444; --danger-soft: #3A1A1A; --success: #22C55E; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.35); } html[data-theme="dark-blue"] .sidebar{ background: #0A1122; } html[data-theme="dark-blue"] .card, html[data-theme="dark-blue"] .modal, html[data-theme="dark-blue"] .stat-card, html[data-theme="dark-blue"] table{ background: var(--surface); } html[data-theme="dark-blue"] th{ background: var(--surface-soft); color: var(--ink-soft); } html[data-theme="dark-blue"] input, html[data-theme="dark-blue"] select, html[data-theme="dark-blue"] textarea{ background: var(--surface-soft); color: var(--ink); border-color: var(--border); } /* ---------- Classic Green (default, restated for the switcher UI) ---------- */ html[data-theme="ledger-green"]{ --bg: #F6F4EE; --surface: #FFFFFF; --surface-soft: #FBFAF6; --ink: #1C2B22; --ink-soft: #5B6960; --ink-faint: #8B968D; --primary: #0B6E4F; --primary-dark: #084F39; --primary-soft: #E4F0EA; --accent: #C98A2C; --accent-soft: #F6EAD3; --border: #E3DFD3; --danger: #B3261E; --danger-soft: #F8E6E4; } /* ---------- Maroon / Burgundy ---------- */ html[data-theme="maroon"]{ --bg: #F7EFEF; --surface: #FFFFFF; --surface-soft: #FBF4F4; --ink: #2B1417; --ink-soft: #6B4A4F; --ink-faint: #9C7F82; --primary: #7A1F2B; --primary-dark: #591520; --primary-soft: #F2DFE2; --accent: #C9962C; --accent-soft: #F6ECD3; --border: #E7D6D6; --danger: #B3261E; --danger-soft: #F8E6E4; } /* ---------- Slate / Neutral Gray ---------- */ html[data-theme="slate"]{ --bg: #F1F3F5; --surface: #FFFFFF; --surface-soft: #F8F9FA; --ink: #1E2328; --ink-soft: #5C6672; --ink-faint: #8D97A3; --primary: #334155; --primary-dark: #1E293B; --primary-soft: #E2E8F0; --accent: #0EA5E9; --accent-soft: #E0F2FE; --border: #DCE1E7; --danger: #DC2626; --danger-soft: #FEE2E2; } /* Dark-theme table/card overrides for maroon and slate stay on the light pattern above (only dark-blue needs the surface overrides), since these two are light themes with a different accent, not full dark modes. */