/* ============================================================ assets/css/theme.css — SmartSwap theme system Three themes: neutral (default), dark, light Applied via data-theme attribute on Persisted in localStorage as 'ss_theme' ============================================================ */ /* ── NEUTRAL (default — warm parchment, forest green) ──── */ /* Already defined in main.css :root — this is the baseline */ /* ── LIGHT (crisp white, blue accent — like blue logo) ──── */ [data-theme="light"] { --c-bg: #F0F4F8; --c-bg2: #E2E8F0; --c-surface: #FFFFFF; --c-text: #0F172A; --c-text2: #475569; --c-text3: #94A3B8; --c-accent: #2563EB; --c-accent2: #3B82F6; --c-accent3: #BFDBFE; --c-border: rgba(15,23,42,0.10); --c-border2: rgba(15,23,42,0.06); --c-gold: #F59E0B; --c-danger: #EF4444; --c-sleep: #6366F1; --c-breath: #2563EB; --c-gut: #D97706; --gradient-brand: linear-gradient(135deg, #2563EB, #6366F1); } /* ── DARK (deep navy, orange accent — like orange logo) ─── */ [data-theme="dark"] { --c-bg: #0D1117; --c-bg2: #161B22; --c-surface: #1C2128; --c-text: #E6EDF3; --c-text2: #8B949E; --c-text3: #484F58; --c-accent: #F97316; --c-accent2: #FB923C; --c-accent3: #431407; --c-border: rgba(230,237,243,0.10); --c-border2: rgba(230,237,243,0.06); --c-gold: #FBBF24; --c-danger: #F85149; --c-sleep: #818CF8; --c-breath: #F97316; --c-gut: #A3E635; --gradient-brand: linear-gradient(135deg, #F97316, #FB923C); } /* ── DARK: component overrides that need explicit colours ── */ [data-theme="dark"] .card, [data-theme="dark"] .admin-card { background: var(--c-surface); border-color: var(--c-border2); } [data-theme="dark"] .sidebar { background: var(--c-surface); border-color: var(--c-border2); } [data-theme="dark"] .sidebar-logo { background: #0D1117; border-color: var(--c-border2); } [data-theme="dark"] .sidebar-link:hover { background: var(--c-bg2); } [data-theme="dark"] .sidebar-link.active { background: rgba(249,115,22,0.12); border-left-color: var(--c-accent); color: var(--c-accent); } [data-theme="dark"] .technique-card { background: var(--c-surface); border-color: var(--c-border); } [data-theme="dark"] .technique-card.selected { border-color: var(--c-accent); background: rgba(249,115,22,0.08); } [data-theme="dark"] input[type=range]::-webkit-slider-runnable-track { background: var(--c-bg2); } [data-theme="dark"] .form-input { background: var(--c-bg2); color: var(--c-text); border-color: var(--c-border); } [data-theme="dark"] .admin-layout, [data-theme="dark"] .app-layout { background: var(--c-bg); } /* ── LIGHT: accent-specific overrides ────────────────────── */ [data-theme="light"] .sidebar-link.active { background: rgba(37,99,235,0.08); border-left-color: var(--c-accent); color: var(--c-accent); } [data-theme="light"] .technique-card.selected { border-color: var(--c-accent); background: rgba(37,99,235,0.05); } [data-theme="light"] .btn-primary { background: var(--c-accent); border-color: var(--c-accent); } [data-theme="light"] .btn-primary:hover { background: var(--c-accent2); border-color: var(--c-accent2); } /* ── DARK: admin sidebar specific ───────────────────────── */ /* Admin sidebar has inline dark background — keep it dark regardless */ [data-theme="dark"] .sidebar[style*="1C1B18"], [data-theme="dark"] .sidebar[style*="background:#1C1B18"] { background: #0D1117 !important; } /* ── NEUTRAL: ensure logo area stays white in all themes ── */ [data-theme="light"] .sidebar-logo, [data-theme="dark"] .sidebar-logo { background: #ffffff; } [data-theme="dark"] .sidebar-logo { background: #0D1117 !important; border-bottom-color: var(--c-border2) !important; } /* ── DARK: mobile topbar ────────────────────────────────── */ [data-theme="dark"] .mobile-topbar { background: var(--c-surface); border-bottom-color: var(--c-border2); } [data-theme="dark"] .mobile-topbar .mobile-topbar-logo { color: var(--c-text); } [data-theme="dark"] .mobile-hamburger span { background: var(--c-text2); } /* ── DARK: stats & kpi cards ────────────────────────────── */ [data-theme="dark"] .stat-card, [data-theme="dark"] .kpi-card { background: var(--c-surface); } [data-theme="dark"] .kpi-value { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── DARK: chart canvas readability ─────────────────────── */ [data-theme="dark"] canvas { filter: brightness(0.9); }