:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0a0a0b;
  --color-bg-elevated: #111214;
  --color-surface: #17181b;
  --color-surface-hover: #202125;
  --color-surface-strong: #27282d;
  --color-text: #f7f7f4;
  --color-text-muted: #a5a6ac;
  --color-text-subtle: #777981;
  --color-border: #2d2e33;
  --color-border-strong: #414249;
  --color-accent: #f2b233;
  --color-accent-hover: #ffc44d;
  --color-accent-soft: #f2b2331c;
  --color-accent-contrast: #171004;
  --color-success: #57d18c;
  --color-danger: #ff7777;
  --color-focus: #f8c65f;
  --color-header: #0a0a0be8;
  --color-overlay: #000000a6;
  --color-qr-surface: #080808;
  --color-map: #18191b;
  --color-map-deep: #101113;
  --color-marker-text: #171004;
  --color-marker-border: #fff8e8;
  --color-inverse-bg: #080808;
  --color-inverse-surface: #17181b;
  --color-inverse-text: #f7f7f4;
  --color-inverse-muted: #a5a6ac;
  --color-inverse-border: #2d2e33;
  --map-tile-filter: grayscale(0.75) invert(0.9) hue-rotate(180deg) brightness(0.62) contrast(1.25);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f6f2;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #f2f0ea;
  --color-surface-strong: #e9e6de;
  --color-text: #171719;
  --color-text-muted: #62636a;
  --color-text-subtle: #85868c;
  --color-border: #dedbd3;
  --color-border-strong: #c5c1b8;
  --color-accent: #c98508;
  --color-accent-hover: #ad7000;
  --color-accent-soft: #c9850818;
  --color-accent-contrast: #ffffff;
  --color-success: #168451;
  --color-danger: #bd3636;
  --color-focus: #9f6800;
  --color-header: #f7f6f2e8;
  --color-overlay: #17171966;
  --color-qr-surface: #080808;
  --color-map: #e8e5de;
  --color-map-deep: #d7d3ca;
  --color-marker-text: #171004;
  --color-marker-border: #ffffff;
  --color-inverse-bg: #080808;
  --color-inverse-surface: #17181b;
  --color-inverse-text: #f7f7f4;
  --color-inverse-muted: #a5a6ac;
  --color-inverse-border: #2d2e33;
  --map-tile-filter: saturate(0.7) contrast(0.95);
  --shadow-sm: 0 1px 2px rgb(22 18 10 / 0.08), 0 4px 12px rgb(22 18 10 / 0.05);
  --shadow-md: 0 12px 32px rgb(22 18 10 / 0.12);
  --shadow-lg: 0 24px 64px rgb(22 18 10 / 0.18);
}