/*
 * RentalSPb — глобальные дизайн-токены.
 *
 * Источник решений: improvements/Блок 1/задачи.txt, задача 1.
 * Компоненты используют только семантические роли из этого файла.
 */

:root {
  /* ---------- Брейкпоинты ---------- */
  --bp-mobile: 320px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  /* ---------- Контейнер и сетка ---------- */
  --container-max: 1200px;
  --container-wide-max: 1360px;
  --container-pad: 16px;
  --grid-gap: 16px;
  --header-height: 72px;

  /* ---------- Фирменные цвета ---------- */
  --color-primary: #674081;
  --color-primary-hover: #583474;
  --color-primary-active: #492B5E;
  --color-primary-soft: #F4EFF6;
  --color-primary-border: #D6C6DC;

  --color-accent: #62B22F;
  --color-accent-hover: #4E9224;
  --color-accent-active: #3E741D;
  --color-accent-soft: #EFF8E9;
  --color-accent-text: #35651B;

  /* Зелёный букв SPB из логотипа. Заливка светлая, поэтому текст поверх неё
     тёмный: белый на ней даёт 1.9:1 и не читается. */
  --color-logo-green: #9ACE35;
  --color-logo-ink: #111827;

  /* Secondary остаётся доступной зелёной ролью для кнопок и ссылок. */
  --color-secondary: #3E741D;
  --color-secondary-hover: #315E17;
  --color-secondary-active: #284D13;
  --color-secondary-soft: #EFF8E9;

  /* ---------- Статусные цвета ---------- */
  --color-success: #62B22F;
  --color-success-hover: #4E9224;
  --color-success-active: #3E741D;
  --color-success-soft: #EFF8E9;
  --color-success-text: #35651B;

  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-danger-active: #991B1B;
  --color-danger-soft: #FEECEC;
  --color-danger-text: #991B1B;

  --color-warning: #C75B12;
  --color-warning-hover: #A8470C;
  --color-warning-active: #87390A;
  --color-warning-soft: #FFF1E7;
  --color-warning-text: #87390A;

  /* Маркетинговые статусы карточек: coral / amber / purple / green. */
  --color-popular-soft: #FFF0ED;
  --color-popular-text: #B83224;
  --color-fast-booking-soft: #FFF5DF;
  --color-fast-booking-text: #8A4B00;
  --color-new-soft: var(--color-primary-soft);
  --color-new-text: var(--color-primary-active);
  --color-guest-choice-soft: var(--color-success-soft);
  --color-guest-choice-text: var(--color-success-text);

  /* ---------- Нейтральная шкала ---------- */
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-surface-alt: #F3F4F6;
  --color-surface-raised: rgba(255, 255, 255, 0.94);
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-text-invert: #FFFFFF;
  --color-on-media: #FFFFFF;

  /* ---------- Слои поверх медиа ---------- */
  --color-overlay-subtle: rgba(17, 24, 39, 0.62);
  --color-overlay: rgba(17, 24, 39, 0.72);
  --color-overlay-strong: rgba(17, 24, 39, 0.90);
  --color-border-on-media: rgba(255, 255, 255, 0.52);
  --color-on-media-soft: rgba(255, 255, 255, 0.86);
  --color-on-media-hover: rgba(255, 255, 255, 0.10);
  --photo-scrim: linear-gradient(180deg, transparent 28%, rgba(17, 24, 39, 0.82) 100%);
  --hero-scrim: radial-gradient(ellipse at 0 0, rgba(17, 24, 39, 0.88) 0%, rgba(17, 24, 39, 0.66) 42%, transparent 76%);
  --hero-scrim-mobile: linear-gradient(180deg, rgba(17, 24, 39, 0.86) 0%, rgba(17, 24, 39, 0.58) 38%, transparent 68%);
  --hero-scrim-strong: radial-gradient(ellipse at 0 0, rgba(17, 24, 39, 0.94) 0%, rgba(17, 24, 39, 0.72) 43%, transparent 78%);
  --hero-scrim-strong-mobile: linear-gradient(180deg, rgba(17, 24, 39, 0.92) 0%, rgba(17, 24, 39, 0.66) 40%, transparent 72%);
  --shadow-text-on-media: 0 2px 6px rgba(17, 24, 39, 0.28);
  --shadow-text-on-media-soft: 0 1px 4px rgba(17, 24, 39, 0.32);

  /* ---------- Типографика ---------- */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(2.25rem, 1.65rem + 2.7vw, 3.75rem);
  --lh-h1: 1.08;
  --fw-h1: 800;
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --lh-h2: 1.15;
  --fw-h2: 750;
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --lh-h3: 1.25;
  --fw-h3: 700;
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --lh-h4: 1.35;
  --fw-h4: 650;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fw-body: 400;
  --fs-body-sm: 14px;
  --lh-body-sm: 1.5;
  --fw-body-sm: 400;
  --fs-caption: 12px;
  --lh-caption: 1.45;
  --fw-caption: 500;
  --text-measure: 72ch;

  /* ---------- Радиусы ---------- */
  --radius-sm: 14px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-header: 0 1px 0 rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 14px rgba(17, 24, 39, 0.09);
  --shadow-lg: 0 18px 40px rgba(17, 24, 39, 0.13);
  --shadow-primary: 0 10px 22px rgba(103, 64, 129, 0.20);
  --shadow-button: 0 4px 8px rgba(103, 64, 129, 0.16);
  --shadow-button-hover: 0 6px 12px rgba(103, 64, 129, 0.20);
  --shadow-card-hover: 0 10px 14px rgba(17, 24, 39, 0.12);

  /* ---------- Базовый ритм ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 112px;
  --space-12: 120px;

  /* Расстояние между контентом соседних крупных секций. */
  --section-gap: 56px;
  --section-padding-block: calc(var(--section-gap) / 2);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-surface: 220ms;
  --duration-moderate: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: var(--duration-fast) var(--ease-out);
  --transition-slow: var(--duration-surface) var(--ease-out);
  --transition-reveal: var(--duration-moderate) var(--ease-out);

  /* ---------- Слои ---------- */
  --z-dropdown: 20;
  --z-sticky: 40;
  --z-overlay: 80;
  --z-notice: 90;
  --z-modal: 100;
  --z-toast: 120;
  --z-tooltip: 140;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 24px;
    --grid-gap: 24px;
    --section-gap: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-gap: 112px;
  }
}