/* ALFRED's default theme applies independently of the device appearance. */
:root {
  color-scheme: dark;
  --bg: #0d1118;
  --surface: #151d29;
  --surface-soft: #111823;
  --surface-raised: #1d2736;
  --hover: #253247;
  --ink: #e8edf6;
  --muted: #a5b1c4;
  --line: #303d51;
  --accent: #b39aff;
  --on-accent: #171124;
  --lilac: #302541;
  --blue: #1d3350;
  --mint: #1c3b32;
  --peach: #433024;
  --sand: #40371f;
  --slate: #2b3544;
  --success: #94ddb5;
  --warning: #f0cb88;
  --danger: #ffb0ae;
}

html { background: var(--bg); scrollbar-color: #49576e var(--surface-soft); }
body { background: var(--bg); color: var(--ink); }
button, input, textarea, select { color: var(--ink); }
html[data-theme=dark] input:not([type=checkbox]):not([type=radio]),
html[data-theme=dark] textarea, html[data-theme=dark] select {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #8896ad; opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.checkbox-label input { width: auto; flex: 0 0 auto; }
button:focus-visible, a:focus-visible { outline-color: var(--accent); }
input:focus, textarea:focus, select:focus { outline-color: var(--accent); }
::selection { background: #55447a; color: #fff; }

.sidebar, .chat-list, .workspace-conversations { background: var(--surface-soft); }
.nav button { color: var(--muted); }
.nav button.active, .chat-item.active { background: var(--lilac); color: #ddceff; }
.nav button:hover, .icon-btn:hover { background: var(--hover); }
.nav .count { background: #51406d; color: #eee5ff; }
.engine, .user-icon { background: var(--surface-raised); }
.topbar strong { color: var(--ink); }
.version, .compose-box, dialog { border-color: var(--line); }

.agent-card, .panel, .stat, .integration-card, .project-card, .knowledge-card,
.chat-layout, .workspace-chat, .context-select, .browser-shell, dialog {
  background: var(--surface);
}
.btn, .filter { background: var(--surface-raised); border-color: var(--line); }
.btn:hover, .filter:hover { background: var(--hover); }
.btn.primary, .filter.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: #c4afff; border-color: #c4afff; }
.btn.soft { background: var(--lilac); border-color: #53416d; color: #ddceff; }
.text-btn, .catalog-model a, .repo-row a { color: #c5adff; }
.model-line, .compose-foot { color: var(--muted); }
.chat-avatar { color: var(--ink); }

.hero { background: linear-gradient(115deg, #252039, #1c2134); border-color: #44365d; }
.hero:after { border-color: #4c3b67; }
.hero p, .auth-art p { color: #c1b6d1; }
.eyebrow { color: #b9a3dd; }
.agent-art .tag { background: #151d29d9; color: var(--ink); }
.tag { background: #302541; border-color: #514166; color: #d5c3ef; }
.tag.green { background: #1c342b; border-color: #345a47; color: var(--success); }
.tag.gray { background: #232d3c; border-color: #3a475a; color: #b5c0d1; }
.status { color: var(--warning); }
.status.ready { color: var(--success); }
.status.planned { color: var(--muted); }
.checkcircle, .stat-icon, .empty-icon { background: var(--lilac); color: #c7a9f4; }
.checkcircle.done { background: #1c342b; color: var(--success); }
.note-card { background: #302c24; }
.note-card .eyebrow { color: #cdbd96; }
.empty { background: var(--surface-soft); border-color: #4d425f; }
.integration-card.planned { background: var(--surface-soft); color: var(--muted); }
.hint { background: #282237; border-color: #48395d; color: #d1c2e8; }
.hint.warning { background: #332b1e; border-color: #655436; color: var(--warning); }
.message-body { background: var(--surface-raised); }
.message.user .message-body { background: #342744; }
.message.advice .message-body { background: #1d342c; }
.message.error .message-body { background: #332b1e; color: var(--warning); }
.message-body small { color: #c5adff; }
.compose-box textarea { background: transparent; }

.auth-art { background: radial-gradient(ellipse at 50% 40%, #312541, #131b29 75%); }
.checkbox-label { background: var(--surface-raised); }
.checkbox-label small, .toggle-label { color: var(--muted); }
.form-error, .modal-actions .archive { color: var(--danger); }
dialog { box-shadow: 0 24px 90px #0009; }
dialog::backdrop { background: #050811b3; }
#toast { background: #29364b; color: var(--ink); border: 1px solid #52617b; }
.knowledge-preview, .browser-image { background: var(--surface-soft); }
.workspace-tabs button.active { color: #d0b7ff; border-color: var(--accent); }

.security-status { border-left-color: var(--warning); }
.security-stopped { background: #382324; border-color: #85474b; }
.btn.security-danger, .security-danger { background: #a93644; border-color: #ca5562; color: #fff; }
.security-danger:hover { background: #bc3d4d; }
.security-domain-list p, .security-events p { border-bottom-color: var(--line); }
.security-domain-list span, .security-events time { color: var(--muted); }
.security-backup-status, .recovery-codes code, .invitation-result { background: var(--surface-raised); }
.invitation-result input { background: var(--surface-soft); }
.mfa-qr { background: #fff; padding: 8px; border-radius: 12px; }

#monitor-error:not(:empty) { background: #382324; color: var(--danger); }
.monitor-status { background: #1b3028; border-color: #345c47; }
.monitor-status.warning { background: #332b1e; border-color: #655436; }
.monitor-status.critical { background: #382324; border-color: #85474b; }
.monitor-status.unknown { background: var(--surface-raised); border-color: var(--line); }
.monitor-charts svg text { fill: var(--muted); }
.monitor-charts svg line { stroke: var(--line); }
.monitor-charts svg circle:focus { stroke: var(--ink); }