/**
 * Design tokens — Figma Музей (accent, Roboto Flex, radii).
 * Breakpoints: 2560 / 1920 / 1536 / 1200 / 1024 / 768 / 440
 */
:root {
  --color-accent: #e84934;
  --color-accent-hover: #d73f2b;
  --color-selected: #d73f2b;
  --color-bg: #e7eae9;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f3f3;
  --color-ink: #353735;
  --color-text: #353735;
  --color-text-muted: #4d5357;
  --color-on-accent: #ffffff;

  /* Map underlay — Figma map PNG */
  --map-floor: #d1d5db;
  --map-wall: #adb2b8;
  --map-rail: #9399a1;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --font-family: 'Roboto Flex', system-ui, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-title: 18px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --shadow-soft: 0 4px 24px rgba(28, 43, 57, 0.12);
  --shadow-pin: 0 3px 4px rgba(0, 0, 0, 0.1);
  --control-h: 48px;
  --control-h-lg: 56px;
  --icon-sm: 16px;
  --icon-md: 24px;

  --z-viewport: 0;
  --z-overlay: 10;
  --z-popup: 20;

  --bp-440: 440px;
  --bp-768: 768px;
  --bp-1024: 1024px;
  --bp-1200: 1200px;
  --bp-1536: 1536px;
  --bp-1920: 1920px;

  /* 1920 — Figma grid-1 margin 24 */
  --chips-top: 12px;
  --chips-side: 12px;
  --chips-gap: 4px;
  --chip-radius: var(--radius-md);
  --chip-pr: 20px;
  --zoom-right: 24px;
  --zoom-panel-radius: 20px;
  --zoom-btn-size: 56px;
  --zoom-icon-size: 24px;
  --toggle-bottom: 24px;
  --popup-width: 360px;
  --map-inset: 24px;
  --map-radius: 40px;
  --minimap-size: 140px;
}

@media (max-width: 1536px) {
  :root {
    --map-inset: 20px;
    --map-radius: 36px;
  }
}

@media (max-width: 1200px) {
  :root {
    --zoom-right: 16px;
    --toggle-bottom: 16px;
    --popup-width: 320px;
    --map-inset: 16px;
    --map-radius: 32px;
  }
}

@media (max-width: 1024px) {
  :root {
    --chips-top: 12px;
    --chips-side: 12px;
    --zoom-right: 12px;
    --toggle-bottom: 12px;
    --map-inset: 12px;
    --map-radius: 32px;
    --chip-radius: 12px;
    --zoom-btn-size: 48px;
    --zoom-panel-radius: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --chips-top: 12px;
    --chips-side: 12px;
    --zoom-right: 12px;
    --toggle-bottom: 12px;
    --control-h: 44px;
    --map-inset: 12px;
    --map-radius: 32px;
    --minimap-size: 120px;
    --chip-radius: 12px;
  }
}

@media (max-width: 440px) {
  :root {
    --chips-top: 12px;
    --chips-side: 8px;
    --chips-gap: 4px;
    --chip-pr: 16px;
    --zoom-right: 8px;
    --toggle-bottom: 12px;
    --popup-width: min(320px, calc(100vw - 24px));
    --font-size-title: 16px;
    --map-inset: 8px;
    --map-radius: 32px;
    --control-h: 40px;
    --zoom-panel-radius: 12px;
    --zoom-btn-size: 44px;
    --zoom-icon-size: 20px;
    --icon-md: 20px;
  }
}