/* Interface themes. Geometry and typography are shared by all three palettes. */
:root {
  color-scheme: light;
  --green-solid: #1e674c;
  --green-solid-dark: #154e39;
  --focus-ring: var(--green);
  --notice-border: #a5bfd0;
}

/* Dark theme (owner request 12.10.2026): neutral dark grey surfaces; Starget green stays an accent only. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161718;
  --surface: #1f2123;
  --surface-subtle: #26282b;
  --surface-hover: #2d3034;
  --surface-translucent: rgb(31 33 35 / 97%);
  --text: #e8e9eb;
  --muted: #b0b4b9;
  --icon-muted: #a9adb3;
  --border: #45484d;
  --border-subtle: #393c40;
  --border-strong: #8a8f96;
  --field-border: #868b92;
  --green: #91d6b4;
  --green-dark: #b0e6c8;
  --green-soft: #262d29;
  --green-light: #30373a;
  --green-border: #4d6a5a;
  --amber: #e9c078;
  --amber-soft: #3a3328;
  --amber-border: #806847;
  --blue: #a6cce8;
  --blue-soft: #263544;
  --notice-border: #57778e;
  --red: #f0aaaa;
  --red-soft: #402d2d;
  --red-border: #906561;
  --error-surface: #372828;
  --neutral-text: #c3c6ca;
  --neutral-soft: #2f3236;
  --map-ground: #1e2022;
  --map-country: #2c2e30;
  --map-neighbor: #26282a;
  --map-boundary: #6d7178;
  --map-water: #1f3a46;
  --map-water-edge: #3c6476;
  --map-road: #a8976d;
  --map-planned: #a6bfd8;
  --map-route-halo: #1c1d1f;
  --shadow: none;
}

:root[data-theme="sepia"] {
  color-scheme: light;
  --bg: #eee6d7;
  --surface: #faf4e8;
  --surface-subtle: #f2eadb;
  --surface-hover: #eae4d5;
  --surface-translucent: rgb(250 244 232 / 97%);
  --text: #342f27;
  --muted: #645c4e;
  --icon-muted: #706650;
  --border: #d4c9b4;
  --border-subtle: #ddd3c0;
  --border-strong: #998b73;
  --field-border: #908572;
  --green: #275f47;
  --green-dark: #1b4b35;
  --green-soft: #e2e9d9;
  --green-light: #d4dfc7;
  --green-border: #abbda0;
  --amber: #7c5014;
  --amber-soft: #f1e1bc;
  --amber-border: #c5a969;
  --blue: #315976;
  --blue-soft: #e0e8e7;
  --notice-border: #a5b7b5;
  --red: #953a36;
  --red-soft: #f5dfd7;
  --red-border: #d1a395;
  --error-surface: #f9e9e1;
  --neutral-text: #605a4c;
  --neutral-soft: #e9e2d3;
  --map-ground: #e7e1d0;
  --map-country: #ece5ce;
  --map-neighbor: #dfdfc9;
  --map-boundary: #aaa58d;
  --map-water: #c3d7d4;
  --map-water-edge: #9bb8b8;
  --map-road: #ae9d70;
  --map-planned: #526d85;
  --map-route-halo: #faf4e8;
}

/* Only the dark surface needs backing for the original dark green wordmark. */
:root[data-theme="dark"] .brand-logo {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 4px #fff;
}

/* Native fields follow the chosen palette, including placeholders and autofill. */
:root:is([data-theme="dark"], [data-theme="sepia"]) .input::placeholder,
:root:is([data-theme="dark"], [data-theme="sepia"]) .textarea::placeholder { color: var(--muted); }
:root:is([data-theme="dark"], [data-theme="sepia"]) input:autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 100px var(--surface) inset;
}
:root:is([data-theme="dark"], [data-theme="sepia"]) .input:focus,
:root:is([data-theme="dark"], [data-theme="sepia"]) .select:focus,
:root:is([data-theme="dark"], [data-theme="sepia"]) .textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* White glyphs need a solid dark green rather than the lighter link token. */
.onboard-progress li.current .onboard-step-number,
.onboard-progress li.complete .onboard-step-number,
.tracking-stop-icon { background: var(--green-solid); }
.tracking-stop-icon.is-destination { background: var(--green-solid-dark); }

/* Leaflet owns its popup CSS; these surfaces use the application palette too. */
.tracking-map .leaflet-popup-content-wrapper,
.tracking-map .leaflet-popup-tip { color: var(--text); background: var(--surface); }
.tracking-map .leaflet-popup-close-button { color: var(--muted); }
.tracking-map .leaflet-popup-close-button:hover { color: var(--text); }
.tracking-map .leaflet-control-zoom a.leaflet-disabled { color: var(--muted); background: var(--surface-subtle, #f5f7f6); }

/* Theme the local SVG geography without filtering icons, routes, or labels.
   These attributes are the explicit styles of the Natural Earth layer in map.js. */
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-geography-pane path[fill="#f2f1e7"] { fill: var(--map-country); stroke: var(--map-boundary); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-geography-pane path[fill="#e9ecdf"] { fill: var(--map-neighbor); stroke: var(--map-boundary); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-geography-pane path[fill="#c6dfe8"] { fill: var(--map-water); stroke: var(--map-water-edge); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-geography-pane path[stroke="#d0c5a7"] { stroke: var(--map-road); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-overlay-pane path[stroke="white"] { stroke: var(--map-route-halo); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-overlay-pane path[stroke="#73869a"] { stroke: var(--map-planned); }
:root:is([data-theme="dark"], [data-theme="sepia"]) .leaflet-overlay-pane path[stroke="#1e674c"] { stroke: var(--green); }
:root[data-theme="dark"] .leaflet-overlay-pane path[stroke="#d52229"] { stroke: #f48b90; }

/* Only third-party raster map tiles are toned down. Application UI stays crisp. */
:root[data-theme="dark"] .tracking-map .leaflet-tile-pane { filter: brightness(.7) saturate(.65); }
:root[data-theme="sepia"] .tracking-map .leaflet-tile-pane { filter: sepia(.25) saturate(.85); }

/* Existing print styling stays light even if a screen theme is selected. */
@media print {
  :root[data-theme] { --bg: #fff; --surface: #fff; --surface-subtle: #f5f5f5; --text: #20272d; --muted: #5d6872; --green: #1e674c; --green-dark: #154e39; --green-soft: #eaf3ee; --border: #dfe4e8; color-scheme: light; }
}