:root {
  color-scheme: light;
  --color-canvas: #f7f7f2;
  --color-surface: #ffffff;
  --color-text: #182824;
  --color-text-secondary: #53625d;
  --color-border: #d8ded8;
  --color-control-border: #7a8982;
  --color-accent: #0057b8;
  --color-accent-hover: #00458f;
  --color-accent-subtle: #edf3fc;
  --color-positive: #236448;
  --color-caution: #80510b;
  --color-danger: #b42318;
  --color-map-rent-1: #eef3f8;
  --color-map-rent-2: #cbdceb;
  --color-map-rent-3: #8fb8d7;
  --color-map-rent-4: #4e87b8;
  --color-map-rent-5: #155889;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-control: .5rem;
  --radius-surface: .75rem;
  --radius-sheet: 1.25rem;
  --radius-feature: 1.5rem;
  --radius-content: 1.25rem;
  --shadow-elevated: 0 .75rem 2.5rem rgb(24 40 36 / .14);
  --font-ui: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --content-max: 75rem;
  --reading-max: 47.5rem;
  --motion-control: 120ms;
  --motion-disclosure: 180ms;
  --motion-route: 220ms;

  /* Temporary aliases while the map's legacy selectors are retired screen by screen. */
  --z-ink: var(--color-text);
  --z-muted: var(--color-text-secondary);
  --z-paper: var(--color-canvas);
  --z-surface: var(--color-surface);
  --z-line: var(--color-border);
  --z-accent: var(--color-accent);
  --z-positive: var(--color-positive);
  --z-caution: var(--color-caution);
  --z-error: var(--color-danger);
  --z-radius: var(--radius-surface);
  --z-control-radius: var(--radius-control);
  --z-font: var(--font-ui);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-control: 1ms;
    --motion-disclosure: 1ms;
    --motion-route: 1ms;
  }
}

@media (forced-colors: active) {
  :root {
    --color-border: CanvasText;
    --color-control-border: CanvasText;
  }
}