/* * Light mode overrides. * Templates use dark-first classes (bg-zinc-900, text-white, etc). * When .dark is NOT on , swap to light palette. * Uses !important to override Tailwind @layer utilities. */ html:not(.dark) body { background-color: #f9fafb !important; color: #374151 !important; } /* Card backgrounds */ html:not(.dark) .bg-zinc-900 { background-color: #fff !important; } html:not(.dark) .bg-zinc-950 { background-color: #f9fafb !important; } html:not(.dark) .bg-zinc-900\/50 { background-color: rgba(249,250,251,0.8) !important; } html:not(.dark) .bg-zinc-800 { background-color: #f3f4f6 !important; } html:not(.dark) .bg-zinc-800\/90 { background-color: rgba(243,244,246,0.9) !important; } html:not(.dark) .bg-zinc-800\/50 { background-color: rgba(243,244,246,0.5) !important; } html:not(.dark) .bg-\[\#0c0c0b\] { background-color: #f9fafb !important; } /* Borders */ html:not(.dark) .border-zinc-800 { border-color: #e5e7eb !important; } html:not(.dark) .border-zinc-800\/50 { border-color: rgba(229,231,235,0.5) !important; } html:not(.dark) .border-zinc-700 { border-color: #d1d5db !important; } html:not(.dark) .border-zinc-200 { border-color: #e5e7eb !important; } /* Text — override dark-first text colors for light mode. Preserve white text on colored backgrounds (buttons, badges, pagination). */ html:not(.dark) .text-white:not(.bg-blue-600):not(.bg-blue-500):not(.bg-red-600):not(.bg-red-500) { color: #111827 !important; } html:not(.dark) .text-zinc-300 { color: #374151 !important; } html:not(.dark) .text-zinc-400 { color: #4b5563 !important; } html:not(.dark) .text-zinc-500 { color: #6b7280 !important; } html:not(.dark) .text-zinc-200 { color: #374151 !important; } html:not(.dark) .text-\[\#a5a39d\] { color: #374151 !important; } /* Hover */ html:not(.dark) .hover\:text-white:hover:not(.bg-blue-600):not(.bg-blue-500):not(.bg-red-600):not(.bg-red-500) { color: #111827 !important; } html:not(.dark) .hover\:text-zinc-300:hover { color: #374151 !important; } html:not(.dark) .hover\:bg-zinc-800:hover { background-color: #f3f4f6 !important; } html:not(.dark) .hover\:bg-zinc-800\/50:hover { background-color: rgba(243,244,246,0.5) !important; } html:not(.dark) .hover\:border-zinc-600:hover { border-color: #9ca3af !important; } html:not(.dark) .hover\:border-zinc-700:hover { border-color: #d1d5db !important; } html:not(.dark) .hover\:border-zinc-700:hover { border-color: #d1d5db !important; } /* Focus */ html:not(.dark) .focus\:text-white:focus:not(.bg-blue-600):not(.bg-blue-500) { color: #111827 !important; } /* Badge / accent text — darken -400 colors for sufficient contrast on light backgrounds. Dark mode uses -400 (bright on dark bg); light mode needs -700 (dark on light bg). */ html:not(.dark) .text-green-400 { color: #15803d !important; } /* green-700, ratio ≥4.5 on white/green-50 */ html:not(.dark) .text-blue-400 { color: #1d4ed8 !important; } /* blue-700, ratio ≥4.5 on white/blue-50 */ html:not(.dark) .text-purple-400 { color: #7e22ce !important; } /* purple-700, ratio ≥4.5 on white/purple-50 */ html:not(.dark) .text-emerald-400 { color: #047857 !important; } /* emerald-700, ratio ≥4.5 on white/emerald-50 */ html:not(.dark) .hover\:text-blue-300:hover { color: #1e40af !important; } /* blue-800 */ /* Inputs */ html:not(.dark) .placeholder-zinc-500::placeholder { color: #9ca3af !important; } html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea { background-color: #f9fafb !important; border-color: #d1d5db !important; color: #111827 !important; } html:not(.dark) .bg-zinc-500\/20 { background-color: rgba(156,163,175,0.15) !important; } html:not(.dark) .bg-blue-500\/20 { background-color: rgba(37,99,235,0.12) !important; }