/* v4 theme roles. v3 remains the dark source of truth; light overrides only semantic
   roles and the v3 component chrome. Values in charts and status panels inherit
   the shared tokens, so changing theme never changes engine calculations. */
:root {
  color-scheme: dark;
  --red-500: var(--red-600);
  --theme-toggle-bg: #193650;
  --theme-toggle-fg: #e9f3ff;
  --theme-toggle-border: #365573;
  --map-route: #49a4ff;
  --map-origin: #35d29c;
  --map-destination: #ff7385;
  --map-marker-stroke: #fff;
  --map-flow: #f5b84b;
}

:root:not([data-theme="dark"]) {
  color-scheme: light;
  --v3-navy-950: #f3f6fa;
  --v3-navy-900: #ffffff;
  --v3-navy-850: #ffffff;
  --v3-navy-800: #e9f1f8;
  --v3-line: #d4e0eb;
  --v3-text: #142b40;
  --v3-muted: #526a7c;
  --v3-blue: #1767ba;
  --v3-green: #12774d;
  --v3-amber: #9a5e09;
  --v3-red: #bd3549;
  --surface: #ffffff;
  --bg: #f3f6fa;
  --ink-900: #142b40;
  --ink-700: #30485d;
  --ink-500: #526a7c;
  --ink-300: #8295a4;
  --ink-150: #c9d6e2;
  --ink-100: #dce5ee;
  --ink-50: #f2f6fa;
  --primary-800: #124e8b;
  --primary-700: #1767ba;
  --primary-600: #1974c7;
  --primary-500: #287ed0;
  --primary-100: #dcecfb;
  --primary-50: #edf6ff;
  --engine-800: #363f91;
  --engine-700: #4554a4;
  --engine-600: #5263b9;
  --engine-500: #7180d2;
  --engine-100: #e0e6ff;
  --engine-50: #f1f3ff;
  --green-800: #0b6742;
  --green-700: #12774d;
  --green-600: #16865a;
  --green-100: #cfeedd;
  --green-50: #eaf8f0;
  --amber-800: #805009;
  --amber-700: #9a5e09;
  --amber-600: #af720f;
  --amber-100: #f7e8bf;
  --amber-50: #fff8e9;
  --red-800: #9e293e;
  --red-700: #bd3549;
  --red-600: #c94b5d;
  --red-500: #c94b5d;
  --red-100: #f5d9de;
  --red-50: #fff0f2;
  --purple-800: #56447f;
  --purple-700: #6a5593;
  --purple-100: #e9e2f5;
  --purple-50: #f6f2fb;
  --card-bg: var(--surface);
  --card-border: var(--v3-line);
  --button-primary-bg: #1767ba;
  --shadow-sm: 0 2px 10px rgb(25 56 83 / .06);
  --shadow-md: 0 12px 28px rgb(25 56 83 / .12);
  --shadow-lg: 0 24px 56px rgb(25 56 83 / .2);
  --theme-toggle-bg: #edf4fa;
  --theme-toggle-fg: #204761;
  --theme-toggle-border: #c5d8e8;
  --map-route: #1767ba;
  --map-origin: #16865a;
  --map-destination: #bd3549;
  --map-marker-stroke: #fff;
  --map-flow: #9a5e09;
}

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  min-height: 38px; padding: 6px 11px; border: 1px solid var(--theme-toggle-border);
  border-radius: 9px; background: var(--theme-toggle-bg); color: var(--theme-toggle-fg);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--v3-blue); }
.theme-icon { font-size: 19px; line-height: 1; }

/* The inherited v3 chrome contains literal dark colors; map each to the light
   surface, text and interactive roles instead of changing individual pages. */
html:not([data-theme="dark"]) body { background-image: radial-gradient(circle at 45% -30%, #d9eafa 0, transparent 38%); }
html:not([data-theme="dark"]) .app-header { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
html:not([data-theme="dark"]) .app-header .brand { color: var(--ink-900); }
html:not([data-theme="dark"]) .app-header .brand-mark { box-shadow: 0 0 18px rgb(23 103 186 / .15); }
html:not([data-theme="dark"]) .app-header .env-tag { background: var(--ink-50); border-color: var(--ink-150); color: var(--ink-500); }
html:not([data-theme="dark"]) .app-header .btn-ghost { color: var(--primary-800); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .menu-toggle { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .app-nav { background: var(--surface); }
html:not([data-theme="dark"]) .nav-section-label { color: #657c90; }
html:not([data-theme="dark"]) .nav-link { color: var(--ink-700); }
html:not([data-theme="dark"]) .nav-link .ic { color: #67849b; }
html:not([data-theme="dark"]) .nav-link:hover { color: var(--primary-800); background: var(--primary-50); border-color: var(--primary-100); }
html:not([data-theme="dark"]) .nav-link.active { color: #124e8b; background: #e1efff; border-color: #a9ceef; box-shadow: inset -3px 0 0 var(--v3-blue); }
html:not([data-theme="dark"]) .nav-link.active .ic { color: var(--primary-700); }
html:not([data-theme="dark"]) .card:hover { border-color: #adc4d8; }
html:not([data-theme="dark"]) .view-header .eyebrow { color: var(--primary-700); }
html:not([data-theme="dark"]) .trace-strip { background: var(--engine-50); border-color: var(--engine-100); }
html:not([data-theme="dark"]) .trace-strip a { color: var(--engine-700); }
html:not([data-theme="dark"]) .btn-primary:hover { background: #12579f; }
html:not([data-theme="dark"]) .btn-secondary,
html:not([data-theme="dark"]) .btn-ghost,
html:not([data-theme="dark"]) .icon-btn { background: var(--surface); color: var(--primary-800); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .btn-secondary:hover,
html:not([data-theme="dark"]) .btn-ghost:hover,
html:not([data-theme="dark"]) .icon-btn:hover { background: var(--primary-50); color: var(--primary-800); }
html:not([data-theme="dark"]) .chip { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .chip.active { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }
html:not([data-theme="dark"]) .field input[type=text],
html:not([data-theme="dark"]) .field input[type=number],
html:not([data-theme="dark"]) .field select,
html:not([data-theme="dark"]) .field textarea,
html:not([data-theme="dark"]) select.chip { background: var(--surface); color: var(--ink-900); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .data-table thead th { background: var(--ink-50); color: var(--ink-700); }
html:not([data-theme="dark"]) .data-table tbody tr:hover { background: var(--primary-50); }
html:not([data-theme="dark"]) .badge-engine { background: var(--engine-100); color: var(--engine-800); }
html:not([data-theme="dark"]) .kpi-card2-wrap { background: linear-gradient(160deg, #fff, #f3f8fd 80%); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .kpi-card2-wrap:hover { box-shadow: var(--shadow-md); }
html:not([data-theme="dark"]) .kpi-card2 .kc-value { color: var(--ink-900); }
html:not([data-theme="dark"]) .kpi-card2 .kc-label { color: var(--ink-700); }
html:not([data-theme="dark"]) .kpi-card2 .kc-sub { color: var(--ink-500); }
html:not([data-theme="dark"]) .www-card { background: var(--surface); }
html:not([data-theme="dark"]) .inspector-panel { background: var(--surface); }
html:not([data-theme="dark"]) .inspector-overlay { background: rgb(22 42 62 / .38); }

/* Leaflet's own controls, tiles and popups belong to the same theme. */
html:not([data-theme="dark"]) .leaflet-container,
html:not([data-theme="dark"]) #leaflet-map { background: #e6eff5; }
html:not([data-theme="dark"]) .leaflet-popup-content-wrapper,
html:not([data-theme="dark"]) .leaflet-popup-tip { background: var(--surface); color: var(--ink-900); }
html:not([data-theme="dark"]) .leaflet-control-attribution { background: rgb(255 255 255 / .9) !important; color: var(--ink-700); }
html:not([data-theme="dark"]) .leaflet-control-attribution a { color: var(--primary-700); }
html:not([data-theme="dark"]) .leaflet-bar a { background: var(--surface); color: var(--ink-900); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .leaflet-bar a:hover { background: var(--primary-50); }
html:not([data-theme="dark"]) .dark-basemap-tile { filter: none; }
html[data-theme="dark"] .leaflet-bar a { background: var(--v3-navy-850); color: var(--v3-text); border-color: var(--v3-line); }
html[data-theme="dark"] .leaflet-bar a:hover { background: var(--v3-navy-800); }
html[data-theme="dark"] .map-legend { background: rgb(16 36 58 / .96); border-color: var(--v3-line); }
html[data-theme="dark"] .map-tile-error { background: rgb(16 36 58 / .97); }
html:not([data-theme="dark"]) .map-legend { background: rgb(255 255 255 / .96); }
html:not([data-theme="dark"]) .map-tile-error { background: rgb(243 246 250 / .97); }

html:not([data-theme="dark"]) .global-context { background: rgb(255 255 255 / .97); }
html:not([data-theme="dark"]) .context-title,
html:not([data-theme="dark"]) .context-group label { color: var(--ink-500); }
html:not([data-theme="dark"]) .context-group select { background: var(--surface); color: var(--ink-900); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .context-pill { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .context-pill b { color: var(--ink-900); }
html:not([data-theme="dark"]) .scenario-pill:hover { color: var(--primary-800); }
html:not([data-theme="dark"]) .context-pill.demo { color: var(--amber-800); border-color: var(--amber-100); background: var(--amber-50); }
html:not([data-theme="dark"]) .journey-step { background: var(--surface); color: var(--ink-700); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .journey-step span { color: var(--ink-500); }
html:not([data-theme="dark"]) .journey-step.active { background: #e1efff; color: var(--primary-800); border-color: #8abce9; }
html:not([data-theme="dark"]) .journey-step.done { border-color: var(--green-600); }
html:not([data-theme="dark"]) .journey-step.done span { color: var(--green-700); }
html:not([data-theme="dark"]) .journey-step:hover { color: var(--primary-800); }

html:not([data-theme="dark"]) .dashboard-map-title,
html:not([data-theme="dark"]) .dashboard-map-caption { background: rgb(255 255 255 / .94); color: var(--ink-900); border-color: var(--ink-150); }
html:not([data-theme="dark"]) #dashboard-map { background: #e6eff5; }
html:not([data-theme="dark"]) .dashboard-fact { background: var(--ink-50); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .dashboard-fact small { color: var(--ink-500); }
html:not([data-theme="dark"]) .dashboard-mini-track { background: var(--ink-100); }
html:not([data-theme="dark"]) .operation-roles span { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .question-card ul { color: var(--ink-700); }
html:not([data-theme="dark"]) .question-card .source { color: var(--ink-500); }
html:not([data-theme="dark"]) .scenario-lab .big-number { color: var(--ink-900); }
html:not([data-theme="dark"]) .scenario-choice { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-150); }
html:not([data-theme="dark"]) .scenario-choice.active { background: #e1efff; color: var(--primary-800); border-color: #8abce9; }

@media (max-width: 560px) {
  .theme-toggle { padding: 6px 8px; font-size: 11px; }
}