/* Paradise theme for Bug Roads (palette: /root/.claude memory paradise-theme; same as lundquistecology.com).
   Loaded after style.css. Themes the panel and controls only; the OSM basemap and route/LiDAR
   colors stay as-is so the green corridor keeps its contrast on the map. */
:root {
  color-scheme: dark;
  --p-bg: #151515; --p-surface: #1d1d1d; --p-raised: #242424; --p-border: #424242; --p-line: #2e2e2e;
  --p-text: #e8e3e3; --p-muted: #b8b0b0; --p-blue: #8da3b9; --p-green: #8c977d; --p-gold: #d9bc8c;
  color: var(--p-text); background: var(--p-bg);
}
body { background: var(--p-bg); }
.panel { background: var(--p-surface); box-shadow: 8px 0 30px #0008; color: var(--p-text); }
.eyebrow { color: var(--p-green); }
h1 { color: var(--p-text); }
.intro, details, .hint { color: var(--p-muted); }
summary { color: var(--p-gold); }
.icon { background: var(--p-raised); color: var(--p-gold); border: 1px solid var(--p-border); }
.dot { border-color: var(--p-surface); }
label { color: var(--p-text); }
input, select { background: var(--p-bg); color: var(--p-text); border-color: var(--p-border); }
input::placeholder { color: #7d7676; }
input:focus, select:focus { outline: 2px solid var(--p-blue); outline-offset: 1px; border-color: var(--p-blue); }
.coord button, .actions button { background: var(--p-raised); border-color: var(--p-border); color: var(--p-text); }
.coord button:hover, .actions button:hover { border-color: var(--p-blue); }
.primary { background: var(--p-gold); color: var(--p-bg); }
#status { background: var(--p-raised); color: var(--p-text); }
.metrics span { background: var(--p-raised); color: var(--p-text); border: 1px solid var(--p-line); }
.metrics small { color: var(--p-muted); }
.check-label input { accent-color: var(--p-green); }
a { color: var(--p-blue); }

/* Leaflet chrome */
.leaflet-container { background: var(--p-bg); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--p-surface); color: var(--p-text); border-bottom-color: var(--p-border); }
.leaflet-bar a:hover { background: var(--p-raised); }
.leaflet-bar { border-color: var(--p-border) !important; }
.leaflet-control-attribution { background: rgba(29,29,29,.85) !important; color: var(--p-muted); }
.leaflet-control-attribution a { color: var(--p-blue); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--p-surface); color: var(--p-text); }

@media (max-width: 900px) {
  .panel { background: rgba(29,29,29,.95); box-shadow: 0 -8px 30px #0009; }
}