/* Light theme overrides — applied when */
html.light {
color-scheme: light;
}
/* Backgrounds */
html.light .bg-gray-950 { background-color: #f8fafc !important; }
html.light .bg-gray-900 { background-color: #ffffff !important; }
html.light .bg-gray-850 { background-color: #f1f5f9 !important; }
html.light .bg-gray-800 { background-color: #f1f5f9 !important; }
html.light .bg-gray-700 { background-color: #e2e8f0 !important; }
html.light .bg-gray-600 { background-color: #cbd5e1 !important; }
/* Text */
html.light .text-gray-100 { color: #0f172a !important; }
html.light .text-gray-200 { color: #1e293b !important; }
html.light .text-gray-300 { color: #334155 !important; }
html.light .text-gray-400 { color: #475569 !important; }
html.light .text-gray-500 { color: #64748b !important; }
html.light .text-gray-600 { color: #64748b !important; }
html.light .text-gray-700 { color: #94a3b8 !important; }
html.light .text-white { color: #0f172a !important; }
/* Hover overrides */
html.light .hover\:bg-gray-800:hover,
html.light .hover\:bg-gray-800\/50:hover,
html.light .hover\:bg-gray-700:hover,
html.light .hover\:bg-gray-700\/50:hover,
html.light .hover\:bg-gray-850:hover {
background-color: #f1f5f9 !important;
}
html.light .hover\:text-white:hover { color: #0f172a !important; }
html.light .hover\:text-red-400:hover { color: #b91c1c !important; }
html.light .hover\:text-gray-300:hover { color: #1e293b !important; }
/* Borders */
html.light .border-gray-800 { border-color: #e2e8f0 !important; }
html.light .border-gray-700 { border-color: #cbd5e1 !important; }
html.light .border-gray-600 { border-color: #94a3b8 !important; }
/* Inputs */
html.light input,
html.light select,
html.light textarea {
background-color: #ffffff !important;
color: #0f172a !important;
border-color: #cbd5e1 !important;
}
/* Card / panel surfaces (dark gradient cards stay coloured but lighter) */
html.light .from-emerald-950 { --tw-gradient-from: #ecfdf5 !important; }
html.light .to-emerald-900\/40 { --tw-gradient-to: rgba(167, 243, 208, 0.4) !important; }
html.light .from-blue-950 { --tw-gradient-from: #eff6ff !important; }
html.light .to-blue-900\/40 { --tw-gradient-to: rgba(191, 219, 254, 0.4) !important; }
html.light .from-amber-950 { --tw-gradient-from: #fffbeb !important; }
html.light .to-amber-900\/40 { --tw-gradient-to: rgba(253, 230, 138, 0.4) !important; }
html.light .from-purple-950 { --tw-gradient-from: #faf5ff !important; }
html.light .to-purple-900\/40 { --tw-gradient-to: rgba(216, 180, 254, 0.4) !important; }
html.light .from-red-950 { --tw-gradient-from: #fef2f2 !important; }
html.light .to-red-900\/40 { --tw-gradient-to: rgba(254, 202, 202, 0.4) !important; }
html.light .from-yellow-950 { --tw-gradient-from: #fefce8 !important; }
html.light .to-yellow-900\/40 { --tw-gradient-to: rgba(254, 240, 138, 0.4) !important; }
html.light .from-orange-950 { --tw-gradient-from: #fff7ed !important; }
html.light .to-orange-900\/40 { --tw-gradient-to: rgba(254, 215, 170, 0.4) !important; }
html.light .border-yellow-800 { border-color: #ca8a04 !important; }
html.light .border-orange-800 { border-color: #c2410c !important; }
html.light .border-emerald-800 { border-color: #10b981 !important; }
html.light .border-blue-800 { border-color: #3b82f6 !important; }
html.light .border-amber-800 { border-color: #f59e0b !important; }
html.light .border-purple-800 { border-color: #a855f7 !important; }
html.light .border-red-800 { border-color: #ef4444 !important; }
/* Sidebar */
html.light aside.bg-gray-900 { background-color: #ffffff !important; border-right-color: #e2e8f0 !important; }
html.light aside.border-gray-800 { border-color: #e2e8f0 !important; }
/* Body */
html.light body.bg-gray-950 { background-color: #f8fafc !important; }
html.light body { color: #0f172a !important; }
/* Demo banner — keep amber on light bg */
html.light #demo-banner { background-color: #f59e0b !important; color: #1e293b !important; }
/* Pills / badges — convert dark variants to light tint */
html.light .bg-green-900,
html.light .bg-green-950,
html.light .bg-emerald-900,
html.light .bg-emerald-950 {
background-color: #d1fae5 !important;
}
html.light .text-green-300,
html.light .text-green-400,
html.light .text-emerald-300,
html.light .text-emerald-400 {
color: #047857 !important;
}
html.light .bg-blue-900,
html.light .bg-blue-950 {
background-color: #dbeafe !important;
}
html.light .text-blue-300,
html.light .text-blue-400 {
color: #1d4ed8 !important;
}
html.light .bg-purple-900,
html.light .bg-purple-950 {
background-color: #ede9fe !important;
}
html.light .text-purple-300,
html.light .text-purple-400 {
color: #6d28d9 !important;
}
html.light .bg-red-900,
html.light .bg-red-950 {
background-color: #fee2e2 !important;
}
html.light .text-red-300,
html.light .text-red-400 {
color: #b91c1c !important;
}
html.light .bg-orange-900,
html.light .bg-orange-950 {
background-color: #ffedd5 !important;
}
html.light .text-orange-300,
html.light .text-orange-400 {
color: #c2410c !important;
}
html.light .bg-amber-900,
html.light .bg-amber-950,
html.light .bg-yellow-900,
html.light .bg-yellow-950 {
background-color: #fef3c7 !important;
}
html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-yellow-300,
html.light .text-yellow-400 {
color: #b45309 !important;
}
/* Table headers (uppercase labels) — use mid-grey not white-on-grey */
html.light th,
html.light thead {
background-color: #f1f5f9 !important;
color: #64748b !important;
}
/* Plain uppercase tracking labels on cards */
html.light .uppercase.tracking-wide,
html.light .uppercase.tracking-wider {
color: #64748b !important;
}
/* Page headers (h1/h2) — ensure dark text */
html.light h1, html.light h2, html.light h3 {
color: #0f172a !important;
}