/* ============================================================ QuickTools — Theme System 4 Themes: Forest (default), Ocean, Sunset, Midnight Applied via etc. ============================================================ */ /* ---- THEME 1: Forest (default green — current style) ---- */ [data-theme="forest"], :root { --bg: #F6F3ED; --surface: #FFFFFF; --primary: #16414A; --primary-light: #1F5C68; --accent: #E8893A; --accent-soft: #FBE6D4; --text: #233238; --muted: #6B7B82; --border: #E4E0D6; --hero-grad: linear-gradient(135deg, #16414A 0%, #1F5C68 100%); --card-hover-shadow: rgba(22,65,74,0.10); --logo-color: #fff; --nav-link: #E7EEEF; --radius: 14px; } /* ---- THEME 2: Ocean (deep blue) ---- */ [data-theme="ocean"] { --bg: #F0F4FA; --surface: #FFFFFF; --primary: #1A3A6B; --primary-light: #2454A0; --accent: #F59E0B; --accent-soft: #FEF3C7; --text: #1E293B; --muted: #64748B; --border: #CBD5E1; --hero-grad: linear-gradient(135deg, #1A3A6B 0%, #2454A0 100%); --card-hover-shadow: rgba(26,58,107,0.10); --logo-color: #fff; --nav-link: #BFDBFE; --radius: 14px; } /* ---- THEME 3: Sunset (warm terracotta) ---- */ [data-theme="sunset"] { --bg: #FDF6F0; --surface: #FFFFFF; --primary: #7C2D12; --primary-light: #C2410C; --accent: #0EA5E9; --accent-soft: #E0F2FE; --text: #3C1D0D; --muted: #92400E; --border: #FCD9BC; --hero-grad: linear-gradient(135deg, #7C2D12 0%, #C2410C 100%); --card-hover-shadow: rgba(124,45,18,0.10); --logo-color: #fff; --nav-link: #FED7AA; --radius: 14px; } /* ---- THEME 4: Midnight (dark mode) ---- */ [data-theme="midnight"] { --bg: #0F172A; --surface: #1E293B; --primary: #6366F1; --primary-light: #818CF8; --accent: #F59E0B; --accent-soft: #292524; --text: #E2E8F0; --muted: #94A3B8; --border: #334155; --hero-grad: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%); --card-hover-shadow: rgba(99,102,241,0.20); --logo-color: #fff; --nav-link: #C7D2FE; --radius: 14px; } /* Theme-aware overrides */ [data-theme="midnight"] .site-header { background: #1E1B4B; } [data-theme="midnight"] .site-footer { background: #1E1B4B; } [data-theme="midnight"] .admin-topbar { background: #1E1B4B; } [data-theme="midnight"] .hero { background: var(--hero-grad); } [data-theme="midnight"] body { background: var(--bg); color: var(--text); } [data-theme="midnight"] .field input, [data-theme="midnight"] .field select, [data-theme="midnight"] .field textarea { background: #0F172A; color: var(--text); border-color: var(--border); } [data-theme="midnight"] .calc-widget { background: var(--surface); } [data-theme="midnight"] .article { background: var(--surface); color: var(--text); } [data-theme="midnight"] h1, [data-theme="midnight"] h2, [data-theme="midnight"] h3 { color: var(--primary-light); } [data-theme="midnight"] a { color: var(--primary-light); } [data-theme="midnight"] .stat-box { background: #0F172A; } [data-theme="midnight"] .admin-card { background: var(--surface); } /* Theme Switcher Widget */ .theme-switcher { display: flex; gap: 8px; align-items: center; } .theme-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; position: relative; padding: 0; } .theme-btn:hover { transform: scale(1.15); } .theme-btn.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.3); } .theme-btn[data-t="forest"] { background: linear-gradient(135deg, #16414A 50%, #E8893A 50%); } .theme-btn[data-t="ocean"] { background: linear-gradient(135deg, #1A3A6B 50%, #F59E0B 50%); } .theme-btn[data-t="sunset"] { background: linear-gradient(135deg, #7C2D12 50%, #0EA5E9 50%); } .theme-btn[data-t="midnight"] { background: linear-gradient(135deg, #1E1B4B 50%, #6366F1 50%); } .theme-btn[title]::after { content: attr(title); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .theme-btn:hover::after { opacity: 1; }