/*
* HatchOS Light Theme
* Activated when is set.
* Uses !important on custom properties to beat :root declarations.
* Direct element overrides for hardcoded colors in shared-nav.
*/
/* ── CSS Custom Property Overrides ─────────────────────────────── */
html[data-theme="light"] {
--ink: #f0f4f8 !important;
--steel: #ffffff !important;
--steel-light: #f8fafc !important;
--steel2: #ffffff !important;
--slate: #cbd5e1 !important;
--mist: #64748b !important;
--cloud: #334155 !important;
--white: #0f172a !important;
/* --accent alias so light-theme rules using var(--accent) resolve */
--accent: #184A9E !important;
/* Signal/accent colors stay the same — brand blue looks fine on light */
--signal: #184A9E !important;
--signal-dim: rgba(24, 74, 158, 0.1) !important;
--signal-glow: rgba(24, 74, 158, 0.2) !important;
/* Ocean/green/red/purple — keep vivid, just soften dim variants */
--ocean: #0284c7 !important;
--ocean-dim: rgba(2, 132, 199, 0.1) !important;
--green: #059669 !important;
--green-dim: rgba(5, 150, 105, 0.1) !important;
--red: #dc2626 !important;
--red-dim: rgba(220, 38, 38, 0.1) !important;
--purple: #7c3aed !important;
--purple-dim: rgba(124, 58, 237, 0.1) !important;
}
/* ── Main nav bar ────────────────────────────────────────────── */
html[data-theme="light"] #shared-nav {
background: rgba(255, 255, 255, 0.97) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .sn-logo {
color: #0f172a !important;
}
html[data-theme="light"] .sn-link {
color: #64748b !important;
}
html[data-theme="light"] .sn-link:hover {
color: #0f172a !important;
background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .sn-link.active {
color: #184A9E !important;
background: rgba(24, 74, 158, 0.08) !important;
}
/* Notification button */
html[data-theme="light"] .sn-notif-btn {
background: rgba(0, 0, 0, 0.04) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: #64748b !important;
}
html[data-theme="light"] .sn-notif-btn:hover {
background: rgba(0, 0, 0, 0.08) !important;
color: #0f172a !important;
}
/* User button */
html[data-theme="light"] .sn-user-btn {
background: rgba(0, 0, 0, 0.04) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: #64748b !important;
}
html[data-theme="light"] .sn-user-btn:hover,
html[data-theme="light"] .sn-user-btn.open {
background: rgba(0, 0, 0, 0.08) !important;
color: #0f172a !important;
}
html[data-theme="light"] .sn-chevron {
color: #94a3b8 !important;
}
/* Notification dropdown */
html[data-theme="light"] .sn-notif-dropdown {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .sn-notif-header {
border-bottom-color: rgba(0, 0, 0, 0.07) !important;
color: #0f172a !important;
}
html[data-theme="light"] .sn-notif-item {
border-bottom-color: rgba(0, 0, 0, 0.05) !important;
color: #64748b !important;
}
html[data-theme="light"] .sn-notif-item:hover {
background: rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] .sn-notif-item.unread {
color: #334155 !important;
background: rgba(24, 74, 158, 0.05) !important;
}
html[data-theme="light"] .sn-notif-item .sn-notif-time {
color: #94a3b8 !important;
}
html[data-theme="light"] .sn-notif-empty {
color: #94a3b8 !important;
}
html[data-theme="light"] .sn-notif-footer {
border-top-color: rgba(0, 0, 0, 0.07) !important;
}
/* User dropdown */
html[data-theme="light"] .sn-user-dropdown {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .sn-dd-section-label {
color: #94a3b8 !important;
}
html[data-theme="light"] .sn-dd-item {
color: #4b5563 !important;
}
html[data-theme="light"] .sn-dd-item:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: #0f172a !important;
}
html[data-theme="light"] .sn-dd-item.danger {
color: #dc2626 !important;
}
html[data-theme="light"] .sn-dd-item.danger:hover {
background: rgba(220, 38, 38, 0.08) !important;
}
html[data-theme="light"] .sn-dd-divider {
background: rgba(0, 0, 0, 0.07) !important;
}
/* Dispatch sub-nav */
html[data-theme="light"] #sn-dispatch-sub {
background: rgba(240, 244, 248, 0.97) !important;
border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}
html[data-theme="light"] .sn-sub-link {
color: #64748b !important;
}
html[data-theme="light"] .sn-sub-link:hover {
color: #0f172a !important;
background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .sn-sub-link.active {
color: #184A9E !important;
background: rgba(24, 74, 158, 0.08) !important;
}
/* Change password modal */
html[data-theme="light"] .sn-modal-overlay {
background: rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="light"] .sn-modal {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .sn-modal h3 {
color: #0f172a !important;
}
html[data-theme="light"] .sn-modal-field label {
color: #64748b !important;
}
html[data-theme="light"] .sn-modal-field input {
background: rgba(0, 0, 0, 0.04) !important;
border-color: rgba(0, 0, 0, 0.12) !important;
color: #0f172a !important;
}
html[data-theme="light"] .sn-modal-field input::placeholder {
color: #94a3b8 !important;
}
html[data-theme="light"] .sn-modal-btn.secondary {
background: rgba(0, 0, 0, 0.06) !important;
color: #64748b !important;
}
html[data-theme="light"] .sn-modal-btn.secondary:hover {
background: rgba(0, 0, 0, 0.1) !important;
color: #0f172a !important;
}
/* ── Generic common element overrides ───────────────────────── */
/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-track {
background: #f1f5f9 !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: #94a3b8 !important;
}
/* Table borders commonly used across pages */
html[data-theme="light"] table {
border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] th,
html[data-theme="light"] td {
border-color: rgba(0, 0, 0, 0.06) !important;
}
/* Inputs using CSS vars already (most pages) */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
color-scheme: light;
}
/* Native