:root {
  --primary: #85c9ed;
  --primary-hover: #b5e2f8;
  --primary-soft: #73bde51a;
  --primary-line: #5888a3;
  --on-primary: #102a38;
  --accent: #9fb28b;
  --accent-soft: #93a57d17;
  --warning: #d7b474;
  --chart-track: #2d3b37;
  --model-ground: #23352e;
  --model-side: #657d70;
  --model-front: #90a495;
  --model-roof: #ccd6c7;
  --model-edge: #d4e1d244;
  --atmosphere: #3b72861a;
  --ghost-fill: #667f7817;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f4;
  --surface: #fcfdfb;
  --surface-raised: #eaf0ed;
  --surface-hover: #e8efeb;
  --line: #d6dfd8;
  --line-soft: #61786e24;
  --text: #233c3d;
  --muted: #526966;
  --faint: #5b706a;
  --primary: #236f96;
  --primary-hover: #155f86;
  --primary-soft: #ddecf4;
  --primary-line: #9ec9de;
  --on-primary: #ffffff;
  --accent: #536e40;
  --accent-soft: #e7edde;
  --warning: #8c642c;
  --chart-track: #dce4dd;
  --model-ground: #e1e8dd;
  --model-side: #8a9e85;
  --model-front: #b2c3a6;
  --model-roof: #eef3e7;
  --model-edge: #47644c3d;
  --atmosphere: #98c4d52b;
  --ghost-fill: #a0b5a32b;
}
body {
  transition:
    background 0.2s,
    color 0.2s;
}
.theme-toggle {
  min-width: 69px;
  gap: 7px;
  padding: 7px 9px;
  color: var(--primary);
}
.theme-toggle .icon {
  width: 14px;
  height: 14px;
}
.brand svg {
  stroke: var(--primary);
}
.brand-period,
.text-button,
.coachmark-bottom > button {
  color: var(--primary);
}
button:hover,
.text-button:hover {
  color: var(--primary-hover);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--primary);
}
::selection {
  background: var(--primary-soft);
  color: var(--text);
}
::-webkit-scrollbar-thumb {
  background: var(--line);
}
.org-mark {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.avatar {
  background: var(--accent-soft);
  color: var(--accent);
}
.lens-control {
  background: var(--surface-raised);
}
.lens-control button.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-line);
  box-shadow: none;
}
.lens-control button.active small {
  color: var(--primary);
}
.lens-control button:hover:not(.active) {
  background: var(--surface);
}
.primary-button {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.primary-button:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}
.icon-button.active,
.view-button.active {
  color: var(--primary);
  background: var(--primary-soft);
}
.district-item:hover,
.district-item.linked-active,
.bar-row.linked-active,
.stacked-row.linked-active,
.sparkline-card.linked-active {
  background: var(--surface-hover);
}
.district-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.district-item.active .district-item-name {
  color: var(--primary);
}
.district-trend b.attention,
.attention,
.accent-value b {
  color: var(--warning);
}
.legend-item {
  color: var(--muted);
}
.insight-note {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.insight-note p {
  color: var(--text);
}
.insight-note small {
  color: var(--muted);
}
.insight-note b,
.insight-note > span {
  color: var(--accent);
}
.problem-project:hover {
  background: var(--surface-hover);
}
.ghost-legend > span {
  background: var(--ghost-fill);
}
.scene-container {
  background: radial-gradient(
    ellipse at 50% 45%,
    var(--atmosphere) 0%,
    transparent 65%
  );
}
.district-label {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 7px #152c2310;
}
.district-label:hover,
.district-label.selected {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-line);
}
.district-label-kpi,
.district-label-number {
  color: var(--muted);
}
.project-label {
  background: var(--surface);
  color: var(--text);
}
.followup-pin {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-line);
}
.followup-pin:after {
  background: var(--primary);
}
.followup-action {
  color: var(--primary);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}
.followup-action.flagged {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#timeline-range {
  background: var(--line);
}
#timeline-range::-webkit-slider-thumb {
  background: var(--primary);
  border-color: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
#timeline-range::-moz-range-thumb {
  background: var(--primary);
  border-color: var(--surface);
}
#timeline-range::-moz-range-progress {
  background: var(--primary);
}
.timeline-progress {
  background: var(--primary);
}
.timeline-range-wrap::before {
  background: var(--primary);
}
.switch-track {
  background: var(--line);
}
.switch-track:after {
  background: var(--faint);
}
.switch-label input:checked + .switch-track {
  background: var(--primary-soft);
}
.switch-label input:checked + .switch-track:after {
  background: var(--primary);
}
.panel-tabs button.active,
.panel-tabs button[aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
[data-theme="light"] .right-panel {
  background: var(--surface);
}
[data-theme="light"] .right-panel,
[data-theme="light"] .coachmark,
[data-theme="light"] dialog,
[data-theme="light"] .toast {
  box-shadow: 0 14px 60px #243d3315;
}
[data-theme="light"] dialog::backdrop {
  background: #20392f3d;
}
[data-theme="light"] .city-tooltip {
  box-shadow: 0 8px 32px #243d3322;
}
[data-theme="light"] .status-badge {
  color: #334e49;
  background: var(--surface-raised);
  border-left: 3px solid var(--status);
}
[data-theme="light"] .status-dot {
  box-shadow: 0 0 0 1px #243d3322;
}
@media (max-width: 760px) {
  .theme-toggle {
    min-width: 30px;
    width: 30px;
    padding: 5px;
  }
  .theme-toggle > span {
    display: none;
  }
  .masthead-actions {
    gap: 8px;
  }
}

.timeline-track:before {
  background: var(--primary);
}
.diff-control input:checked + .switch-track {
  background: var(--primary-soft);
}
.diff-control input:checked + .switch-track:after {
  background: var(--primary);
}
.panel-tabs > [role="tab"].active:after {
  background: var(--primary);
}
.panel-tabs > [role="tab"].active small {
  color: var(--primary);
}

[data-theme="light"] .problem-project-end,
[data-theme="light"] .tooltip-numbers b {
  color: var(--text) !important;
}