/* ───────────────────────────────────────────────────────────────────────── * THEME — light-mode overrides * ───────────────────────────────────────────────────────────────────────── * The app is built for dark mode by default (Tailwind classes use direct * slate-900/950 values, not `dark:` variants). When the user toggles to * light mode, theme.js REMOVES the `dark` class from — these rules * then take over and re-skin the surfaces to a light palette. * * Implementation note: we override the most-used slate utility classes. * This catches ~95% of surfaces. Accent colours (indigo, emerald, red, * amber) work unchanged on both themes. * ──────────────────────────────────────────────────────────────────────── */ html:not(.dark) { color-scheme: light; } /* ── Body / page background ─────────────────────────────────────────── */ html:not(.dark) body { background-color: #f8fafc !important; color: #0f172a !important; } /* ── Background surfaces (slate-950 down to slate-700) ──────────────── */ html:not(.dark) .bg-slate-950 { background-color: #f8fafc !important; } html:not(.dark) .bg-slate-900 { background-color: #ffffff !important; } html:not(.dark) .bg-slate-800 { background-color: #f1f5f9 !important; } html:not(.dark) .bg-slate-700 { background-color: #e2e8f0 !important; } /* Semi-transparent surface variants used widely (cards / hovers) */ html:not(.dark) .bg-slate-950\/95 { background-color: rgba(248,250,252,0.95) !important; } html:not(.dark) .bg-slate-950\/80 { background-color: rgba(248,250,252,0.92) !important; } html:not(.dark) .bg-slate-900\/95 { background-color: rgba(255,255,255,0.95) !important; } html:not(.dark) .bg-slate-900\/80 { background-color: rgba(255,255,255,0.92) !important; } html:not(.dark) .bg-slate-900\/60 { background-color: rgba(241,245,249,0.85) !important; } html:not(.dark) .bg-slate-900\/50 { background-color: rgba(241,245,249,0.7) !important; } html:not(.dark) .bg-slate-900\/40 { background-color: rgba(241,245,249,0.6) !important; } html:not(.dark) .bg-slate-800\/60 { background-color: rgba(226,232,240,0.7) !important; } html:not(.dark) .bg-slate-800\/50 { background-color: rgba(226,232,240,0.55) !important; } html:not(.dark) .bg-slate-800\/40 { background-color: rgba(226,232,240,0.45) !important; } html:not(.dark) .bg-slate-800\/30 { background-color: rgba(226,232,240,0.4) !important; } html:not(.dark) .bg-slate-700\/60 { background-color: rgba(203,213,225,0.6) !important; } /* Hover states */ html:not(.dark) .hover\:bg-slate-800:hover { background-color: #e2e8f0 !important; } html:not(.dark) .hover\:bg-slate-700:hover { background-color: #cbd5e1 !important; } html:not(.dark) .hover\:bg-slate-600:hover { background-color: #94a3b8 !important; } html:not(.dark) .hover\:bg-slate-800\/40:hover { background-color: rgba(226,232,240,0.6) !important; } html:not(.dark) .hover\:bg-slate-800\/30:hover { background-color: rgba(226,232,240,0.5) !important; } /* ── Text colours ───────────────────────────────────────────────────── */ /* Mapping principle: preserve the dark→bright spectrum but bumped UP for * legibility on a white/light background. Lowest tiers (600/700) are still * muted but always readable, never invisible. */ html:not(.dark) .text-white { color: #0f172a !important; } html:not(.dark) .text-slate-100 { color: #0f172a !important; } html:not(.dark) .text-slate-200 { color: #1e293b !important; } html:not(.dark) .text-slate-300 { color: #334155 !important; } html:not(.dark) .text-slate-400 { color: #475569 !important; } html:not(.dark) .text-slate-500 { color: #475569 !important; } html:not(.dark) .text-slate-600 { color: #64748b !important; } html:not(.dark) .text-slate-700 { color: #94a3b8 !important; } /* Hover-text colours referenced in inline