:root {
  color-scheme: light;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eef2f3;
  --text: #14201f;
  --muted: #51605e;
  --line: #758684;
  --accent: #0b6b63;
  --accent-strong: #084f49;
  --on-accent: #ffffff;
  --danger: #b42318;
  --danger-bg: #fde8e6;
  --warn: #8a5a00;
  --warn-bg: #fff4d6;
  --info-bg: #e3f1ef;
  --focus: #1d4ed8;
  --pin-point: #0b6b63;
  --pin-first: #1d4ed8;
  --pin-last: #c2410c;
  --pin-selected: #111827;
  --trip-route: #5b6b69;
  --suspect: #6f7c7a;
  --shadow-1: 0 1px 2px rgb(16 24 24 / 12%), 0 4px 12px rgb(16 24 24 / 10%);
  --shadow-2: 0 8px 28px rgb(16 24 24 / 22%);
  --tile-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1514;
    --surface: #18211f;
    --surface-2: #212c2a;
    --text: #e8efee;
    --muted: #a7b6b3;
    --line: #5d716e;
    --accent: #4fd1c0;
    --accent-strong: #7fe3d6;
    --on-accent: #06201d;
    --danger: #ff8a80;
    --danger-bg: #3d1f1c;
    --warn: #ffd166;
    --warn-bg: #3a2e12;
    --info-bg: #173633;
    --focus: #8ab4ff;
    --pin-point: #4fd1c0;
    --pin-first: #7aa7ff;
    --pin-last: #ff9a62;
    --pin-selected: #ffffff;
    --trip-route: #8fa09d;
    --suspect: #9aa9a6;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 35%);
    --shadow-2: 0 8px 28px rgb(0 0 0 / 55%);
    --tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1514;
  --surface: #18211f;
  --surface-2: #212c2a;
  --text: #e8efee;
  --muted: #a7b6b3;
  --line: #5d716e;
  --accent: #4fd1c0;
  --accent-strong: #7fe3d6;
  --on-accent: #06201d;
  --danger: #ff8a80;
  --danger-bg: #3d1f1c;
  --warn: #ffd166;
  --warn-bg: #3a2e12;
  --info-bg: #173633;
  --focus: #8ab4ff;
  --pin-point: #4fd1c0;
  --pin-first: #7aa7ff;
  --pin-last: #ff9a62;
  --pin-selected: #ffffff;
  --trip-route: #8fa09d;
  --suspect: #9aa9a6;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 35%);
  --shadow-2: 0 8px 28px rgb(0 0 0 / 55%);
  --tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
}