/* Fresh greens, warm ivory surfaces, coral favorites and turquoise navigation. */
:root {
    --font-family-sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;
    --font-heading-weight: 300;
    --font-heading-size: clamp(2rem, calc(1.75rem + 1vw), 2.5rem);
    --font-section-heading-size: 1.25rem;
    --font-heading-line-height: 1.15;
    --font-heading-letter-spacing: -0.025em;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-label-weight: 500;
    --font-emphasis-weight: 600;
    --font-grade-weight: 800;
    --line-height-body: 1.6;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --layout-gutter: var(--space-6);
    --panel-padding: var(--space-6);
    --panel-radius: var(--space-6);
    --control-size: 2.5rem;
    --control-radius: var(--radius-md);
    --content-width: 60rem;
    --glass-blur: 20px;
    --motion-fast: 160ms;
    --motion-normal: 220ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --color-ink: #183f2b;
    --color-text: #27533a;
    --color-muted: #36553d;
    --color-counter: #747b76;
    --color-icon-hover: #103821;
    --color-primary: #177c43;
    --color-primary-hover: #116b39;
    --color-primary-active: #10552e;
    --color-primary-soft: #dcf5df;
    --color-primary-soft-hover: #c7edce;
    --color-favorite: #c1354b;
    --color-favorite-rgb: 193, 53, 75;
    --color-danger: #8b2d40;
    --color-navigation: #007e9e;
    --color-navigation-hover: #006c88;
    --color-navigation-active: #005970;
    --color-navigation-rgb: 0, 126, 158;
    --color-location: #009abb;
    --color-location-rgb: 0, 154, 187;
    --color-on-primary: #fffdf4;
    --color-canvas: #f1f9e8;
    --color-canvas-deep: #def2d1;
    --color-neutral-soft: #f0f2dc;
    --color-primary-rgb: 23, 124, 67;
    --color-shadow-rgb: 24, 63, 43;
    --color-white-rgb: 255, 253, 244;
    --surface-glass: rgba(255, 253, 244, 0.82);
    --surface-panel: rgba(255, 253, 244, 0.78);
    --surface-quiet: rgba(255, 253, 244, 0.96);
    --surface-raised: #fffdf4;
    --surface-input: rgba(255, 253, 244, 0.9);
    --surface-hover: rgba(255, 253, 244, 0.96);
    --surface-chip: rgba(255, 253, 244, 0.8);
    --border-soft: rgba(24, 63, 43, 0.14);
    --border-strong: rgba(24, 63, 43, 0.22);
    --border-glass: rgba(255, 253, 244, 0.68);
    --state-hover: rgba(23, 124, 67, 0.08);
    --state-active: rgba(23, 124, 67, 0.14);
    --backdrop-color: rgba(20, 62, 43, 0.2);
    --shadow-glass: 0 8px 32px rgba(24, 63, 43, 0.12), 0 2px 8px rgba(24, 63, 43, 0.08), inset 0 1px 0 rgba(255, 253, 244, 0.6);
    --shadow-favorite-pulse: 0 12px 36px rgba(var(--color-favorite-rgb), 0.36), 0 3px 14px rgba(var(--color-favorite-rgb), 0.24), inset 0 1px 0 rgba(var(--color-white-rgb), 0.6);
    --button-gradient: linear-gradient(180deg, var(--color-primary), var(--color-primary-hover));
    --button-hover-gradient: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary-active));
    --navigation-gradient: linear-gradient(180deg, var(--color-navigation), var(--color-navigation-hover));
    --navigation-hover-gradient: linear-gradient(180deg, var(--color-navigation-hover), var(--color-navigation-active));
    --range-gradient: linear-gradient(90deg, #72d889, var(--color-primary));
    --difficulty-1-bg: #daf6dc;
    --difficulty-1-text: #176039;
    --difficulty-2-bg: #e7f5bf;
    --difficulty-2-text: #4a6420;
    --difficulty-3-bg: #fff0b3;
    --difficulty-3-text: #7b570d;
    --difficulty-4-bg: #ffe2b5;
    --difficulty-4-text: #8a4513;
    --difficulty-5-bg: #ffd7c2;
    --difficulty-5-text: #963b26;
    --difficulty-6-bg: #ffd8de;
    --difficulty-6-text: #983447;
    --map-marker-1: #38b84a;
    --map-marker-2: #a1c83a;
    --map-marker-3: #f0c232;
    --map-marker-4: #f19a38;
    --map-marker-5: #ec7544;
    --map-marker-6: #e95f78;
    --map-selected: var(--color-primary-hover);
    --map-selected-ring: var(--color-primary-active);
    --map-marker-border: var(--color-ink);
    --map-marker-inner-border: var(--color-on-primary);
    --map-marker-hover-ring: rgba(255, 253, 244, 0.8);
    --map-track: var(--color-primary);
    --map-position: var(--color-location);
    --map-position-border: var(--color-on-primary);
    --map-accuracy-fill: rgba(var(--color-location-rgb), 0.14);
    --map-accuracy-stroke: rgba(var(--color-location-rgb), 0.5);
    --map-position-halo: rgba(var(--color-location-rgb), 0.24);
}

@media (max-width: 768px) {
    :root {
        --layout-gutter: var(--space-4);
        --panel-padding: var(--space-4);
        --panel-radius: var(--space-4);
        --control-size: 2.75rem;
    }
}