/* MissionOS — Light theme overrides. Applied via [data-theme="light"] on . The dark cyan HUD is the primary design; light mode is a clean daytime variant that preserves the accent + semantic palette but flips surface/text. */ [data-theme="light"] { /* Surfaces */ --bg-0: #f4f6fb; --bg-1: #ffffff; --bg-2: #f1f5f9; --panel: rgba(255, 255, 255, 0.85); --panel-solid: #ffffff; --panel-raised: rgba(248, 250, 252, 0.95); --panel-border: rgba(15, 23, 42, 0.10); --panel-border-strong: rgba(15, 23, 42, 0.22); --divider: rgba(15, 23, 42, 0.07); /* Accent tints adjusted for light bg */ --cyan-soft: rgba(34, 211, 238, 0.10); --cyan-glow: rgba(8, 145, 178, 0.30); --accent-soft: rgba(34, 211, 238, 0.10); --accent-glow: rgba(8, 145, 178, 0.30); /* Text */ --fg: #0f172a; --fg-muted: #475569; --fg-dim: #94a3b8; } /* Body & global texture */ [data-theme="light"] body { background: radial-gradient(1200px 700px at 18% -10%, rgba(34, 211, 238, 0.10), transparent 60%), radial-gradient(1000px 600px at 95% 110%, rgba(59, 130, 246, 0.06), transparent 60%), var(--bg-0); color: var(--fg); } [data-theme="light"] body::before { background-image: linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px); mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* Scrollbars */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); } /* Shell chromes */ [data-theme="light"] .sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 251, 0.96)); border-right-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 246, 251, 0.6)); } [data-theme="light"] .rightrail { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(244, 246, 251, 0.95)); } /* Inputs & topbar widgets */ [data-theme="light"] .tb-command, [data-theme="light"] .tb-mobile-home, [data-theme="light"] .tb-bell, [data-theme="light"] .tb-theme, [data-theme="light"] .tb-avatar, [data-theme="light"] .sb-collapse { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 23, 42, 0.10); } [data-theme="light"] .sb-collapse { color: #64748b; } [data-theme="light"] .tb-mobile-home:hover, [data-theme="light"] .tb-mobile-home:focus-visible, [data-theme="light"] .sb-collapse:hover, [data-theme="light"] .sb-collapse:focus-visible { color: #0891b2; background: #ffffff; border-color: rgba(15, 23, 42, 0.18); } [data-theme="light"] .tb-command:focus-within { border-color: var(--accent); background: #ffffff; } [data-theme="light"] .tb-command .kbd { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } /* Sidebar items */ [data-theme="light"] .sb-instance, [data-theme="light"] .sb-core, [data-theme="light"] .panel, [data-theme="light"] .table-panel, [data-theme="light"] .kpi, [data-theme="light"] .agent-card, [data-theme="light"] .proj-card, [data-theme="light"] .wf-card, [data-theme="light"] .setting-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 14px -4px rgba(15, 23, 42, 0.06); } [data-theme="light"] .agent-card:hover, [data-theme="light"] .proj-card:hover, [data-theme="light"] .wf-card:hover { border-color: rgba(15, 23, 42, 0.18); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 6px 22px -6px rgba(15, 23, 42, 0.10); } [data-theme="light"] .panel-head, [data-theme="light"] .dt thead th { background: rgba(244, 246, 251, 0.7); border-bottom-color: rgba(15, 23, 42, 0.08); } /* Active sidebar pill */ [data-theme="light"] .sb-primary { background: rgba(34, 211, 238, 0.10); border-color: rgba(8, 145, 178, 0.25); } [data-theme="light"] .sb-primary.is-active { background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.06) 90%); border-color: rgba(8, 145, 178, 0.40); color: #0e7490; box-shadow: 0 0 14px -4px var(--accent-glow); } [data-theme="light"] .sb-item.is-active { color: #0891b2; background: var(--accent-soft); } /* Hero panel + topology */ [data-theme="light"] .hero { background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(34, 211, 238, 0.14), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(244, 246, 251, 0.95)); } [data-theme="light"] .topo-node, [data-theme="light"] .topo-link-label { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.10); color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 26px -18px rgba(15, 23, 42, 0.35); } [data-theme="light"] .topo-node:hover, [data-theme="light"] .topo-node.is-selected { border-color: rgba(8, 145, 178, 0.38); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 10px 26px -18px rgba(8, 145, 178, 0.45); } [data-theme="light"] .topo-node .node-badge { background: rgba(248, 250, 252, 0.88); border-color: rgba(15, 23, 42, 0.08); color: #475569; } [data-theme="light"] .orb-label { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.10); color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } [data-theme="light"] .topo-link { stroke: rgba(8, 145, 178, 0.32); } /* Agent cards, missions, etc */ [data-theme="light"] .section-filter, [data-theme="light"] .section-bar .filters { background: rgba(255, 255, 255, 0.86); border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } [data-theme="light"] .section-filter button, [data-theme="light"] .section-bar .filters button { color: #64748b; } [data-theme="light"] .section-filter button:hover, [data-theme="light"] .section-bar .filters button:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); } [data-theme="light"] .section-filter button.is-active, [data-theme="light"] .section-bar .filters button.is-active { color: #0891b2; background: rgba(34, 211, 238, 0.16); box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.16); } [data-theme="light"] .ac-mission { background: rgba(34, 211, 238, 0.06); border-color: rgba(15, 23, 42, 0.06); } [data-theme="light"] .badge { background: rgba(248, 250, 252, 0.82); border-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .ac-metric { background: rgba(244, 246, 251, 0.6); border-color: rgba(15, 23, 42, 0.06); } [data-theme="light"] .ac-metric-bar { background: rgba(15, 23, 42, 0.06); } [data-theme="light"] .ac-btn { background: rgba(248, 250, 252, 0.86); border-color: rgba(15, 23, 42, 0.08); color: #475569; } [data-theme="light"] .ac-btn:hover { background: #ffffff; border-color: rgba(15, 23, 42, 0.16); color: #0f172a; } [data-theme="light"] .ac-btn.primary { color: #0891b2; background: rgba(34, 211, 238, 0.12); border-color: rgba(8, 145, 178, 0.20); } [data-theme="light"] .ac-btn.primary:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(8, 145, 178, 0.28); } /* Mission queue / tasks */ [data-theme="light"] .mission:hover, [data-theme="light"] .todo:hover, [data-theme="light"] .dt tbody tr:hover { background: rgba(34, 211, 238, 0.04); } [data-theme="light"] .mission-progress-bar { background: rgba(15, 23, 42, 0.06); } /* Kanban */ [data-theme="light"] .kb-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } [data-theme="light"] .kb-card:hover { border-color: rgba(15, 23, 42, 0.16); } [data-theme="light"] .view-mode-toggle { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 23, 42, 0.08); } /* Right rail event icons */ [data-theme="light"] .event-icon { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } /* Log viewer */ [data-theme="light"] .log-viewer { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); } [data-theme="light"] .log-toolbar { background: rgba(244, 246, 251, 0.6); } [data-theme="light"] .log-search { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); } [data-theme="light"] .log-line:hover { background: rgba(34, 211, 238, 0.05); } [data-theme="light"] select { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.10) !important; } /* Dropdown menus (sidebar switcher, tweaks panel uses its own host) */ [data-theme="light"] .sb-instance-menu { background: linear-gradient(180deg, #ffffff, rgba(244, 246, 251, 0.98)); border-color: rgba(15, 23, 42, 0.16); box-shadow: 0 18px 36px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.05); } [data-theme="light"] .sb-instance-menu-row:hover { background: rgba(34, 211, 238, 0.06); } [data-theme="light"] .sb-instance-menu-icon { background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(59, 130, 246, 0.08)); border-color: rgba(15, 23, 42, 0.08); } /* Buttons */ [data-theme="light"] .btn { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.12); color: var(--fg); } [data-theme="light"] .btn:hover { background: #ffffff; border-color: rgba(15, 23, 42, 0.22); } [data-theme="light"] .btn.primary { color: #ffffff; background: #0891b2; border-color: #0891b2; box-shadow: 0 0 14px var(--accent-glow); } [data-theme="light"] .btn.ghost { background: transparent; border-color: transparent; } /* Sub-page Mission sidebar */ [data-theme="light"] .mp-sb-item:hover { color: var(--fg); background: rgba(34, 211, 238, 0.05); } [data-theme="light"] .mp-sb-item.is-active { color: #0891b2; background: var(--accent-soft); } /* Todo / Mission rows */ [data-theme="light"] .todo-check { border-color: #cbd5e1; } [data-theme="light"] .todo-check.p1 { border-color: var(--danger); } [data-theme="light"] .todo-check.p2 { border-color: var(--warning); } [data-theme="light"] .todo-check.p3 { border-color: var(--accent); } /* Tweaks panel host (it lives outside our root, no override needed for now) */ /* Form inputs */ [data-theme="light"] input, [data-theme="light"] textarea { color: var(--fg); } /* Body::before grid texture lighter */ [data-theme="light"] .ac-sparkline svg path { filter: none; }