/* ── Shared theme polish + dark mode (toggled via .dark on ) ─────────── Overrides the common Tailwind utilities used across the demo so we get a cohesive dark theme without rewriting every class in the markup. */ /* Smooth transitions when toggling */ body, .bg-white, .card, [class*="bg-slate-"], [class*="border-slate-"] { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* Nicer focus ring (both themes) */ input:focus, select:focus, textarea:focus { outline: none; } /* ════════════════════ DARK MODE ════════════════════ */ html.dark { color-scheme: dark; } /* Page background (beats body's own bg-slate-100 utility) */ html.dark body.bg-slate-100 { background-color: #0b1220 !important; } /* Surfaces */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #334155 !important; } /* Text */ html.dark .text-slate-900, html.dark .text-slate-800 { color: #f1f5f9 !important; } html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400, html.dark .text-slate-300 { color: #64748b !important; } /* Borders */ html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #334155 !important; } /* Tinted backgrounds → translucent so they read on dark cards */ html.dark .bg-violet-50 { background-color: rgba(139,92,246,.14) !important; } html.dark .bg-violet-100 { background-color: rgba(139,92,246,.22) !important; } html.dark .bg-blue-50 { background-color: rgba(59,130,246,.14) !important; } html.dark .bg-blue-100 { background-color: rgba(59,130,246,.22) !important; } html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; } html.dark .bg-emerald-100{ background-color: rgba(16,185,129,.22) !important; } html.dark .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; } html.dark .bg-amber-100 { background-color: rgba(245,158,11,.22) !important; } html.dark .bg-teal-100 { background-color: rgba(20,184,166,.22) !important; } html.dark .bg-sky-100 { background-color: rgba(56,189,248,.22) !important; } html.dark .bg-red-50 { background-color: rgba(239,68,68,.14) !important; } html.dark .border-violet-200 { border-color: rgba(139,92,246,.35) !important; } html.dark .border-amber-200 { border-color: rgba(245,158,11,.35) !important; } html.dark .border-red-200 { border-color: rgba(239,68,68,.35) !important; } /* Accent text lightened for contrast on dark */ html.dark .text-violet-700, html.dark .text-violet-600 { color: #c4b5fd !important; } html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #6ee7b7 !important; } html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600 { color: #fcd34d !important; } html.dark .text-blue-700, html.dark .text-blue-600 { color: #93c5fd !important; } html.dark .text-red-700, html.dark .text-red-600 { color: #fca5a5 !important; } /* Form fields */ html.dark input[type=text], html.dark input[type=password], html.dark .fld, html.dark select, html.dark textarea { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } html.dark input::placeholder { color: #64748b !important; } /* Highlight mark stays readable */ html.dark mark.hl { background: rgba(139,92,246,.32) !important; color: #ede9fe !important; } /* Hover backgrounds in dark mode — Tailwind's hover: variants aren't recolored above, so without these a light hover bg lands under light text (invisible). */ html.dark .hover\:bg-slate-50:hover { background-color: #273449 !important; } html.dark .hover\:bg-slate-100:hover { background-color: #3a4658 !important; } html.dark .hover\:bg-slate-200:hover { background-color: #475569 !important; } html.dark .hover\:bg-violet-50:hover { background-color: rgba(139,92,246,.20) !important; } html.dark .hover\:bg-violet-100:hover { background-color: rgba(139,92,246,.30) !important; } html.dark .hover\:bg-white:hover { background-color: #273449 !important; } /* Settings page custom classes (.card/.lbl/.row defined inline there) */ html.dark .card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .lbl { color: #94a3b8 !important; } html.dark .row { border-bottom-color: #334155 !important; }