/* Dark mode: follows the system by default; the toggle sets data-theme on <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #818cf8;
  --accent-dark: #6366f1;
  --accent-light: #232650;
  --accent-border: #3b3f8f;
  --success: #14b8a6;
  --success-dark: #0d9488;
  --success-light: #0f2b29;
  --success-border: #1b5a54;
  --danger: #fb7185;
  --note: #fbbf24;
  --danger-light: #3a1620;
  --danger-border: #6b2535;
  --ink: #e6e8f0;
  --muted: #9aa1b5;
  --border: #2d3142;
  --surface: #1a1d2b;
  --surface-alt: #12141f;
}

:root[data-theme="dark"] .topbar { background: linear-gradient(120deg, #1e1b4b, #3730a3 65%, #4c1d95); }
:root[data-theme="dark"] .error-banner,
:root[data-theme="dark"] .banner-error { background: #3a1a1a; color: #f5b5b0; border-color: #6b2a2a; }
:root[data-theme="dark"] .pill-V { background: #262a5c; color: #a5b4fc; border-color: #3b3f8f; }
:root[data-theme="dark"] .pill-C { background: #4a1826; color: #fda4af; border-color: #6b2535; }
:root[data-theme="dark"] .pill-P { background: #35194f; color: #d8b4fe; border-color: #52277a; }
:root[data-theme="dark"] .pill-B { background: #0f2b29; color: #5eead4; border-color: #1b5a54; }
:root[data-theme="dark"] .pill-O { background: #232838; color: #b4bccd; border-color: #343a4e; }
:root[data-theme="dark"] .editor-status.ok { background: #14301f; color: #86efac; }
:root[data-theme="dark"] .editor-status.warn { background: #3b3115; color: #fcd34d; }
:root[data-theme="dark"] .editor-status.error { background: #3a1616; color: #fca5a5; }
:root[data-theme="dark"] .dialog-field .required { color: #f2b8b5; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--surface-alt); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] dialog { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.theme-toggle { margin-left: auto; }