/* ========================================================================== Dark mode — activated via [data-theme="dark"] on , toggled by theme.js Uses the same copper/teal accents against an ink-navy surface so the product reads as one continuous system, not a re-skin. ========================================================================== */ html[data-theme="dark"]{ --bg: var(--ink-950); --fg: var(--text-050); --fg-muted: #93a3b8; --surface: rgba(19,37,56,.72); --surface-solid:#132538; --surface-border: rgba(255,255,255,.08); --paper-50:#182c42; --line:#25405f; } html[data-theme="dark"] #map{background:#0a1420;} html[data-theme="dark"] .icon-btn:hover{background:var(--copper);color:#fff;} html[data-theme="dark"] .district-popup h3{color:var(--paper-0);} html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip{background:var(--surface-solid);color:var(--fg);} html[data-theme="dark"] .leaflet-popup-content-wrapper td:last-child{color:var(--fg);} html[data-theme="dark"] .leaflet-bar a{background:var(--surface-solid);color:var(--fg);border-color:var(--surface-border) !important;} html[data-theme="dark"] .leaflet-bar a:hover{background:var(--copper);color:#fff;} html[data-theme="dark"] .leaflet-control-attribution{background:rgba(19,37,56,.8) !important;color:var(--fg-muted) !important;} html[data-theme="dark"] .leaflet-control-attribution a{color:var(--copper-light) !important;} html[data-theme="dark"] #themeToggle i:before{content:"\f185";} /* sun icon */ /* smooth theme transition */ html, body, .app-bar, .side-panel, .tool-dock, .status-strip, .stats-panel, .icon-btn, .layer-row, .basemap-card, input, .legend-box, .draw-summary, .chart-card, .stat-card{ transition:background-color .25s ease, color .25s ease, border-color .25s ease; }