/* Shared semantic colors for the landing page and web planner. */
:root {
  color-scheme: light;
  --color-asphalt: #171a1c;
  --color-cloud: #f5f6f3;
  --color-brand: #ffd43b;
  --color-on-brand: var(--color-asphalt);
  --color-inverse-bike: #2ec5ce;
  --color-inverse-transit: #bdb5ff;
  --color-danger-action: #b42332;
  --color-on-danger: #fff;
  --color-action-hover: #f1c01e;
  --color-action-pressed: #e2b316;
  --color-canvas: var(--color-cloud);
  --color-surface: var(--color-cloud);
  --color-raised: var(--color-surface);
  --color-subtle: #e9ece6;
  --color-text: var(--color-asphalt);
  --color-secondary: #596167;
  --color-divider: #d7dbd5;
  --color-control-border: #7b878b;
  --color-selected: #fff4c2;
  --color-selection-indicator: var(--color-asphalt);
  --color-disabled: #e2e7e4;
  --color-bike-text: #086c74;
  --color-bike-stroke: #087f8c;
  --color-transit-text: #5b4bc4;
  --color-transit-stroke: #7667e8;
  --color-success: #146c50;
  --color-success-surface: #ecf7f1;
  --color-warning: #8a4b08;
  --color-warning-surface: #fff4da;
  --color-danger: var(--color-danger-action);
  --color-danger-surface: #fff0ed;
  --color-location: #245b9e;
  --color-map: #eef0eb;
  --color-map-street: #fff;
  --color-map-block: #e3e7df;
  --color-map-park: #dbe5d1;
  --color-map-water: #abd9df;
  --color-map-network: #b7b1ce;
  --color-map-text: var(--color-asphalt);
  --color-map-surface: #fff;
  --color-map-secondary: #596167;
  --color-route-halo: #fff;
  --color-shadow: #171a1c20;
  --color-scrim: #171a1c66;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #101314;
  --color-surface: var(--color-asphalt);
  --color-raised: #1e2325;
  --color-subtle: #262d30;
  --color-text: var(--color-cloud);
  --color-secondary: #b8c2c7;
  --color-divider: #343c3f;
  --color-control-border: #768386;
  --color-selected: #2d2b20;
  --color-selection-indicator: var(--color-brand);
  --color-disabled: #343e41;
  --color-bike-text: var(--color-inverse-bike);
  --color-transit-text: var(--color-inverse-transit);
  --color-success: #6ee7b7;
  --color-success-surface: #14372b;
  --color-warning: #ffd18a;
  --color-warning-surface: #392d1b;
  --color-danger: #ffb4ab;
  --color-danger-surface: #3a2022;
  --color-shadow: #0006;
  --color-scrim: #0009;
}

@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --color-secondary: var(--color-text);
    --color-control-border: var(--color-text);
    --color-divider: var(--color-control-border);
  }
}

/* Only an explicit map choice changes the basemap and its route palette. */
:root[data-map-style="dark"] {
  --color-map: #192123;
  --color-map-street: #2d393c;
  --color-map-text: var(--color-cloud);
  --color-map-surface: var(--color-asphalt);
  --color-map-secondary: #b8c2c7;
  --color-bike-stroke: var(--color-inverse-bike);
  --color-transit-stroke: var(--color-inverse-transit);
  --color-location: #79b8ff;
  --color-route-halo: var(--color-asphalt);
}