/* ============================================================ PIXLUME — Light Mode (Theme) ───────────────────────────────────────────────────────────── Applied via [data-theme="light"] on . Every colour is a CSS variable override — no selector duplication, no specificity wars. Dark mode is the default (original :root block). Light mode overrides every bg/surface/border/text token. Amber and teal accents are kept — slightly deepened for legibility on white backgrounds. Toggle: theme.js writes data-theme="light" / "dark" and stores the choice in localStorage under "mf_theme". On page load, theme.js reads localStorage before first paint — no flash of wrong theme (FOUT). ============================================================ */ /* ── Light mode token overrides ─────────────────────────── */ [data-theme="light"] { /* Backgrounds — inverted from dark hierarchy */ --bg: #f4f4f8; --bg2: #ffffff; --bg3: #eeeef4; /* Surfaces */ --surface: #ffffff; --surface2: #f0f0f6; /* Borders */ --border: #dcdce8; --border2: #c8c8d8; /* Amber — deepened 10% for white-bg contrast (WCAG AA) */ --amber: #d4880a; --amber-light: #f5a623; --amber-dark: #a86208; --amber-glow: rgba(212, 136, 10, 0.12); --amber-glow2: rgba(212, 136, 10, 0.06); /* Teal — also deepened slightly */ --teal: #009e90; --teal-glow: rgba(0, 158, 144, 0.10); /* Typography */ --text: #111118; --text2: #44435a; --text3: #888898; /* Shadows — lighter for white surfaces */ --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 12px 48px rgba(0,0,0,0.12); --shadow-amber:0 8px 32px rgba(212,136,10,0.18); } /* ── Light: header ──────────────────────────────────────── */ [data-theme="light"] .header { background: rgba(244, 244, 248, 0.92); border-bottom-color: var(--border); } [data-theme="light"] .header.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 24px rgba(0,0,0,0.08); } /* ── Light: hero grid + orbs ────────────────────────────── */ [data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(212,136,10,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212,136,10,0.06) 1px, transparent 1px); } [data-theme="light"] .hero-orb { opacity: 0.18; } /* ── Light: tool cards ──────────────────────────────────── */ [data-theme="light"] .tool-card { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.05); } [data-theme="light"] .tool-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(212,136,10,0.15); } /* ── Light: code/pre blocks ─────────────────────────────── */ [data-theme="light"] .ic, [data-theme="light"] pre, [data-theme="light"] code { background: var(--bg3); border-color: var(--border); color: var(--text); } /* ── Light: toasts ──────────────────────────────────────── */ [data-theme="light"] .toast { background: var(--bg2); border: 1px solid var(--border); color: var(--text); box-shadow: 0 4px 24px rgba(0,0,0,0.12); } /* ── Light: modals ──────────────────────────────────────── */ [data-theme="light"] .modal-box, [data-theme="light"] [id$="Modal"] > div { background: var(--surface); border-color: var(--border); } /* ── Light: footer ──────────────────────────────────────── */ [data-theme="light"] .footer { background: var(--bg3); border-top-color: var(--border); } /* ── Light: doc sidebar ─────────────────────────────────── */ [data-theme="light"] .doc-sidebar { background: var(--bg2); border-right-color: var(--border); } [data-theme="light"] .doc-header { background: rgba(255,255,255,0.92); border-bottom-color: var(--border); } /* ── Light: auth pages ──────────────────────────────────── */ [data-theme="light"] .auth-panel-left { background: linear-gradient(135deg, var(--bg3) 0%, var(--surface) 100%); } /* ── Smooth theme transition ────────────────────────────── */ /* Applied to the whole tree so every property transitions. Only opacity, transform, filter stay instant for animation/interaction elements. */ html { transition: background-color 0.3s ease, color 0.3s ease; } *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow, fill, stroke; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Preserve animation-heavy elements — don't force colour transitions on things that already have their own timing */ .hero-orb, .hero-orb-1, .hero-orb-2, .progress-bar-fill, .plan-usage-fill, .jm-progress-fill, .spinner, .jm-spin, [class*="animate"], [class*="reveal"] { transition-property: none !important; transition: inherit; } /* ── Theme toggle button ────────────────────────────────── */ /* Placed inside .nav-actions. Styled to match the existing btn-ghost pattern from style.css without adding new classes. */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: var(--transition); flex-shrink: 0; font-size: 0.9rem; font-family: var(--font-body); position: relative; overflow: hidden; } .theme-toggle:hover { background: var(--surface2); border-color: var(--border2); color: var(--amber); } /* Icon swap — only one icon visible at a time */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; } /* Dark mode active: show sun (click to go light) */ [data-theme="dark"] .theme-toggle .icon-sun, :root:not([data-theme]) .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme]) .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } /* Light mode active: show moon (click to go dark) */ [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }