/* =============================================================================
   tokens.css — дизайн-токены витрины (:root)
   ADR-04b · docs/decisions.md · порядок модулей: includes/public_stylesheets.php
   =============================================================================
 *
 * ПОДКЛЮЧЕНИЕ (production)
 *   includes/header.php → public_stylesheet_link_tags() — параллельные <link>, без @import.
 *   Порядок = public_stylesheet_modules() (должен совпадать с assets/css/style.css).
 *   Кэш: asset_file_version('assets/css/…') на каждый файл.
 *
 * СПИСОК МОДУЛЕЙ (после tokens; новый файл — добавить в оба места)
 *   reset, typography, animations, navbar, buttons, card-catalog-shared, hero, cta,
 *   booking-widget, filters, hotel-card, room-card, features-section, recent-views,
 *   page-header, empty-state, pages/listings, footer, sidebar, lightbox, gallery-swiper,
 *   booking-modal, toast, aos, rich-description, pages/room-details, pages/hotel-details,
 *   pages/book, pages/error-404, pages/legal, responsive, reduced-motion, print.
 *
 * ПРАВИЛА ДЛЯ НОВЫХ СТИЛЕЙ
 *   • Цвета/отступы/радиусы — только через переменные :root, не литералы в components/*.
 *   • --primary-color — декор: заливки .btn, градиенты, focus-border, UI на тёмном/фото.
 *   • --primary-on-light — текст и иконки на белом/светлом (WCAG AA); не primary-color на белом.
 *   • --decorative-blue-alpha-* — атмосферные подложки (body, CTA, секции).
 *   • --primary-alpha-* — тени, ring, border при hover (карточки, формы, navbar).
 *   • Альфы primary: color-mix от --primary-color; при смене hex primary пересчитаются сами.
 *
 * ВНЕ ЭТОГО ФАЙЛА (синхронизировать вручную при смене палитры)
 *   includes/header.php — inline --loader-accent / --loader-bg (= --primary-color, --light, --neutral).
 *   assets/css/maintenance.css — автономная страница 503, минимальный :root.
 *
 * ОГЛАВЛЕНИЕ :root (секции ниже)
 *   1. Палитра   2. Шрифты   3. Нейтральные альфы   4. Primary альфы
 *   5. Secondary/cream   6. Радиусы, тени, elevation   7. Кнопки
 *   8. Карточки, секции, fluid-заголовки   9. Переходы, hover, motion
 *  10. Типографика (веса, scale)  11. Focus и формы  12. Overlay, glass, input
 *  13. Navbar, hero, CTA  14. Footer, gallery
 *  15. Spacing scale (8-px grid)  16. Glass scale  17. Z-index scale
 *  18. Семантические токены бренда
 * ============================================================================= */

:root {
    /* --- 1. Палитра бренда (Премиум «Рассвет на пляже») --- */
    --primary-color: #8FAFBC;        /* Мягкий небесно-голубой; загрузчик в header.php: --loader-accent */
    --primary-on-light: #3D6678;     /* Текст/иконки на белом (AA 4.5:1+) */
    --primary-dark: #3D6678;         /* Глубокий морской (= on-light для hover/active текста) */
    --primary-dark-rgb: 61, 102, 120;
    --primary-light: #B8D4DD;        /* Светлый голубой */
    --secondary-color: #B8885C;      /* Теплое золото */
    --secondary-dark: #9A6F47;       /* Темное золото */
    --secondary-light: #F5E6D3;      /* Песочный крем */
    
    --dark: #2C2C2C;
    --light: #F8F6F2;   /* тёплый кремовый; загрузчик в header.php: --loader-bg */
    --bg-warm: #FAF7F2; /* светлый тёплый для чередующихся секций */
    --gray: #6B6B6B;
    --white: #FFFFFF;
    --neutral: #E8E8E8;       /* загрузчик в header.php: --loader-track */
    --neutral-warm: #E5E0D8;  /* тёплый аналог для бордеров на тёплых фонах */
    --success: #6B9F7B;
    --notification-error: #b85450;   /* цвет уведомлений об ошибках (a11y, контраст) */
    --text-muted: #6B6B6B;   /* контраст на белом 7.5:1 (WCAG AAA), ранее #8A8A8A = 3.5:1 */
    --footer-link: var(--white-alpha-82); /* ссылки подвала на тёмном градиенте (этап 3.5) */
    --badge-rating-bg: #d9a008;      /* рейтинг на карточках: контрастнее Bootstrap warning */
    --badge-rating-fg: #1f1f1f;

    /* --- 2. Шрифты --- */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* --- 3. Нейтральные альфы (тени, overlay, glass, navbar) --- */
    --black-alpha-04: rgba(0, 0, 0, 0.04);
    --black-alpha-05: rgba(0, 0, 0, 0.05);
    --black-alpha-06: rgba(0, 0, 0, 0.06);
    --black-alpha-08: rgba(0, 0, 0, 0.08);
    --black-alpha-10: rgba(0, 0, 0, 0.1);
    --black-alpha-12: rgba(0, 0, 0, 0.12);
    --black-alpha-15: rgba(0, 0, 0, 0.15);
    --black-alpha-18: rgba(0, 0, 0, 0.18);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-25: rgba(0, 0, 0, 0.25);
    --black-alpha-30: rgba(0, 0, 0, 0.3);
    --black-alpha-45: rgba(0, 0, 0, 0.45);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --black-alpha-60: rgba(0, 0, 0, 0.6);
    --black-alpha-70: rgba(0, 0, 0, 0.7);
    --black-alpha-80: rgba(0, 0, 0, 0.8);
    --black-alpha-90: rgba(0, 0, 0, 0.9);
    --white-alpha-08: rgba(255, 255, 255, 0.08);  /* glass-border-subtle, Modern Elite рамка */
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
    --white-alpha-20: rgba(255, 255, 255, 0.2);
    --white-alpha-25: rgba(255, 255, 255, 0.25);
    --white-alpha-35: rgba(255, 255, 255, 0.35);
    --white-alpha-50: rgba(255, 255, 255, 0.5);
    --white-alpha-55: rgba(255, 255, 255, 0.55);
    --white-alpha-60: rgba(255, 255, 255, 0.6);
    --white-alpha-65: rgba(255, 255, 255, 0.65);
    --white-alpha-70: rgba(255, 255, 255, 0.7);
    --white-alpha-80: rgba(255, 255, 255, 0.8);
    --white-alpha-82: rgba(255, 255, 255, 0.82);
    --white-alpha-85: rgba(255, 255, 255, 0.85);
    --white-alpha-90: rgba(255, 255, 255, 0.9);
    --white-alpha-92: rgba(255, 255, 255, 0.92);
    --white-alpha-95: rgba(255, 255, 255, 0.95);
    --white-alpha-96: rgba(255, 255, 255, 0.96);

    /* --- 4. Полупрозрачные слои бренда (от --primary-dark, не от голубого primary-color) --- */
    --primary-dark-alpha-15: color-mix(in srgb, var(--primary-dark) 15%, transparent);
    --primary-dark-alpha-20: color-mix(in srgb, var(--primary-dark) 20%, transparent);
    --primary-dark-alpha-25: color-mix(in srgb, var(--primary-dark) 25%, transparent);
    --decorative-blue-alpha-03: color-mix(in srgb, var(--primary-dark) 3%, transparent);
    --decorative-blue-alpha-05: color-mix(in srgb, var(--primary-dark) 5%, transparent);
    --decorative-blue-alpha-20: var(--primary-dark-alpha-20);
    --decorative-blue-alpha-40: color-mix(in srgb, var(--primary-dark) 40%, transparent);
    --decorative-blue-alpha-90: color-mix(in srgb, var(--primary-dark) 90%, transparent);
    --primary-alpha-15: var(--primary-dark-alpha-15);
    --primary-alpha-20: var(--primary-dark-alpha-20);
    --primary-alpha-25: var(--primary-dark-alpha-25);

    /* --- 5. Secondary warm, cream (логотип navbar, градиенты CTA/page-header) --- */
    --secondary-warm-alpha-03: rgba(199, 149, 109, 0.03);
    --secondary-warm-alpha-88: rgba(199, 149, 109, 0.88);
    --cream-glow-50: rgba(244, 228, 193, 0.5);
    --cream-glow-85: rgba(244, 228, 193, 0.85);
    /* Непрозрачные стопы градиента логотипа (те же RGB, что у cream-glow) */
    --cream-solid: #f4e4c1;
    --cream-solid-deep: #e5d4a6;
    --warm-gray-alpha-50: rgba(235, 230, 222, 0.5);

    /* --- 6. Радиусы, тени, elevation --- */

    /* Радиусы — шкала (xs → full) */
    --radius-xs: 2px;           /* только для скроллбаров и микро-деталей */
    --radius-decoration: 3px;   /* декоративные акценты (линии, pill-border) */
    --radius-sm: 8px;           /* кнопки, инпуты, чипы */
    --radius-md: 12px;          /* модалки, виджеты, крупные кнопки */
    --radius-lg: 16px;          /* карточки отелей, номеров, разделы */
    --radius-xl: 20px;          /* крупные промо-плашки, hero-блоки */
    --radius-pill: 999px;       /* pill-кнопки, бейджи, теги */
    --radius-full: 50%;         /* аватары, круглые иконки */
    --radius-map: 15px;         /* карта на странице отелей */

    /* Алиасы (обратная совместимость) */
    --card-radius: var(--radius-lg);
    --btn-radius: var(--radius-sm);
    --input-radius: var(--radius-md);
    --input-radius-modal: var(--radius-sm);

    /* Elevation scale (L0–L5; принцип: минимально допустимая высота)
       L0 flat → L1 карточка → L2 hover/sticky → L3 popover → L4 modal/toast → L5 lightbox */
    --elev-0: none;
    --elev-1: 0 2px 12px var(--black-alpha-06);    /* карточка в покое */
    --elev-2: 0 4px 20px var(--black-alpha-08);    /* карточка hover, sticky CTA */
    --elev-3: 0 8px 32px var(--black-alpha-12);    /* popover, dropdown, weather card */
    --elev-4: 0 8px 32px var(--black-alpha-18);    /* toast, booking modal */
    --elev-5: 0 25px 60px var(--black-alpha-50);   /* lightbox, fullscreen overlay */

    /* Тени — алиасы elevation; специальные тени сохранены как есть */
    --shadow-sm: var(--elev-1);
    --shadow-md: var(--elev-2);
    --shadow-lg: var(--elev-3);
    --shadow-hover: 0 10px 32px var(--black-alpha-12);    /* карточка hover (чуть глубже elev-2) */
    --shadow-elevated: 0 4px 20px var(--black-alpha-15);  /* плашка поверх контента */
    --shadow-sticky-bar: 0 -4px 20px var(--black-alpha-15); /* прилипающая панель снизу (тень вверх) */
    --shadow-gallery-ui: 0 10px 25px var(--black-alpha-25); /* стрелки/контролы галереи */
    --shadow-card-glass: 0 4px 15px var(--black-alpha-15);  /* glass-карточка сайдбара */
    --shadow-booking-modal: var(--elev-4);
    --shadow-lightbox: var(--elev-5);

    /* --- 7. Кнопки --- */
    --btn-padding-y: 0.875rem;
    --btn-padding-x: 2rem;
    --btn-padding-compact-y: 0.5rem;
    --btn-padding-compact-x: 1rem;
    --btn-padding-modal-y: 0.75rem;
    --btn-padding-modal-x: 1.5rem;
    --btn-padding-nav-y: 0.6rem;
    --btn-padding-nav-x: 1.5rem;
    --btn-outline-border-width: 1.5px;
    --primary-dark-hover: #2d5361;
    --btn-touch-padding-y: 0.75rem;  /* мин. зона нажатия в @media 768px */
    --btn-letter-spacing: 0.02em;    /* все варианты .btn — один трекинг, без uppercase */

    /* --- 8. Карточки, листинги, вертикальный ритм секций --- */
    --listing-gap: 1.25rem;                  /* зазор между карточками во всех листингах */
    --content-gap: 1.5rem;                   /* зазор в двухколоночном layout (контент + сайдбар) */
    --card-content-padding: 1.375rem;        /* внутренний отступ контента карточки */
    --card-content-padding-horizontal: 2rem; /* горизонтальная карточка отеля: чуть просторнее */
    --card-widget-padding: 1.5rem;           /* отступ виджетов сайдбара и блоков (room-specs, policies) */
    --card-image-height: 260px;              /* превью вертикальных карточек отеля и номера */
    --room-card-image-height: var(--card-image-height); /* алиас для обратной совместимости */
    --card-image-height-horizontal: 320px;   /* горизонтальная карточка отеля */
    --card-image-height-horizontal-mobile: 260px;  /* горизонтальная карточка на мобильных */
    /* Вертикальный ритм секций */
    --section-padding-y: 2rem;
    --section-padding-top: 4.5rem;
    --section-padding-top-mobile: 5.5rem;
    --section-padding-accent-y: 5rem;
    --section-padding-centered-top: 10rem;
    --section-padding-footer-strip-y: calc(var(--section-padding-y) * 0.75);
    /* Высота sticky CTA + небольшой зазор (safe-area добавляется в sidebar.css через calc) */
    --layout-sticky-booking-clearance: 5.25rem;
    --section-header-mb: 1.25rem;
    --listing-gap-mobile: 1.5rem;
    --gallery-padding-bottom: 3.125rem;
    --section-title-size: clamp(1.35rem, 2vw + 0.75rem, 1.75rem);
    --page-title-size: clamp(1.75rem, 3.5vw + 0.75rem, 2.75rem);
    --hero-title-size: clamp(2rem, 4.5vw + 0.875rem, 3rem);
    --cta-title-size: clamp(1.65rem, 3vw + 0.75rem, 2.375rem);

    /* --- 9. Переходы, анимации, hover карточек, motion scale --- */

    /* Motion scale (4 роли длительности; easing ниже) */
    --motion-fast: 150ms;    /* hover/focus микро-отклик */
    --motion-base: 200ms;    /* стандартные UI-переходы */
    --motion-slow: 320ms;    /* открытие modal/lightbox */
    --motion-ambient: 5.8s;  /* «дыхание» погоды/parallax/hero — отключается в reduced-motion */
    --motion-ambient-page-header: 35s; /* медленный pan фона page-header */
    --motion-overlay-fade: 3.2s;       /* появление overlay page-header */

    /* Easing (по образцу Material 3) */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* стандартные переходы */
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.4); /* акцентные появления */
    --ease-decel: cubic-bezier(0, 0, 0.2, 1);        /* выходы / slide-out */

    /* Алиасы (обратная совместимость) */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-card-hover: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration-fast: 0.3s;
    --animation-duration-base: 0.6s;
    --animation-duration-slow: 0.8s;
    --animation-delay-base: 0.2s;
    --animation-easing: ease-out;

    /* Hover эффекты карточек */
    --card-hover-scale: 1.05;
    --card-hover-translateY: -2px;

    /* Брейкпоинты (Bootstrap 5; в @media нельзя var() — только справка)
       - max-width: 575.98px  (< sm)
       - max-width: 767.98px  (< md)
       - max-width: 991.98px  (< lg)
       - min-width: 992px     (≥ lg) */

    /* --- 10. Типографика: веса, модульный ряд, line-height, кегли --- */

    /* Font-weight scale */
    --font-weight-display-light: 300; /* display/editorial: скроллхинт, подзаголовки-hero */
    --font-weight-regular: 400;       /* основной текст */
    --font-weight-medium: 500;        /* заголовки карточек, подзаголовки */
    --font-weight-semibold: 600;      /* заголовки секций, акценты */
    --font-weight-bold: 700;          /* сильные акценты, hero-элементы */
    --font-weight-display-heavy: 900; /* только крупный декоративный display */

    /* Алиасы (обратная совместимость) */
    --font-weight-hero: var(--font-weight-regular);
    --font-weight-section: var(--font-weight-semibold);
    --font-weight-card: var(--font-weight-medium);

    /* Major Third (×1.25) от 1rem */
    --type-step-0: 0.8rem;
    --type-step-1: 1rem;
    --type-step-2: 1.25rem;
    --type-step-3: 1.5625rem;

    --text-xs: var(--type-step-0);
    --text-sm: 0.875rem;
    --text-base: var(--type-step-1);
    --text-lg: 1.125rem;
    --text-xl: var(--type-step-2);
    --text-2xl: var(--type-step-3);
    --text-2xs: 0.65rem;       /* только декор: подзаголовок логотипа */
    --text-3xs: 0.625rem;      /* декор: логотип на средних брейкпоинтах */
    --text-body-tight: calc(var(--text-base) + 0.05rem);

    --line-height-display: 1.15;
    --line-height-heading: 1.25;
    --line-height-body: 1.67;
    --line-height-loose: 1.72;
    --card-title-size: 1.35rem;
    --card-title-size-sm: 1.15rem;
    --text-breadcrumb: 0.85rem;
    --text-caption: 0.9rem;
    --text-caption-wide: calc(var(--text-base) - 0.05rem);
    --title-legal: 2.25rem;
    --title-error-code: 6rem;
    --logo-main-size: 2rem;
    --logo-main-size-compact: 1.625rem;
    --logo-sub-letter-spacing: 0.14em;
    --logo-sub-letter-spacing-compact: 0.12em;

    /* --- 11. Focus и формы --- */

    /* Focus scale (единый источник; без голубого primary-color) */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--primary-dark);          /* светлый фон */
    --focus-ring-color-accent: var(--white);          /* тёмный фон / hero / фото */

    /* Алиасы (обратная совместимость) */
    --focus-visible-outline-width: var(--focus-ring-width);
    --focus-visible-outline-offset: var(--focus-ring-offset);
    --focus-visible-outline-color: var(--focus-ring-color);
    --focus-visible-outline-color-accent: var(--focus-ring-color-accent);

    --focus-ring: 0 0 0 0.2rem var(--primary-dark-alpha-20);
    --focus-ring-modal: 0 0 0 3px var(--primary-dark-alpha-20);

    /* Bootstrap 5.3: подмена синего #0d6efd на бренд (CDN грузится до наших модулей) */
    --bs-blue: var(--primary-dark);
    --bs-primary: var(--primary-dark);
    --bs-primary-rgb: var(--primary-dark-rgb);
    --bs-link-color: var(--primary-on-light);
    --bs-link-hover-color: var(--primary-dark-hover);
    --bs-focus-ring-color: rgba(var(--primary-dark-rgb), 0.28);
    --bs-focus-ring-opacity: 0.28;
    --border-subtle: 1px solid var(--black-alpha-04);

    /* Контексты форм */
    --form-surface-glass-bg: var(--white-alpha-25);
    --form-surface-card-bg: var(--white);
    --form-focus-ring-glass: var(--focus-ring-modal);
    --form-focus-ring-solid: var(--focus-ring);

    /* Поля ввода */
    --input-padding-y: 0.75rem;
    --input-padding-x: 1rem;
    --input-padding-compact-y: 0.5rem;
    --input-padding-compact-x: 0.75rem;
    --input-border: 1px solid var(--neutral);
    --input-border-modal: 1px solid var(--neutral);
    --input-padding-modal-y: 0.6rem;
    --input-padding-modal-x: 0.75rem;

    /* --- 12. Overlay карточек, glass-сайдбар --- */
    --card-overlay-bg: var(--black-alpha-30);
    --gradient-overlay-hero: linear-gradient(135deg, var(--decorative-blue-alpha-90) 0%, var(--secondary-warm-alpha-88) 100%);
    --overlay-gradient: linear-gradient(to bottom, var(--black-alpha-30) 0%, var(--black-alpha-45) 40%, var(--black-alpha-70) 100%);
    --glass-bg: var(--white-alpha-90);              /* алиас → --glass-bg-strong (Этап 3) */
    --glass-border: 1px solid var(--white-alpha-50); /* алиас → --glass-border-subtle (Этап 3) */
    --icon-circle-bg: linear-gradient(135deg, var(--primary-light), var(--secondary-light));

    /* --- 13. Navbar, hero, CTA, page-header --- */
    --navbar-padding-y: 1rem;
    --navbar-padding-y-scrolled: 0.75rem;
    --navbar-bg: var(--black-alpha-15);
    --navbar-bg-scrolled: var(--white-alpha-95);
    --navbar-border: 1px solid var(--white-alpha-10);
    --navbar-border-scrolled: 1px solid var(--black-alpha-06);
    --navbar-shadow-scrolled: 0 2px 20px var(--black-alpha-08);
    --nav-link-color: var(--white-alpha-95);
    --hero-min-height: 620px;
    --hero-padding-top: 120px;
    --hero-padding-bottom: 24px;
    --hero-content-max-width: 1050px;
    --hero-padding-top-mobile: 100px;
    --text-shadow-hero: 0 3px 25px var(--black-alpha-70);
    --text-shadow-hero-sub: 0 2px 15px var(--black-alpha-80);
    --cta-padding-y: var(--section-padding-accent-y);
    --cta-text-shadow: 0 4px 20px var(--black-alpha-20);
    --cta-text-shadow-sm: 0 2px 10px var(--black-alpha-10);
    --page-header-height: 440px;
    --page-header-padding-top: 88px;
    --page-header-padding-bottom: 60px;

    /* --- 14. Footer, lightbox, gallery --- */
    --footer-bg-end: #1a252f;
    --overlay-bg-dark: var(--black-alpha-90);
    --lightbox-bg: #0b0b0f;
    --gallery-slide-height: 280px;

    /* --- 15. Spacing scale (8-px grid) ---
       Применять для padding / margin / gap в компонентах (Этапы 2–5).
       В @media нельзя var() — используй литералы на брейкпоинтах.
       0    1     2     3     4      5      6      7      8     9      10    11    12
       0   2px   4px   8px   12px  16px   20px   24px   32px  40px   48px  64px  80px */
    --space-0:  0;
    --space-1:  0.125rem;   /*  2px */
    --space-2:  0.25rem;    /*  4px */
    --space-3:  0.5rem;     /*  8px */
    --space-4:  0.75rem;    /* 12px */
    --space-5:  1rem;       /* 16px */
    --space-6:  1.25rem;    /* 20px */
    --space-7:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-9:  2.5rem;     /* 40px */
    --space-10: 3rem;       /* 48px */
    --space-11: 4rem;       /* 64px */
    --space-12: 5rem;       /* 80px */

    /* --- 16. Glass scale ---
       Мобильная политика: на max-width 767.98px компоненты используют --glass-blur-sm;
       тяжёлые поверхности (modal-fullscreen, lightbox) отключают blur полностью.
       При prefers-reduced-data: reduce — backdrop-filter: none везде. */
    --glass-blur-sm: blur(8px) saturate(120%);   /* navbar, chip, compact glass */
    --glass-blur-md: blur(14px) saturate(140%);  /* page-header, sidebar, hero inner */
    --glass-blur-lg: blur(20px) saturate(160%);  /* booking-modal, lightbox UI */

    --glass-bg-subtle: var(--white-alpha-60);    /* лёгкая стеклянная подложка */
    --glass-bg-medium: var(--white-alpha-82);    /* стандартная glass-карточка */
    --glass-bg-strong: var(--white-alpha-92);    /* плотная glass-плашка (chip, widget) */

    /* Тонкая glass-рамка в стиле Modern Elite (1px white 8%) */
    --glass-border-subtle: 1px solid var(--white-alpha-08);

    /* --- 17. Z-index scale ---
       Все компоненты должны использовать только эти уровни.
       Числовые литералы z-index в компонентах заменяются в Этапе 7. */
    --z-base:          1;     /* обычный поток, перекрытие внутри секции */
    --z-overlay:       5;     /* overlay поверх изображения карточки */
    --z-sticky:      100;     /* sticky CTA / sticky header на странице */
    --z-nav:        1000;     /* navbar (Bootstrap z-index-fixed = 1030, берём ниже) */
    --z-dropdown:   1020;     /* выпадающие меню */
    --z-modal-backdrop: 1040; /* затемнение под модалкой */
    --z-toast-social: 1045;   /* marketing social proof toast (между modal-backdrop и modal) */
    --z-modal:      1050;     /* модалка бронирования */
    --z-popover:    1060;     /* tooltips, weather popover */
    --z-toast:      1080;     /* toast-уведомления поверх модалки */
    --z-lightbox:   2000;     /* лайтбокс — выше модалки */
    --z-notification: 9999;   /* критические alert'ы (выше lightbox, ниже page-loader) */
    --z-loader:    10000;     /* page loader (#page-loader в header.php) */
    --z-skip-link: 11000;     /* skip-to-content ссылка (topmost) */

    /* --- 18. Семантические токены бренда ---
       Заменяют литералы в компонентах (Этапы 2–5).
       Замена: #dc3545/#c82333/#b02a37/#e85d6a → --heart-*
                #fc0/#f0ad4e/#d9a008      → --rating-gold*
                #198754/#00b341           → --success-soft
       Weather-палитра остаётся локальной в weather-chip.css — добавлять литералы туда нельзя. */
    --heart-color: #e85d6a;               /* красное сердце на карточках (мягкий coral-red) */
    --heart-color-hover: #c82333;         /* при hover/active */

    --rating-gold: var(--badge-rating-bg);          /* #d9a008; алиас существующего */
    --rating-gold-soft: rgba(217, 160, 8, 0.18);    /* полупрозрачный фон звёздочки */

    --success-soft: rgba(107, 159, 123, 0.18);      /* на основе --success (#6B9F7B) */
}