/* =====================================================================
   DARK THEME — overrides the semantic tokens only. Component rules in
   style.css never hardcode colors, so this file is intentionally short.
   ===================================================================== */

[data-theme="dark"] {
  --bg-canvas: #0B141F;
  --bg-surface: #142334;
  --bg-chrome: #0B141F;

  --text-primary: #EDEEF0;
  --text-inverse: #10233A;
  --text-muted: #93A0AE;

  --border-subtle: rgba(237, 238, 240, 0.09);

  --cream-paper: #182A3D;      /* "paper" surfaces in dark mode */
  --cream-paper-2: #1B2F44;

  --glass-bg: rgba(20, 35, 52, 0.68);
  --glass-border: rgba(255,255,255,0.08);

  --accent: #35A99C;
  --accent-strong: #55C4B6;
  --highlight: #E4C17A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.25);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.35);
}

/* Leaflet tile layer gets a gentle invert+contrast filter in dark mode
   so the base map reads as "night" without shipping a second tileset. */
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.9);
}
/* Keep our own vector layers (markers, routes, polygons) true-color */
[data-theme="dark"] .leaflet-overlay-pane,
[data-theme="dark"] .leaflet-marker-pane,
[data-theme="dark"] .leaflet-popup-pane {
  filter: none;
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(100deg, #182A3D 30%, #223a53 50%, #182A3D 70%);
  background-size: 200% 100%;
}