:root { color-scheme: light; --theme-accent: #5b5ce2; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101622;
  --surface: #182130;
  --surface-soft: #202b3c;
  --sidebar: #111621;
  --sidebar-soft: #252d42;
  --text: #edf1fa;
  --ink: #edf1fa;
  --muted: #b3bdd0;
  --muted-2: #a0adc4;
  --border: #354157;
  --primary: #b1afff;
  --primary-soft: #302e53;
  --teal: #68dbc5;
  --teal-soft: #183e3b;
  --orange: #ffcb82;
  --orange-soft: #443426;
  --red: #ff9ca9;
  --red-soft: #482b38;
  --blue: #92c3ff;
  --blue-soft: #233c58;
  --theme-accent: #b1afff;
  --theme-button: #6061d9;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.14);
}
[data-theme-toggle] { flex-shrink: 0; }
[data-theme-toggle] svg { width: 19px; height: 19px; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.login-theme-toggle { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
.login-panel { position: relative; }

/* Surfaces that predate the design tokens, including accounting/forms. */
html[data-theme="dark"] :is(.button:not(.button-primary), .icon-button, .filter-bar, .select, .text-input, .source-stat, .sync-card, .infra-card, .integration-card, .integration-banner, .finance-nav-button:not(.active), .accounting-tab, .finance-editor, .hub-dataset-card, .template-type, .toast, .error-panel, .accounting-alert) { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .topbar { background: rgba(24,33,48,.96); }
html[data-theme="dark"] :is(.button-primary, .finance-nav-button.active, .login-button) { background: var(--theme-button); border-color: var(--theme-button); color: #fff; }
html[data-theme="dark"] :is(.button-primary, .finance-nav-button.active, .login-button):hover { background: #5253c6; border-color: #5253c6; }
html[data-theme="dark"] :is(.icon-button:hover, .button:not(.button-primary):hover, .accounting-alert:hover, .finance-nav-button:not(.active):hover) { background: var(--surface-soft); border-color: var(--border); }
html[data-theme="dark"] :is(.accounting-tab.active, .mini-avatar, .provider-heading span, .lock-icon) { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] :is(th, .segmented, .previous-plan, .accounting-forecast-summary span, .revenue-bar, .search-box kbd, .security-note) { background: var(--surface-soft); color: var(--muted); }
html[data-theme="dark"] .segmented span.active { background: var(--surface); color: var(--text); }
html[data-theme="dark"] :is(td, .capacity-value, .device-row, .integration-meta strong, .setup-steps li, .check-item, .claim-attachments > label, .accounting-upload-form label, .compact-form > label, .settings-form label, .accounting-forecast-summary b, .trial-dates, .connection-status) { color: var(--muted); }
html[data-theme="dark"] td strong { color: var(--text); }
html[data-theme="dark"] :is(td, .card-header, .source-row + .source-row, .capacity-row + .capacity-row, .sync-card-foot, .metric-block + .metric-block, .infra-card-footer, .change-row + .change-row, .search-box kbd) { border-color: var(--border); }
html[data-theme="dark"] .accounting-page { --accounting-border: var(--border); }
html[data-theme="dark"] .accounting-export-bar { background: linear-gradient(135deg,var(--primary-soft),var(--surface)); border-color: var(--border); }
html[data-theme="dark"] .integration-banner.connected { border-color: #38645e; }
html[data-theme="dark"] :is(.integration-banner.warning, .error-panel) { border-color: #715041; }
html[data-theme="dark"] .document-not_expected { background: var(--surface-soft); color: var(--muted); }
html[data-theme="dark"] :is(.trend-up, .status-completed, .status-paid, .sync-status, .type-lb, .mode-live) { color: var(--teal); }
html[data-theme="dark"] :is(.status-processing, .status-shipped, .type-individual) { color: var(--blue); }
html[data-theme="dark"] :is(.status-pending, .sync-status.stale, .sync-status.pending, .mode-test, .forecast-kind-provision, .document-missing, .severity-warning, .dashboard-action.needs-attention b) { color: var(--orange); }
html[data-theme="dark"] :is(.status-refunded, .status-cancelled, .sync-status.error) { color: var(--red); }
html[data-theme="dark"] .demo-chip { background: var(--orange-soft); border-color: var(--border); color: var(--orange); }
html[data-theme="dark"] .notification-button i { border-color: var(--surface); }
html[data-theme="dark"] .button-muted { background: var(--surface-soft); color: var(--muted); }
html[data-theme="dark"] a:not(.button):not(.logout-link) { color: var(--primary); }
html[data-theme="dark"] .chart-label { fill: var(--muted); }
html[data-theme="dark"] .chart-grid { stroke: var(--border); }
html[data-theme="dark"] .chart-dot { fill: var(--surface); }
html[data-theme="dark"] progress.progress, html[data-theme="dark"] progress.progress::-webkit-progress-bar { background: var(--surface-soft); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted-2); opacity: 1; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { accent-color: var(--primary); }
html[data-theme="dark"] .claim-file-picker input::file-selector-button { background: var(--surface); color: var(--primary); }
html[data-theme="dark"] :is(.nav-label, .brand span, .profile span, .system-status span) { color: #a5aec5; }
html[data-theme="dark"] .loader { border-color: var(--border); border-top-color: var(--primary); }

/* Login uses the same stored preference. Issued invoices intentionally stay white. */
html[data-theme="dark"] .login-panel { background: var(--bg); }
html[data-theme="dark"] .login-card { background: var(--surface); box-shadow: var(--shadow); }
html[data-theme="dark"] .login-theme-toggle { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .login-card label { color: var(--muted); }
html[data-theme="dark"] .email-field { background: var(--surface-soft); }
html[data-theme="dark"] .email-field input { color: var(--text); }
html[data-theme="dark"] .email-field:focus-within { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
html[data-theme="dark"] .form-error { color: var(--red); }
html[data-theme="dark"] .form-error.success { color: var(--teal); }
html[data-theme="dark"] :is(.security-note span, .security-note strong) { color: var(--muted); }
@media(max-width:480px) { .login-theme-toggle { top: 14px; right: 14px; } }
@media(prefers-reduced-motion:reduce) { [data-theme-toggle] { transition: none; } }