/** * Operational Intelligence — Nova OS light theme + OE teal aliases. * Requires nova-tokens.css loaded first. Apply class="light" or "dark" on . */ .light { --white: var(--bg-base); --bg: var(--bg-card); --border: var(--border-default); --border-strong: var(--border-strong); --text: var(--text-primary); --muted: var(--text-secondary); --dim: var(--text-muted); /* OE primary = Orbitron purple (replaces teal/green accents across the demo) */ --oe-teal: #7c3aed; --oe-teal-ink: #5b21b6; --oe-teal-soft: #f5f3ff; --nova-primary: var(--accent-purple); --primary: var(--accent-purple); --primary-light: var(--accent-purple-bg); --primary-dark: #6d28d9; --primary-hover: #7c3aed; --primary-glow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 28%, transparent); --accent: var(--accent-purple); --success: var(--accent-purple); --success-light: var(--accent-purple-bg); --warning: var(--badge-warning-text); --warning-light: var(--badge-warning-bg); --rose: var(--accent-red); --rose-light: var(--badge-error-bg); --s50: var(--bg-base); --s100: var(--bg-card); --s200: rgba(0, 0, 0, 0.08); --s300: rgba(0, 0, 0, 0.12); --s400: var(--text-muted); --s500: var(--text-secondary); --s600: #52525a; --s700: #3f3f47; --s800: #27272a; --s900: var(--text-primary); --radius: var(--radius-btn); --radius-lg: var(--radius-card); --shadow-sm: var(--shadow-card-low); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --font: var(--fontFamily-console); --mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', monospace; } .dark { --oe-teal: #a78bfa; --oe-teal-ink: #ddd6fe; --oe-teal-soft: rgba(139, 92, 246, 0.16); --primary: var(--accent-purple); --primary-light: var(--accent-purple-bg); --primary-dark: #c4b5fd; --primary-hover: #a78bfa; --primary-glow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 35%, transparent); --success: var(--accent-purple); --success-light: var(--accent-purple-bg); } .light body, .dark body { font-family: var(--fontFamily-console); font-size: var(--fontSize-sm); color: var(--text-primary); background: var(--bg-card); line-height: 1.5; -webkit-font-smoothing: antialiased; } .light h1, .light h2, .light .sidebar-brand, .light .sb-logo, .dark h1, .dark h2, .dark .sidebar-brand { font-family: var(--fontFamily-shell); } .light :focus-visible, .dark :focus-visible { outline: 2px solid transparent; box-shadow: var(--primary-glow); } .light .app-shell, .dark .app-shell { background: var(--bg-card); } .light .sidebar, .dark .sidebar { background: var(--bg-base); border-right: 1px solid var(--border-default); } .light .main-workspace, .dark .main-workspace { background: var(--bg-card); } .light .sidebar-brand, .dark .sidebar-brand { border-bottom: 1px solid var(--border-default); } .light .nav-item, .dark .nav-item { border-radius: var(--radius-btn); font-size: var(--fontSize-sm); color: var(--text-secondary); font-weight: var(--fontWeight-medium); } .light .nav-item:hover, .dark .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .light .nav-item.nav-active, .light .nav-item.on, .light .nav-item.active, .dark .nav-item.nav-active { background: var(--bg-active-item); color: var(--text-primary); font-weight: var(--fontWeight-semibold); box-shadow: var(--shadow-card-low); } .light .nav-item.nav-active::before, .light .nav-item.on::before, .light .nav-item.active::before { background: var(--oe-teal); } .light .ctrl-btn, .light .btn, .dark .ctrl-btn { border-radius: var(--radius-btn); font-weight: var(--fontWeight-semibold); font-family: var(--fontFamily-console); background: var(--button-secondary-bg); border: 1px solid var(--button-secondary-border); color: var(--button-secondary-text); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .light .ctrl-btn:hover, .light .btn:hover { background: var(--button-secondary-hover-bg); border-color: var(--button-secondary-hover-border); } .light .ctrl-btn.primary, .light .btn-primary, .light .chat-send, .light .login-submit, .light .artefact-action, .light .queue-action, .light .hitl-btn-accept { background: var(--oe-teal); border-color: var(--oe-teal); color: #fff; box-shadow: none; font-weight: var(--fontWeight-semibold); } .light .ctrl-btn.primary:hover, .light .btn-primary:hover, .light .chat-send:hover, .light .login-submit:hover { background: var(--primary-hover); box-shadow: var(--primary-glow); } .light .page-block, .light .settings-panel, .light .integration-card, .light .home-stat-card, .light .login-card, .light .artefact-card, .light .queue-card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card-low); } .light .settings-input, .light .int-endpoint, .light .chat-input, .light .home-input, .light input[type='text'], .light input[type='url'], .light input[type='password'], .light textarea, .light select { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-btn); color: var(--text-primary); font-family: var(--fontFamily-console); } .light .settings-input:focus, .light .int-endpoint:focus, .light .chat-input:focus, .light .home-input:focus, .light input:focus, .light textarea:focus, .light select:focus { border-color: var(--oe-teal); box-shadow: var(--primary-glow); outline: none; } .light .settings-tab { background: transparent; border: none; color: var(--text-secondary); border-radius: var(--radius-btn); font-weight: var(--fontWeight-semibold); } .light .settings-tabs { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-btn); padding: 4px; width: fit-content; } .light .settings-tab.active { background: var(--bg-base); color: var(--oe-teal-ink); box-shadow: var(--shadow-card-low); border-color: transparent; } .light .muted, .dark .muted { color: var(--text-secondary); } .light .link { color: var(--oe-teal); } .light code { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 4px; color: var(--text-primary); }