/* Navy is the default; an explicit light preference uses the same blue identity. */
:root {
  color-scheme: dark;
  --text: #edf2ff;
  --page: #161c2c;
  --surface: #1d2538;
  --surface-soft: #242e45;
  --muted-text: #aab8d1;
  --subtle-text: #94a5c3;
  --line: #35425b;
  --control-line: #607291;
  --primary: #4169d1;
  --primary-hover: #456dd4;
  --on-primary: #ffffff;
  --accent: #9cbcff;
  --tint-bg: #243450;
  --tint-text: #bfd3ff;
  --tint-line: #4d6590;
  --success-bg: #1f3538;
  --success-text: #99d9cf;
  --success-line: #426663;
  --warning-bg: #373125;
  --warning-text: #f0cb85;
  --warning-line: #79663f;
  --danger-bg: #392b3a;
  --danger-text: #f4b0bb;
  --danger-line: #805566;
  --info-bg: #243450;
  --info-text: #bfd3ff;
  --focus: #9cbcff;
  --placeholder: #a0aec8;
  --code-bg: #111827;
  --code-text: #dce7ff;
  --shadow: #080d1c66;
  --backdrop: #090f1dcc;
}
:root[data-theme="light"] {
  color-scheme: light;
  --text: #19263f;
  --page: #f2f5fb;
  --surface: #ffffff;
  --surface-soft: #eaf0fa;
  --muted-text: #51627d;
  --subtle-text: #5b6b84;
  --line: #cbd6e7;
  --control-line: #7d8ea9;
  --primary: #3157b7;
  --primary-hover: #24469b;
  --on-primary: #ffffff;
  --accent: #3157b7;
  --tint-bg: #e6edfc;
  --tint-text: #294eaa;
  --tint-line: #99b0df;
  --success-bg: #e7f4f1;
  --success-text: #276258;
  --success-line: #9ac9be;
  --warning-bg: #fcf2df;
  --warning-text: #795515;
  --warning-line: #ddbf7f;
  --danger-bg: #fbeaf0;
  --danger-text: #a43450;
  --danger-line: #e0a5b4;
  --info-bg: #e6edfc;
  --info-text: #294eaa;
  --focus: #3157b7;
  --placeholder: #60718c;
  --code-bg: #eaf0fa;
  --code-text: #244579;
  --shadow: #20345818;
  --backdrop: #101a33a6;
}
/* Controls stay distinct from decorative panel borders in both themes. */
input, select, textarea { border-color: var(--control-line); }
input[type="checkbox"] { accent-color: var(--primary); }
.brand-icon { display: block; width: 44px; height: 44px; flex: 0 0 44px; background: transparent; border-radius: 0; object-fit: contain; }
::selection { background: var(--primary); color: var(--on-primary); }
.theme-toggle { min-height: 36px; font-size: 14px; padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.theme-toggle::before { content: ''; display: block; flex-shrink: 0; width: 16px; height: 16px; background: currentColor; mask: url('/static/moon.svg') center / contain no-repeat; }
:root[data-theme='dark'] .theme-toggle::before { mask-image: url('/static/sun.svg'); }
.theme-toggle[aria-pressed="true"] { border-color: var(--accent, #9cbcff); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.header-actions > a { font-size: 12px; }
.login-theme { margin-bottom: 20px; }
dialog { background: var(--surface, #fff); }
@media (max-width: 600px) {
  .portal-header, .docs-header { flex-wrap: wrap; gap: 12px; }
  .header-actions { gap: 12px; }
  .top-right { gap: 12px; }
  .topbar { height: auto; min-height: 74px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
}