/* ============================================================ EmployHub — Light theme override layer. Active whenever does NOT have the `.dark` class. Hand-authored because the app's Tailwind build is dark-only. Scoped to html:not(.dark) so dark mode is 100% untouched. ============================================================ */ /* Alpine x-cloak — hide elements until Alpine initialises */ [x-cloak] { display: none !important; } /* ---- Surfaces ---- */ html:not(.dark) body { background-color: #eef2f6 !important; } html:not(.dark) .bg-surface { background-color: #eef2f6 !important; } html:not(.dark) .bg-surface-card { background-color: #ffffff !important; } html:not(.dark) .bg-surface-raised { background-color: #f1f5f9 !important; } html:not(.dark) .bg-surface-border { background-color: #e2e8f0 !important; } html:not(.dark) .border-surface-border, html:not(.dark) .border-surface { border-color: #e2e8f0 !important; } /* Card surfaces (glass + bento tiles) become solid white cards */ html:not(.dark) .glass, html:not(.dark) .bento-tile { background-color: #ffffff !important; border-color: #e6eaf1 !important; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06) !important; backdrop-filter: none !important; } html:not(.dark) .bento-tile:hover { border-color: rgba(58,95,255,.35) !important; box-shadow: 0 2px 8px rgba(58,95,255,.12) !important; } /* ---- Text ---- */ html:not(.dark) .text-white, html:not(.dark) .text-slate-100 { 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: #64748b !important; } html:not(.dark) .text-slate-500 { color: #64748b !important; } html:not(.dark) .text-slate-600 { color: #94a3b8 !important; } /* The (otherwise-undefined) numbered surface text shades, mapped for light */ html:not(.dark) .text-surface-200 { color: #1e293b !important; } html:not(.dark) .text-surface-300 { color: #334155 !important; } html:not(.dark) .text-surface-400 { color: #475569 !important; } html:not(.dark) .text-surface-500 { color: #64748b !important; } html:not(.dark) .text-surface-600 { color: #94a3b8 !important; } html:not(.dark) .text-surface-700 { color: #cbd5e1 !important; } /* Keep white text on coloured accent backgrounds (logos, badges, buttons) */ html:not(.dark) [class*="bg-aurora"] .text-white, html:not(.dark) [class*="bg-aurora"].text-white, html:not(.dark) .btn-primary .text-white { color: #ffffff !important; } /* ---- Components ---- */ html:not(.dark) .nav-item { color: #475569 !important; } html:not(.dark) .nav-item:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } html:not(.dark) .nav-item.active { color: #2244e8 !important; background-color: rgba(58,95,255,.08) !important; border-color: rgba(58,95,255,.2) !important; } html:not(.dark) .btn-secondary { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html:not(.dark) .btn-secondary:hover { background-color: #f8fafc !important; } html:not(.dark) .btn-ghost { color: #475569 !important; } html:not(.dark) .btn-ghost:hover { color: #0f172a !important; background-color: #f1f5f9 !important; } html:not(.dark) .input { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html:not(.dark) .input::placeholder { color: #94a3b8 !important; } html:not(.dark) .label { color: #64748b !important; } /* Topbar / sidebar translucent surfaces → solid light */ html:not(.dark) header.bg-surface-card\/80, html:not(.dark) .bg-surface-card\/80, html:not(.dark) .bg-surface-card\/95 { background-color: rgba(255,255,255,.9) !important; } /* Guest (login/register) aurora background → soft light gradient */ html:not(.dark) .aurora-bg { background: linear-gradient(135deg, #eef2f6 0%, #e8edfa 40%, #eef0fb 70%, #eef2f6 100%) !important; } /* Tone down the ambient aurora orbs on light so they stay subtle */ html:not(.dark) body > .fixed.inset-0.pointer-events-none > div { opacity: .05 !important; } /* Mobile bottom-nav translucent surface */ html:not(.dark) nav.bg-surface-card\/95 { background-color: rgba(255,255,255,.95) !important; }