/* ───────────────────────────────────────────────────────────── Light theme overrides. Activated by setting `data-theme="light"` on . Dark mode is the default — no overrides needed. ───────────────────────────────────────────────────────────── */ html[data-theme="light"] { /* Surfaces */ --bg-deep: hsl(0 0% 98%); --bg-base: hsl(0 0% 96%); --bg-surface: hsl(0 0% 100%); --bg-card: hsl(0 0% 100%); --bg-card-hover: hsl(0 0% 96%); --bg-sidebar: hsl(0 0% 97%); /* Borders */ --border: hsl(217 15% 86%); --border-glow: hsla(264 65% 49% / 0.25); /* Text */ --text: hsl(217 32% 12%); --text-dim: hsl(215 15% 40%); --text-muted: hsl(217 15% 78%); /* Brand purple — keep, but the lighter glow alpha works better on white */ --primary-glow: hsla(264 65% 55% / 0.35); color-scheme: light; } /* ─── Body backdrop ──────────────────────────────────────── */ html[data-theme="light"] body { background: var(--bg-deep); } html[data-theme="light"] body::before { background: radial-gradient(ellipse 80% 60% at 20% 10%, hsla(264 65% 49% / 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, hsla(264 65% 49% / 0.05) 0%, transparent 60%); } /* Grid pattern: keep visible by drawing dark lines instead of using --text-muted */ html[data-theme="light"] body::after { background-image: linear-gradient(hsl(217 20% 30%) 1px, transparent 1px), linear-gradient(90deg, hsl(217 20% 30%) 1px, transparent 1px); opacity: 0.05; } /* ─── Card gradients (hardcoded dark hsla → light equivalents) ─── */ html[data-theme="light"] .integration-card, html[data-theme="light"] .stat-card, html[data-theme="light"] .brand-card, html[data-theme="light"] .cfg-card, html[data-theme="light"] .agent-card, html[data-theme="light"] .sched-card, html[data-theme="light"] .sched-modal, html[data-theme="light"] .task-form, html[data-theme="light"] .task-card, html[data-theme="light"] .vt-card, html[data-theme="light"] .report-card, html[data-theme="light"] .seo-card, html[data-theme="light"] .briefing { background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 97%) 100%); } /* Settings page: text inputs inside .cfg-card use var(--bg-deep) which is dark-mode black. Force a light surface in light mode. */ html[data-theme="light"] .cfg-input { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Form inputs styled with hardcoded dark gradients */ html[data-theme="light"] .login-input, html[data-theme="light"] .form-input, html[data-theme="light"] .form-select, html[data-theme="light"] .form-textarea, html[data-theme="light"] .sched-input, html[data-theme="light"] .sched-select { background: hsl(0 0% 100%) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Mobile sidebar overlay backdrop */ html[data-theme="light"] .sidebar-overlay { background: hsla(0 0% 0% / 0.25) !important; } /* ─── Inline-styled hardcoded dark surfaces ───────── Many pages render cards/tiles with inline `style="background:hsl(0 0% 4%)"` or dark gradients. Attribute substring selectors + !important rewrite them for light mode without touching the markup. */ html[data-theme="light"] [style*="hsl(0 0% 0%)"], html[data-theme="light"] [style*="hsl(0 0% 2%)"], html[data-theme="light"] [style*="hsl(0 0% 3%)"], html[data-theme="light"] [style*="hsl(0 0% 4%)"], html[data-theme="light"] [style*="hsl(0 0% 5%)"], html[data-theme="light"] [style*="hsl(0 0% 6%)"], html[data-theme="light"] [style*="hsl(0 0% 7%)"], html[data-theme="light"] [style*="hsl(0 0% 8%)"], html[data-theme="light"] [style*="hsla(0 0% 0%"], html[data-theme="light"] [style*="hsla(0 0% 2%"], html[data-theme="light"] [style*="hsla(0 0% 3%"], html[data-theme="light"] [style*="hsla(0 0% 4%"], html[data-theme="light"] [style*="hsla(0 0% 5%"], html[data-theme="light"] [style*="hsla(0 0% 6%"], html[data-theme="light"] [style*="hsla(0 0% 7%"], html[data-theme="light"] [style*="hsla(0 0% 8%"] { background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 97%) 100%) !important; } /* ─── Isometric Office widget ─────────────────────── */ html[data-theme="light"] .iso-wrap { background: radial-gradient(ellipse 70% 55% at 50% 45%, hsla(264 65% 49% / 0.08) 0%, transparent 65%), linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 96%) 100%) !important; } html[data-theme="light"] .iso-wrap::before { background-image: linear-gradient(hsla(264 65% 49% / 0.12) 1px, transparent 1px), linear-gradient(90deg, hsla(264 65% 49% / 0.12) 1px, transparent 1px) !important; } html[data-theme="light"] .iso-scene .floor-tile { fill: hsla(217 15% 92% / 0.7); stroke: hsla(264 65% 49% / 0.22); } html[data-theme="light"] .iso-scene .floor-tile.hero { fill: hsla(142 76% 36% / 0.08); stroke: hsla(142 76% 36% / 0.4); } /* Desks / monitors / chairs — iso-office.css hardcodes near-black hex fills. Override to light-grey surfaces so stations are visible on white. */ html[data-theme="light"] .station .desk-top { fill: hsl(217 15% 88%); stroke: hsl(217 15% 70%); } html[data-theme="light"] .station .desk-front { fill: hsl(217 15% 78%); stroke: hsl(217 15% 65%); } html[data-theme="light"] .station .desk-side { fill: hsl(217 15% 82%); stroke: hsl(217 15% 68%); } html[data-theme="light"] .station .monitor-back { fill: hsl(217 20% 22%); } html[data-theme="light"] .station .monitor-side { fill: hsl(217 20% 30%); } html[data-theme="light"] .station .monitor-top { fill: hsl(217 20% 26%); stroke: hsl(217 20% 18%); } html[data-theme="light"] .station .chair { fill: hsl(217 15% 70%); stroke: hsl(217 15% 55%); } /* Nameplate background — hardcoded rgba(0,0,0,0.82) is unreadable on white */ html[data-theme="light"] .nameplate .np-bg { fill: hsla(0 0% 100% / 0.95); stroke: var(--border); } html[data-theme="light"] .nameplate:hover .np-bg { fill: hsl(0 0% 100%); stroke: var(--np-color, var(--primary)); } html[data-theme="light"] .nameplate .np-name { fill: var(--text); } html[data-theme="light"] .nameplate .np-role { fill: var(--text-dim); } /* Idle status dot uses a dark grey that disappears on white */ html[data-theme="light"] .nameplate .status-dot.idle { fill: hsl(215 15% 70%); stroke: hsl(215 15% 55%); } /* Topbar label colors */ html[data-theme="light"] .iso-topbar-left { color: var(--text-dim); } /* Chief (orchestrator) base — translucent purple stays fine, but the orb core is near-white which vanishes; bump to brand purple for contrast. */ html[data-theme="light"] .chief .chief-orb-core { fill: hsl(264 65% 55%); } html[data-theme="light"] .chief .chief-name { fill: hsl(264 65% 35%); } html[data-theme="light"] .chief .chief-title { fill: hsl(264 30% 40%); } /* Login card uses similar gradient inline */ html[data-theme="light"] .login-card, html[data-theme="light"] [class*="login"] form { background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 97%) 100%); } /* Chat input bar */ html[data-theme="light"] .chat-input-wrap, html[data-theme="light"] .composer { background: linear-gradient(180deg, hsla(0 0% 97% / 0.95), hsl(0 0% 100%)); } /* ─── Form inputs ────────────────────────────────────────── */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="search"], html[data-theme="light"] input[type="url"], html[data-theme="light"] textarea, html[data-theme="light"] select { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--text-dim); opacity: 0.7; } /* Code-ish elements */ html[data-theme="light"] code { background: hsl(217 30% 94%); color: hsl(217 32% 20%); padding: 1px 5px; border-radius: 4px; } /* Sidebar active/hover states use very low alpha purple — bump for readability */ html[data-theme="light"] .nav-item:hover { background: hsla(264 65% 49% / 0.08); } html[data-theme="light"] .nav-item.active { background: hsla(264 65% 49% / 0.12); box-shadow: 0 0 16px hsla(264 65% 49% / 0.15); } /* Section header gradient divider needs darker fade */ html[data-theme="light"] .section-header::after { background: linear-gradient(90deg, var(--border), transparent); } /* Gradient text on headings — purple gradient stays readable on white */ /* Buttons with raw dark hover styles */ html[data-theme="light"] button[style*="background:var(--bg-deep)"], html[data-theme="light"] button[style*="background: var(--bg-deep)"] { background: var(--bg-surface) !important; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-track { background: hsl(0 0% 94%); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: hsl(217 15% 78%); border-radius: 6px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: hsl(217 15% 65%); } /* ─── SEO page sub-elements ───────────────────────────── seo.html uses hardcoded hsl(0 0% N%) inside its