:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bg: #F3EDE0;
  --surface: #FFFFFF;
  --surface-2: #EAE1CE;
  --ink: #22303C;
  --muted: #5A6672;
  --line: #D8D2C4;
  --line-strong: #7A705C;
  --accent: #1D5C99;
  --on-accent: #FFFFFF;
  --accent-hover: #164A7D;
  --soft: #DCE6F0;
  --on-soft: #1D5C99;
  --ok: #2F6B3F;
  --ok-soft: #DDEBDF;
  --on-ok: #FFFFFF;
  --warn: #8A5E0E;
  --warn-soft: #F4E4BF;
  --on-warn: #FFFFFF;
  --danger: #A83A22;
  --danger-soft: #F3D9D0;
  --on-danger: #FFFFFF;
  --info: #1D5C99;
  --info-soft: #DCE6F0;
  --on-info: #FFFFFF;
  --focus: #1D5C99;
  --scrim: rgba(34, 48, 60, .35);
  --shadow-1: 0 2px 10px rgba(34, 48, 60, .10);
  --shadow-2: 0 12px 40px rgba(34, 48, 60, .20);
  --map-land: #EAE1CE;
  --map-grid: #DBD0B8;
  --map-water: #CFDCE6;
  --map-label: #9B8E72;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-22: 22px;
  --text-26: 26px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 8px;
  --radius-card: 12px;
  --radius-nav: 6px;
  --control: 36px;
  --bar: 32px;
  --top: 56px;
  --menu: 240px;
  --menu-collapsed: 56px;
  --help: 400px;
  --dur: 150ms;
  --ease: ease;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151B21;
    --surface: #1E262E;
    --surface-2: #28323C;
    --ink: #E8E3D8;
    --muted: #A9B3BE;
    --line: #2F3A45;
    --line-strong: #6A7A8C;
    --accent: #7FB0E6;
    --on-accent: #0E1A26;
    --accent-hover: #9AC2EE;
    --soft: #243646;
    --on-soft: #9AC2EE;
    --ok: #8FD0A0;
    --ok-soft: #1F3327;
    --on-ok: #0E1A12;
    --warn: #E8C26A;
    --warn-soft: #3A2F15;
    --on-warn: #1A1406;
    --danger: #F39A82;
    --danger-soft: #3D221C;
    --on-danger: #1A0E0A;
    --info: #7FB0E6;
    --info-soft: #243646;
    --on-info: #0E1A26;
    --focus: #9AC2EE;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-2: 0 12px 40px rgba(0, 0, 0, .55);
    --map-land: #222B33;
    --map-grid: #2E3942;
    --map-water: #1B2C3A;
    --map-label: #6F7D8B;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #151B21;
  --surface: #1E262E;
  --surface-2: #28323C;
  --ink: #E8E3D8;
  --muted: #A9B3BE;
  --line: #2F3A45;
  --line-strong: #6A7A8C;
  --accent: #7FB0E6;
  --on-accent: #0E1A26;
  --accent-hover: #9AC2EE;
  --soft: #243646;
  --on-soft: #9AC2EE;
  --ok: #8FD0A0;
  --ok-soft: #1F3327;
  --on-ok: #0E1A12;
  --warn: #E8C26A;
  --warn-soft: #3A2F15;
  --on-warn: #1A1406;
  --danger: #F39A82;
  --danger-soft: #3D221C;
  --on-danger: #1A0E0A;
  --info: #7FB0E6;
  --info-soft: #243646;
  --on-info: #0E1A26;
  --focus: #9AC2EE;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .55);
  --map-land: #222B33;
  --map-grid: #2E3942;
  --map-water: #1B2C3A;
  --map-label: #6F7D8B;
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}