/* Design tokens: the colors, shadows and radii every other stylesheet reads.
   Light values are the default. The dark values apply when the OS asks for
   dark (unless the visitor picked light) or when the visitor picked dark with
   the theme toggle — public/js/theme.js sets data-theme on <html>. Keep the
   two dark blocks identical. The high-contrast palettes live in
   accessabilty.css. */

:root {
    --bg: #f6f4ee;
    --map-block: #e8e4d9;
    --map-road: #faf8f2;
    --surface: #ffffff;
    --surface-2: #fbfaf6;
    --ink: #1f2a37;
    --ink-dim: #6b7280;
    --border: #e3ded0;
    --teal: #0e7c86;
    --teal-ink: #0b656d;
    --orange: #e8622c;
    --orange-ink: #cf5322;
    --cat-roads-bg: #dce9fb;
    --cat-roads-ic: #3e72e0;
    --cat-public-bg: #dcf5e3;
    --cat-public-ic: #2fae60;
    --cat-animals-bg: #fbe9d6;
    --cat-animals-ic: #c17f27;
    --cat-water-bg: #d6f3f5;
    --cat-water-ic: #1a8fa0;
    --cat-waste-bg: #efe6d2;
    --cat-waste-ic: #8a6d1f;
    --cat-order-bg: #e6e0fb;
    --cat-order-ic: #6a4fd1;
    --cat-permit-bg: #fef3c7;
    --cat-permit-ic: #b45309;
    --status-done: #2fae60;
    --status-done-bg: #dcf5e3;
    --status-progress: #e8a419;
    --status-progress-bg: #fdf1d6;
    --status-unconfirmed: #e5484d;
    --status-unconfirmed-bg: #fbe0e1;
    --status-rejected: #6b7684;
    --status-rejected-bg: #e7e9ec;
    --shadow-1: 0 1px 2px rgba(31, 42, 55, .06), 0 4px 12px rgba(31, 42, 55, .08);
    --shadow-2: 0 8px 28px rgba(31, 42, 55, .16), 0 2px 6px rgba(31, 42, 55, .08);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --bg: #121212;
        --map-block: #1e2024;
        --map-road: #2a2d32;
        --surface: #1a1b1e;
        --surface-2: #222327;
        --ink: #f2f2f2;
        --ink-dim: #a0a0a5;
        --border: #333438;
        --teal: #45c2bb;
        --teal-ink: #6bd4cd;
        --orange: #f07a46;
        --orange-ink: #f6935f;
        --cat-roads-bg: #25415f;
        --cat-roads-ic: #8fb4f5;
        --cat-public-bg: #204a37;
        --cat-public-ic: #6fd89b;
        --cat-animals-bg: #463522;
        --cat-animals-ic: #e6b56e;
        --cat-water-bg: #1a4348;
        --cat-water-ic: #6fdcec;
        --cat-waste-bg: #3d3520;
        --cat-waste-ic: #d3b455;
        --cat-order-bg: #332b4c;
        --cat-order-ic: #b4a2f5;
        --cat-permit-bg: #463520;
        --cat-permit-ic: #f5c56b;
        --status-done: #57de95;
        --status-done-bg: #204a37;
        --status-progress: #f5c454;
        --status-progress-bg: #463b1c;
        --status-unconfirmed: #ff7f82;
        --status-unconfirmed-bg: #472628;
        --status-rejected: #b7c1cc;
        --status-rejected-bg: #30363d;
        color-scheme: dark;
    }
}

:root[data-theme=dark] {
    --bg: #121212;
    --map-block: #1e2024;
    --map-road: #2a2d32;
    --surface: #1a1b1e;
    --surface-2: #222327;
    --ink: #f2f2f2;
    --ink-dim: #a0a0a5;
    --border: #333438;
    --teal: #45c2bb;
    --teal-ink: #6bd4cd;
    --orange: #f07a46;
    --orange-ink: #f6935f;
    --cat-roads-bg: #25415f;
    --cat-roads-ic: #8fb4f5;
    --cat-public-bg: #204a37;
    --cat-public-ic: #6fd89b;
    --cat-animals-bg: #463522;
    --cat-animals-ic: #e6b56e;
    --cat-water-bg: #1a4348;
    --cat-water-ic: #6fdcec;
    --cat-waste-bg: #3d3520;
    --cat-waste-ic: #d3b455;
    --cat-order-bg: #332b4c;
    --cat-order-ic: #b4a2f5;
    --cat-permit-bg: #463520;
    --cat-permit-ic: #f5c56b;
    --status-done: #57de95;
    --status-done-bg: #204a37;
    --status-progress: #f5c454;
    --status-progress-bg: #463b1c;
    --status-unconfirmed: #ff7f82;
    --status-unconfirmed-bg: #472628;
    --status-rejected: #b7c1cc;
    --status-rejected-bg: #30363d;
    color-scheme: dark;
}