/* ═══════════════════════════════════════════════ FILE: styles/themes.css RESPONSIBILITY: Six colour themes via CSS variables. Theme is set by adding data-theme="X" to . Default (no attribute) = classic-scholar. ═══════════════════════════════════════════════ */ /* ── 1. CLASSIC SCHOLAR 🎓 (default / existing palette upgraded) ── */ :root, [data-theme="classic-scholar"] { --cream: #F7F3EC; --ink: #1C1C2E; --gold: #C8A84B; --gold-light: rgba(200,168,75,.12); --green: #2A6B4E; --green-light: rgba(42,107,78,.09); --red: #C0392B; --red-light: rgba(192,57,43,.08); --blue: #2563EB; --purple: #7C3AED; --mid: #6B7280; --border: #E5E7EB; --white: #FFFFFF; --r: 14px; --shadow: 0 2px 18px rgba(0,0,0,.07); --blue-light: rgba(37,99,235,.09); --bg: #F7F3EC; --dark: #1C1C2E; --card: #FFFFFF; /* Theme identity */ --theme-nav-bg: #1C1C2E; --theme-nav-logo: #C8A84B; --theme-accent: #C8A84B; --theme-accent-2: #2A6B4E; --theme-page-bg: #F7F3EC; --theme-card-bg: #FFFFFF; --theme-hero-grad: linear-gradient(135deg,#1C1C2E 0%,#2d3a2a 100%); --theme-pill-bg: rgba(200,168,75,.12); --theme-pill-color: #6B4C00; --theme-mob-menu: #1C1C2E; } /* ── 2. CORAL GARDEN 🌸 ── */ [data-theme="coral-garden"] { --cream: #FFF5F5; --ink: #2D1B2E; --gold: #E8845C; --gold-light: rgba(232,132,92,.12); --green: #9B59B6; --green-light: rgba(155,89,182,.1); --red: #E74C3C; --red-light: rgba(231,76,60,.08); --blue: #8E44AD; --purple: #9B59B6; --mid: #7D6B7E; --border: #F0D9E8; --white: #FFFFFF; --r: 14px; --shadow: 0 2px 18px rgba(155,89,182,.09); --blue-light: rgba(142,68,173,.09); --bg: #FFF5F5; --dark: #2D1B2E; --card: #FFFFFF; --theme-nav-bg: #2D1B2E; --theme-nav-logo: #E8845C; --theme-accent: #E8845C; --theme-accent-2: #B07CC6; --theme-page-bg: #FFF5F5; --theme-card-bg: #FFFFFF; --theme-hero-grad: linear-gradient(135deg,#2D1B2E 0%,#5C2D6E 100%); --theme-pill-bg: rgba(232,132,92,.12); --theme-pill-color: #8B3A1A; --theme-mob-menu: #2D1B2E; } /* ── 3. MINT FRESH 🍃 ── */ [data-theme="mint-fresh"] { --cream: #F0FAF6; --ink: #1A3330; --gold: #2BAE82; --gold-light: rgba(43,174,130,.12); --green: #17956A; --green-light: rgba(23,149,106,.1); --red: #E05555; --red-light: rgba(224,85,85,.08); --blue: #1A8C6F; --purple: #38B2A0; --mid: #5A7A74; --border: #C8EAE0; --white: #FFFFFF; --r: 14px; --shadow: 0 2px 18px rgba(43,174,130,.09); --blue-light: rgba(26,140,111,.09); --bg: #F0FAF6; --dark: #1A3330; --card: #FFFFFF; --theme-nav-bg: #1A3330; --theme-nav-logo: #2BAE82; --theme-accent: #2BAE82; --theme-accent-2: #17956A; --theme-page-bg: #F0FAF6; --theme-card-bg: #FFFFFF; --theme-hero-grad: linear-gradient(135deg,#1A3330 0%,#145C47 100%); --theme-pill-bg: rgba(43,174,130,.12); --theme-pill-color: #0D5C40; --theme-mob-menu: #1A3330; } /* ── 4. FOREST TRAIL 🌲 ── */ [data-theme="forest-trail"] { --cream: #F5F0E8; --ink: #2C2416; --gold: #8B6F3A; --gold-light: rgba(139,111,58,.12); --green: #5A7A3A; --green-light: rgba(90,122,58,.1); --red: #B85C38; --red-light: rgba(184,92,56,.08); --blue: #6B8C5A; --purple: #7A6B4A; --mid: #7A6E5A; --border: #DDD4C0; --white: #FDFAF4; --r: 14px; --shadow: 0 2px 18px rgba(44,36,22,.09); --blue-light: rgba(90,122,58,.09); --bg: #F5F0E8; --dark: #2C2416; --card: #FDFAF4; --theme-nav-bg: #2C2416; --theme-nav-logo: #C4A265; --theme-accent: #8B6F3A; --theme-accent-2: #5A7A3A; --theme-page-bg: #F5F0E8; --theme-card-bg: #FDFAF4; --theme-hero-grad: linear-gradient(135deg,#2C2416 0%,#3D3020 100%); --theme-pill-bg: rgba(139,111,58,.12); --theme-pill-color: #5C3D10; --theme-mob-menu: #2C2416; } /* ── 5. MIDNIGHT STAR 🌙 ── */ [data-theme="midnight-star"] { --cream: #0F1117; --ink: #E8E6F0; --gold: #F5C842; --gold-light: rgba(245,200,66,.14); --green: #4ADE80; --green-light: rgba(74,222,128,.1); --red: #F87171; --red-light: rgba(248,113,113,.1); --blue: #60A5FA; --purple: #A78BFA; --mid: #9CA3AF; --border: #2A2D3E; --white: #1A1D2E; --r: 14px; --shadow: 0 2px 18px rgba(0,0,0,.35); --blue-light: rgba(96,165,250,.12); --bg: #0F1117; --dark: #E8E6F0; --card: #1A1D2E; --theme-nav-bg: #080A12; --theme-nav-logo: #F5C842; --theme-accent: #F5C842; --theme-accent-2: #60A5FA; --theme-page-bg: #0F1117; --theme-card-bg: #1A1D2E; --theme-hero-grad: linear-gradient(135deg,#080A12 0%,#1a1040 100%); --theme-pill-bg: rgba(245,200,66,.14); --theme-pill-color: #F5C842; --theme-mob-menu: #080A12; } /* ── 6. SUNSET DUSK 🌅 ── */ [data-theme="sunset-dusk"] { --cream: #FFF8F0; --ink: #2A1A2E; --gold: #F4845F; --gold-light: rgba(244,132,95,.12); --green: #7C6BA0; --green-light: rgba(124,107,160,.1); --red: #E05555; --red-light: rgba(224,85,85,.08); --blue: #9B7FD4; --purple: #B08EC0; --mid: #7A6880; --border: #EDD9D0; --white: #FFFFFF; --r: 14px; --shadow: 0 2px 18px rgba(244,132,95,.1); --blue-light: rgba(155,127,212,.09); --bg: #FFF8F0; --dark: #2A1A2E; --card: #FFFFFF; --theme-nav-bg: #2A1A2E; --theme-nav-logo: #F4845F; --theme-accent: #F4845F; --theme-accent-2: #9B7FD4; --theme-page-bg: #FFF8F0; --theme-card-bg: #FFFFFF; --theme-hero-grad: linear-gradient(135deg,#2A1A2E 0%,#4A2040 100%); --theme-pill-bg: rgba(244,132,95,.12); --theme-pill-color: #8B3A1A; --theme-mob-menu: #2A1A2E; } /* ── Apply theme-aware nav & body background ── */ nav { background: var(--theme-nav-bg) !important; } .mobile-menu { background: var(--theme-mob-menu) !important; border-top-color: rgba(255,255,255,.08) !important; } .logo { color: var(--theme-nav-logo) !important; } body { background: var(--theme-page-bg); } /* Midnight Star: invert text colours for dark mode */ [data-theme="midnight-star"] body { color: var(--ink); } [data-theme="midnight-star"] .card, [data-theme="midnight-star"] .home-quick-card, [data-theme="midnight-star"] .diff-card, [data-theme="midnight-star"] .region-card, [data-theme="midnight-star"] .badge-card, [data-theme="midnight-star"] .dash-stat, [data-theme="midnight-star"] .sbox, [data-theme="midnight-star"] .opt, [data-theme="midnight-star"] .si, [data-theme="midnight-star"] .rev-item, [data-theme="midnight-star"] .wb-stat, [data-theme="midnight-star"] .exam-format-card { background: var(--card); border-color: var(--border); color: var(--ink); } [data-theme="midnight-star"] .field input, [data-theme="midnight-star"] .field select, [data-theme="midnight-star"] .pw-input { background: #252840; border-color: var(--border); color: var(--ink); } [data-theme="midnight-star"] .cbtn { background: #252840; border-color: var(--border); color: var(--ink); } [data-theme="midnight-star"] .pill { background: #1A1D2E; border-color: var(--border); color: var(--ink); } [data-theme="midnight-star"] .report-wrap, [data-theme="midnight-star"] .pw-card { background: var(--card); color: var(--ink); } [data-theme="midnight-star"] .qcard { background: var(--card); color: var(--ink); }