/* Shared semantic colors keep every view consistent across the three themes. */
:root {
    --bg: #17181b; --surface: #1d1f23; --sidebar: #121316; --panel: #141619;
    --input: #1b1c20; --raised: #25272c; --hover: #36383e;
    --text: #e7e8ec; --muted: #a3a7af; --line: #36393f;
    --positive-bg: #27362a; --positive-text: #b5cbb0; --positive-line: #4b5c44;
    --error-bg: #342524; --error-text: #f7ada7; --error-line: #79534f;
    --info-bg: #2a303f; --info-text: #bacbee; --focus: #b5c4b2;
    --login-glow: #252a25;
    color: var(--text); background: var(--bg); color-scheme: dark;
}
:root[data-theme="light"] {
    --bg: #fafaf9; --surface: #ffffff; --sidebar: #efefed; --panel: #f3f4f1;
    --input: #ffffff; --raised: #e9ebe6; --hover: #dde1d9;
    --text: #191e19; --muted: #484f47; --line: #c4cac0;
    --positive-bg: #e5eee0; --positive-text: #385632; --positive-line: #9bae94;
    --error-bg: #fff0ed; --error-text: #a42c23; --error-line: #dfaaa4;
    --info-bg: #e9eefb; --info-text: #34518d; --focus: #4f7147;
    --login-glow: #e7eee1;
    color-scheme: light;
}
:root[data-theme="gray"] {
    --bg: #3a3b3e; --surface: #434448; --sidebar: #303134; --panel: #343538;
    --input: #353639; --raised: #4b4d51; --hover: #595c61;
    --text: #f2f2f0; --muted: #c5c7cc; --line: #65676e;
    --positive-bg: #3e5140; --positive-text: #d7ecd0; --positive-line: #86987f;
    --error-bg: #5a3e3b; --error-text: #ffd1cc; --error-line: #b0817b;
    --info-bg: #404c64; --info-text: #dce6ff; --focus: #d3dfcc;
    --login-glow: #4e554b;
}
body { background: var(--bg); color: var(--text); }
button, .button { background: var(--raised); }
button:hover, .button:hover { background: var(--hover); }
a:hover { color: var(--text); }
input:not([type="checkbox"]), textarea { background: var(--input); border-color: var(--line); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus { border-color: var(--focus); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
label, .topbar, .empty h2 { color: var(--text); }
code, .source-icon, .doc-icon, .linked-document, .eyebrow, .message-author { color: var(--positive-text); }
/* Pale brand buttons retain their dark foreground in all palettes. */
.primary, .primary:hover { color: #182218; }
.secondary { border-color: var(--line); background: transparent; }
.quiet { background: transparent; color: var(--muted); }
.error, .task-row .error { color: var(--error-text); }
.notice { background: var(--positive-bg); border-color: var(--positive-line); }
.notice.error { background: var(--error-bg); border-color: var(--error-line); }
.sidebar { background: var(--sidebar); border-color: var(--line); }
.new-chat { background: var(--surface); border-color: var(--line); }
.sidebar nav a, .history a, .sidebar-bottom > a, .sidebar-bottom button,
.budget, .budget strong, .section-label, .history small, .top-status,
.welcome > p, .welcome .small-text, .suggestions button, .suggestions span,
.toggle, .composer-hint, .chat-footnote, .message.user .message-author,
.card p, .document-row p, .document-row > span:last-child, .empty,
.stat-grid span, .task-row p, .audit { color: var(--muted); }
.sidebar nav a:hover, .sidebar nav .active, .history a:hover, .history a.selected { background: var(--raised); color: var(--text); }
.budget progress, .budget progress::-webkit-progress-bar { background: var(--raised); }
.budget progress::-webkit-progress-value { background: var(--focus); }
.budget progress::-moz-progress-bar { background: var(--focus); }
.topbar, .document-row, .audit-row { border-color: var(--line); }
.suggestions button { background: var(--surface); border-color: var(--line); }
.suggestions button:hover, .document-row:hover { background: var(--raised); }
.composer { background: var(--surface); border-color: var(--line); }
.composer textarea { background: transparent; }
.message.user { background: var(--raised); }
.chips > * { background: var(--positive-bg); border-color: var(--positive-line); color: var(--positive-text); }
.context-panel { background: var(--panel); }
.card, .task-row { background: var(--surface); border-color: var(--line); }
.badge { background: var(--raised); color: var(--text); }
.badge.completed, .badge.ready { background: var(--positive-bg); color: var(--positive-text); }
.badge.failed { background: var(--error-bg); color: var(--error-text); }
.badge.running, .badge.queued { background: var(--info-bg); color: var(--info-text); }
.diff > div { background: var(--input); border-color: var(--line); }
.diff > div:last-child { border-color: var(--positive-line); }
.login-page { background: radial-gradient(ellipse at top, var(--login-glow), var(--bg) 65%); }
#blazor-error-ui { background: var(--error-bg); color: var(--error-text); border-top: 1px solid var(--error-line); }
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-option { border: 1px solid var(--line); background: var(--input); gap: 9px; min-height: 44px; }
.theme-option[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); background: var(--positive-bg); color: var(--text); }
.theme-swatch { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1px solid #90938d; }
.theme-swatch.light { background: #fafaf9; }
.theme-swatch.gray { background: #3a3b3e; }
.theme-swatch.dark { background: #17181b; }
.login-card .theme-picker { justify-content: center; gap: 7px; }
.login-card .theme-option { font-size: 12px; padding: 9px 10px; }
@media (max-width: 380px) { .theme-option { padding: 9px 10px; } .theme-picker { gap: 7px; } }