/* ─── Shared light-mode overrides (all pages) ────────────────────── Companion to the page's own Tailwind setup. Loaded on every page; takes effect only when does NOT have the `dark` class. Pair with js/theme.js for the inline anti-FOUC + toggle handler. */ /* Base body + loader */ html:not(.dark) body { background-color: #f1f5f9; color: #0f172a; } html:not(.dark) #loader { background-color: #f1f5f9 !important; } /* Custom palette colors used as bg / border */ html:not(.dark) .bg-dark { background-color: #f1f5f9 !important; } html:not(.dark) .bg-dark-card { background-color: #ffffff !important; } html:not(.dark) .bg-slate-900 { background-color: #f8fafc !important; } html:not(.dark) .bg-slate-800 { background-color: #e2e8f0 !important; } html:not(.dark) .hover\:bg-slate-800:hover, html:not(.dark) .hover\:bg-slate-700:hover, html:not(.dark) .hover\:bg-dark:hover { background-color: #e2e8f0 !important; color: #0f172a !important; } html:not(.dark) .hover\:bg-dark-card:hover { background-color: #f8fafc !important; } html:not(.dark) .hover\:bg-dark\/40:hover { background-color: rgba(232, 238, 246, 0.7) !important; } html:not(.dark) .hover\:bg-dark\/50:hover { background-color: rgba(232, 238, 246, 0.75) !important; } html:not(.dark) .hover\:bg-dark\/60:hover { background-color: rgba(232, 238, 246, 0.85) !important; } html:not(.dark) .group:hover .group-hover\:bg-dark { background-color: #e2e8f0 !important; } html:not(.dark) .group:hover .group-hover\:text-white { color: #0f172a !important; } /* Alpha variants used for modal backdrops, blurred headers, and table-header tints. Tailwind generates bg-dark/XX as rgb(5 11 24 / X). We keep BACKDROPS dark (so modals still pop) but lighten the subtle bg-dark/40-60 tints used inside cards. */ html:not(.dark) .bg-dark\/40 { background-color: rgba(232, 238, 246, 0.6) !important; } html:not(.dark) .bg-dark\/50 { background-color: rgba(232, 238, 246, 0.7) !important; } html:not(.dark) .bg-dark\/60 { background-color: rgba(232, 238, 246, 0.75) !important; } html:not(.dark) .bg-dark\/80 { background-color: rgba(15, 23, 42, 0.45) !important; } html:not(.dark) .bg-dark\/85 { background-color: rgba(15, 23, 42, 0.5) !important; } html:not(.dark) .bg-dark\/90 { background-color: rgba(238, 242, 248, 0.92) !important; } html:not(.dark) .bg-dark\/95 { background-color: rgba(238, 242, 248, 0.95) !important; } html:not(.dark) .bg-dark\/98 { background-color: rgba(238, 242, 248, 0.97) !important; } html:not(.dark) .bg-dark-card\/50 { background-color: rgba(255, 255, 255, 0.7) !important; } /* Borders */ html:not(.dark) .border-dark-border { border-color: #e2e8f0 !important; } html:not(.dark) .border-dark { border-color: #f1f5f9 !important; } html:not(.dark) .border-y { border-color: #d4dce6 !important; } html:not(.dark) .border-slate-700 { border-color: #cbd5e1 !important; } html:not(.dark) .border-slate-800 { border-color: #d4dce6 !important; } html:not(.dark) .divide-dark-border > * + * { border-color: #d4dce6 !important; } /* Text scale — one slate step darker so body text stays readable on the lighter bg */ html:not(.dark) .text-white { 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: #64748b !important; } html:not(.dark) .text-slate-600 { color: #475569 !important; } html:not(.dark) .hover\:text-white:hover { color: #0f172a !important; } /* Headings */ html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 { color: #0f172a !important; } /* Brand accent shifts to cyan-600 for text/links — meets contrast on white. Buttons keep the bright accent because dark text on bright cyan still reads fine. */ html:not(.dark) .text-accent { color: #0891b2 !important; } html:not(.dark) a.text-accent:hover, html:not(.dark) .hover\:text-accent:hover { color: #0e7490 !important; } /* Form controls */ html:not(.dark) input[type='text'], html:not(.dark) input[type='email'], html:not(.dark) input[type='password'], html:not(.dark) input[type='url'], html:not(.dark) input[type='number'], html:not(.dark) input[type='search'], html:not(.dark) textarea, html:not(.dark) select { background-color: #ffffff !important; border-color: #d4dce6 !important; color: #0f172a !important; } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #94a3b8 !important; } html:not(.dark) input:focus, html:not(.dark) textarea:focus, html:not(.dark) select:focus { border-color: #0891b2 !important; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); } /* Cards / table-like surfaces get a soft shadow so they pop off the tinted bg. The `.bg-dark-card` remap above flips the bg to white; here we add depth. */ html:not(.dark) .bg-dark-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05); } /* Code editor block (used in hero on home page) stays dark in both themes so syntax highlighting reads correctly. */ html:not(.dark) .code-editor { background-color: #0D1526 !important; border-color: #1E2D4A !important; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.15); } html:not(.dark) .code-editor .bg-dark-card { background-color: #0D1526 !important; box-shadow: none; } html:not(.dark) .code-editor .bg-slate-900 { background-color: #050B18 !important; } html:not(.dark) .code-editor .bg-slate-800 { background-color: #1e293b !important; } html:not(.dark) .code-editor .border-dark-border, html:not(.dark) .code-editor .border-slate-800 { border-color: #1E2D4A !important; } html:not(.dark) .code-editor .font-mono { color: #cbd5e1 !important; } html:not(.dark) .code-editor .text-white { color: #f8fafc !important; } html:not(.dark) .code-editor .text-slate-300 { color: #cbd5e1 !important; } html:not(.dark) .code-editor .text-slate-500 { color: #64748b !important; } /* Scrollbar */ html:not(.dark) ::-webkit-scrollbar-track { background: #eef2f8; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ─── Status colors — bright -400 variants are unreadable on white; shift to -600 in light mode (applies to ALL Tailwind text-X-400 usages: badges, status pills, alerts, etc.) ─────────────────── */ html:not(.dark) .text-green-400 { color: #16a34a !important; } html:not(.dark) .text-red-400 { color: #dc2626 !important; } html:not(.dark) .text-amber-400 { color: #d97706 !important; } html:not(.dark) .text-blue-400 { color: #2563eb !important; } html:not(.dark) .text-yellow-400 { color: #ca8a04 !important; } html:not(.dark) .text-purple-400 { color: #9333ea !important; } html:not(.dark) .text-cyan-400 { color: #0891b2 !important; } /* ─── Semantic badges (license type, etc.) work in both modes ─── */ .badge-permanent { color: #4ade80; background-color: rgba(74, 222, 128, 0.1); } html:not(.dark) .badge-permanent { color: #16a34a; background-color: rgba(22, 163, 74, 0.12); } .badge-time { color: #fbbf24; background-color: rgba(251, 191, 36, 0.1); } html:not(.dark) .badge-time { color: #d97706; background-color: rgba(217, 119, 6, 0.12); } /* Theme toggle button — reusable styles so each page just needs the button HTML, no per-page CSS tweaks. */ .theme-toggle-btn { padding: 0.5rem; border-radius: 9999px; transition: background-color 0.15s, color 0.15s; color: #94a3b8; background-color: transparent; cursor: pointer; } .theme-toggle-btn:hover { background-color: #1e293b; color: #ffffff; } html:not(.dark) .theme-toggle-btn { color: #64748b; } html:not(.dark) .theme-toggle-btn:hover { background-color: #e2e8f0; color: #0f172a; }