/* theme-overlay.css — deterministic light/dark theme that doesn't rely on Tailwind dark: variants. Uses CSS variables with light defaults and overrides them when has .dark. Apply AFTER Tailwind so these win via !important. */ /* Light defaults */ :root { --bg: #fafafa; /* zinc-50 */ --panel: #ffffff; /* white */ --panel-alt: #f4f4f5; /* zinc-100 */ --text: #18181b; /* zinc-900 */ --muted: #52525b; /* zinc-600 */ --border: #e4e4e7; /* zinc-200 */ } /* Dark overrides */ html.dark { --bg: #0a0a0a; /* zinc-950-ish */ --panel: #0b0b0f; /* deep panel */ --panel-alt: #111114; /* slightly lighter panel */ --text: #e4e4e7; /* zinc-200 */ --muted: #a1a1aa; /* zinc-400 */ --border: #27272a; /* zinc-800 */ } /* Apply variables to common surfaces and text */ body { background-color: var(--bg) !important; color: var(--text) !important; } /* Panels & cards */ .bg-white { background-color: var(--panel) !important; } .bg-zinc-50 { background-color: var(--bg) !important; } .bg-white\/80 { background-color: color-mix(in oklab, var(--panel), transparent 20%) !important; } .backdrop-blur { backdrop-filter: saturate(1) blur(6px) !important; } /* Borders */ .border-zinc-200 { border-color: var(--border) !important; } .divide-zinc-200 > * + * { border-color: var(--border) !important; } .dark\:divide-zinc-800 > * + * { border-color: var(--border) !important; } /* keep compatibility */ /* Text */ .text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-600 { color: var(--text) !important; } .text-zinc-500, .text-zinc-400 { color: var(--muted) !important; } /* Chips / badges / subtle borders */ .border-zinc-200.px-2, .border-zinc-200.px-2.py-0\.5, .border-zinc-200.px-2.py-1 { border-color: var(--border) !important; } /* Inputs */ input, textarea, select { background-color: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Hover helpers */ .hover\:bg-zinc-50:hover { background-color: var(--panel-alt) !important; }