/* ============================================ Dark Mode Overrides The public site is built with Tailwind utility classes (bg-gray--50, text-gray--900, bg-white, ...). Rather than rewriting every template, we override those utilities when the element carries the `dark` class. Specificity is raised with the `html.dark` prefix and `!important` guarantees the override wins over the Tailwind Play CDN injected styles. ============================================ */ /* ---- Base page ---- */ html.dark body { background-color: #0f172a !important; /* slate-900 */ color: #f1f5f9 !important; /* slate-100 */ } /* ---- Surfaces ---- */ html.dark .bg-gray-50 { background-color: #0f172a !important; } html.dark .bg-gray-100 { background-color: #1e293b !important; } /* slate-800 */ html.dark .bg-white { background-color: #1e293b !important; } /* ---- Text ---- */ html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #f1f5f9 !important; } html.dark .text-gray-700 { color: #e2e8f0 !important; } html.dark .text-gray-600 { color: #cbd5e1 !important; } html.dark .text-gray-500 { color: #94a3b8 !important; } html.dark .text-gray-400 { color: #94a3b8 !important; } /* ---- Borders ---- */ html.dark .border-gray-100 { border-color: #334155 !important; } /* slate-700 */ html.dark .border-gray-200 { border-color: #334155 !important; } html.dark .border-gray-300 { border-color: #475569 !important; } /* ---- Brand tints ---- */ html.dark .bg-primary-50 { background-color: #172554 !important; } /* primary-950 */ html.dark .text-primary-600 { color: #60a5fa !important; } html.dark .text-primary-700 { color: #93c5fd !important; } html.dark .bg-secondary-100 { background-color: #422006 !important; } /* secondary-950 */ html.dark .text-secondary-600 { color: #fcd34d !important; } html.dark .bg-accent-100 { background-color: #052e16 !important; } /* accent-950 */ html.dark .text-accent-600 { color: #4ade80 !important; } /* ---- Status / alert badges ---- */ html.dark .bg-green-100 { background-color: #052e16 !important; } html.dark .text-green-800 { color: #bbf7d0 !important; } html.dark .bg-blue-100 { background-color: #172554 !important; } html.dark .text-blue-800 { color: #bfdbfe !important; } html.dark .bg-indigo-100 { background-color: #1e1b4b !important; } html.dark .text-indigo-800 { color: #c7d2fe !important; } html.dark .bg-red-100 { background-color: #450a0a !important; } html.dark .text-red-800 { color: #fecaca !important; } html.dark .bg-yellow-100 { background-color: #422006 !important; } html.dark .text-yellow-800 { color: #fde68a !important; } html.dark .bg-gray-200 { background-color: #334155 !important; } /* ---- Alert boxes (login error / flash success) ---- */ html.dark .bg-red-50 { background-color: #450a0a !important; border-color: #7f1d1d !important; color: #fecaca !important; } html.dark .bg-green-50 { background-color: #052e16 !important; border-color: #166534 !important; color: #bbf7d0 !important; } /* ---- Form controls ---- */ html.dark input:not([type=checkbox]):not([type=radio]), html.dark textarea, html.dark select { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* ---- Custom header / hero classes (defined in includes/header.php) ---- */ html.dark .header-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important; } html.dark .hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%) !important; } html.dark .checkout-bar { background: #1e293b !important; border-top-color: #334155 !important; } /* ---- Theme toggle button icon switching ---- */ .theme-toggle .icon-sun { display: none; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; }