/* =========================================================================== Light/dark theming for the LeadFuel admin UI. Every admin template declares the SAME CSS-variable names in its inline :root (dark by default). This file flips those variables when the element carries data-theme="light". Because `html[data-theme="light"]` has higher specificity than `:root`, it wins regardless of load order — so one shared file re-skins every page that includes it. theme.js sets data-theme on (from localStorage / OS preference) before paint, and injects the floating toggle button styled below. =========================================================================== */ html[data-theme="light"] { --bg: #f4f5fa; --bg-elevated: #ffffff; --bg-subtle: #eceef5; --border: rgba(17, 14, 34, 0.14); --brand: #e10b0b; --brand-hover: #c00808; --text: #16131f; --text-muted: #4c4a5e; --text-faint: #74728a; color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Common hardcoded "faint white" surfaces/borders used inline across the admin templates don't reference the variables, so nudge them to read well on a light background. Kept conservative — only the most common patterns. */ html[data-theme="light"] [style*="rgba(255,255,255,.06)"], html[data-theme="light"] [style*="rgba(255,255,255,0.06)"] { background-color: rgba(17, 14, 34, 0.05) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.08)"], html[data-theme="light"] [style*="rgba(255,255,255,0.08)"] { border-color: rgba(17, 14, 34, 0.12) !important; } /* Smooth the switch on the big surfaces. */ html, body { transition: background-color .25s ease, color .25s ease; } /* Floating toggle button (injected by theme.js). */ #lf-theme-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 9990; width: 42px; height: 42px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); transition: transform .12s ease, background-color .2s ease; } #lf-theme-toggle:hover { transform: translateY(-2px); } @media print { #lf-theme-toggle { display: none !important; } }