/* Dark theme — a warm "espresso" counterpart to the light cream palette, drawn from the auth brand pane's tones. Activated by data-theme="dark" on (set pre-paint by the bootstrap script in index.html, toggled by ThemeToggle). Loaded last so its colour overrides win. The whole UI is token-driven, so most of dark mode is just redefining the :root custom properties; the rest patches the few places that hardcoded light colours. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; --bg: #131210; --surface: #1b1916; --surface-2: #242019; --surface-3: #2f2a22; --border: #2b261f; --border-strong: #3b352b; --text: #f3f0ea; --text-2: #c5c0b4; --muted: #968f82; --muted-2: #6c665b; --accent: #e07a4c; --accent-soft: #3a2418; --accent-text: #f1a578; --success: #6fb878; --success-soft: #1b2a1d; --warning: #d9a648; --warning-soft: #2b2410; --danger: #df7468; --danger-soft: #2f1a16; --info: #6f9ed4; --info-soft: #15202c; } /* Make the focus ring readable on dark surfaces (accent-soft is intentionally faint there). */ [data-theme="dark"] .input:focus { box-shadow: 0 0 0 3px rgba(224, 122, 76, 0.28); } [data-theme="dark"] .pager-size select:focus { box-shadow: 0 0 0 3px rgba(224, 122, 76, 0.28); } /* ---- Patches for non-token (hardcoded) light colours in the component sheets ---- */ /* Inline code accent (app.css) */ [data-theme="dark"] code { color: #f1a578; } /* Agent status badge + success banner (agents.css hardcoded greens on near-white) */ [data-theme="dark"] .badge.on { color: #84c98c; border-color: #2f4a33; background: #1a241c; } [data-theme="dark"] .badge.on .dot { background: #6fb878; } [data-theme="dark"] .badge.off .dot { background: #5a554c; } [data-theme="dark"] .banner.success { border-color: #2f4a33; background: #1a241c; color: #84c98c; } /* Connection / encryption test results (agents.css hardcoded #2e7d32 etc.) */ [data-theme="dark"] .test-item.ok .test-icon, [data-theme="dark"] .enc-key-msg.ok { color: #84c98c; } /* Danger button (agents.css hardcoded white bg + light border) */ [data-theme="dark"] .btn-danger { background: var(--surface); border-color: #5c332c; color: #e6968a; } [data-theme="dark"] .btn-danger:hover:not(:disabled) { background: #2a1c19; border-color: #71403a; } /* Selected "paper" card keeps a light icon chip in light mode; tone it to the surface on dark. */ [data-theme="dark"] .paper-card.selected .paper-icon { background: var(--surface); border-color: var(--accent); } /* The theme toggle button uses the shared .icon-btn styling; this just keeps the glyph centred. */ .theme-toggle svg { display: block; }