/* Токены. Единственное место в проекте, где допустимы сырые значения.
   Имена = имена в docs/design-system.md → Токены. Направление B2 «Cabin» (выбрано 2026-10-04): палитра из логотипа
   и иллюстраций заказчика. Новое значение – сначала сюда и в базу, потом в правило. */
:root {
  /* Палитра бренда: логотип (#47331C, #E4D9C6) и гравюры заказчика (#8B3126); фон – тёплый белый #FDFCF8 (выбран 2026-10-04 вместо бежевого #FCF9F3) */
  --brand-paper: #FDFCF8;
  --brand-cream: #E4D9C6;
  --brand-brown: #47331C;
  --brand-brown-deep: #2E2112;
  --brand-rust: #8B3126;

  /* Цвет по ролям: один акцент на весь сайт – ржавый (кнопки бронирования, ссылки меню, иллюстрации) */
  --color-bg-page: var(--brand-paper);
  --color-bg-sheet: var(--brand-cream);
  --color-bg-dark: var(--brand-brown);
  --color-bg-elevated: var(--brand-brown-deep);
  --color-fg: var(--brand-brown);
  --color-fg-muted: #6E5A43;
  --color-fg-on-dark: var(--brand-paper);
  --color-fg-muted-on-dark: var(--brand-cream);
  --color-accent: var(--brand-rust);
  --color-on-accent: var(--brand-paper);
  --color-line: rgba(139, 49, 38, 0.32);
  --color-illustration: var(--brand-rust);
  --color-caption-bg: rgba(253, 252, 248, 0.9);
  --color-caption-bg-soft: rgba(253, 252, 248, 0.62);
  --color-line-on-dark: rgba(252, 249, 243, 0.24);
  --color-scrim: rgba(46, 33, 18, 0.78);
  --color-scrim-mid: rgba(46, 33, 18, 0.5);
  --color-scrim-clear: rgba(46, 33, 18, 0);
  /* Подложка просмотра фото (lightbox) – темнее scrim, чтобы кадр читался */
  --color-lightbox: rgba(24, 17, 9, 0.94);
  --color-glass-line: rgba(252, 249, 243, 0.56);

  /* Плейсхолдер кадра, пока нет фото (зима): небо / озеро / берег */
  --ph-winter-sky: #D7DEE1;
  --ph-winter-lake: #5A6F79;
  --ph-winter-shore: #F1F2EF;

  /* Типографика: тонкий крупный display против мелкого текста (референс Tengile) */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-text: "Hanken Grotesk", sans-serif;

  /* Шкала кеглей: классы в base.css ссылаются только сюда. --fs-display-xl – clamp() одного H1, записан в базе */
  --fs-display-mega: clamp(2.5rem, 13vw, 15rem);
  --fs-display-xl: clamp(2.375rem, 4.8vw, 5rem);
  /* --fs-display-xxl – заголовок-вход секции (Rooms & cottages), по замеру relaisrossar.it: 93.7 px на 1440 = 6.5vw */
  --fs-display-xxl: clamp(3rem, 6.5vw, 6rem);
  /* --fs-display-page – H1 внутренней страницы (Rooms & cottages), по relaisrossar.it/camere-e-suites (там 150 px); у нас 124 px на 1440 = 8.6vw – «cottages» влезает в 4 колонки рядом с кадром по центру */
  --fs-display-page: clamp(3.5rem, 8.6vw, 8rem);
  --fs-display-l: clamp(2.25rem, 3.6vw, 3.25rem);
  --fs-display-s: clamp(2rem, 3.4vw, 3.4rem);
  --fs-title-m: clamp(1.5rem, 2.2vw, 2rem);
  --fs-title-xxs: 1rem;
  --fs-body-l: 1.25rem;
  --fs-body-m: 1.125rem;
  --fs-body-s: 0.9375rem;
  --fs-map-credit: 0.625rem;

  --lh-mega: 0.85;
  --lh-display: 0.98;
  --lh-title: 1.1;
  --lh-body: 1.45;
  --ls-display: -0.025em;
  --ls-display-tight: -0.03em;
  --lh-display-tight: 0.99;
  --ls-body: 0;
  --fw-display: 250;
  --fw-title: 400;
  --fw-light: 300;
  --fw-strong: 600;
  --fw-hero-light: 200;
  --fw-hero-accent: 500;
  --lh-hero: 1;
  --lh-hero-mobile: 1.06;

  /* Сетка: на всю ширину с полями 16 px (Tengile), потолок для очень широких экранов */
  --container: 1920px;
  --columns: 12;
  --gutter: 16px;
  --page-margin: 16px;
  --page-margin-mobile: 16px;

  /* Отступы: шкала, вертикальный ритм секций – --space-section */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-180: 180px;
  --space-section: var(--space-128);
  --space-section-mobile: var(--space-64);

  /* Шапка и меню */
  --header-h: 88px;
  --header-h-mobile: 64px;
  --logo-h: 112px;
  --logo-h-mobile: 72px;
  --logo-overhang: 40px;
  --logo-overhang-mobile: 20px;
  --illus-h: 112px;
  --illus-h-l: 320px;
  --illus-h-l-mobile: 200px;

  /* Мелочи: волосяная линия, подчёркивание ссылок, ширины строк, пропорции кадров */
  --line: 1px;
  --underline-offset: 6px;
  --arrow-shift: 8px;
  --measure-caption: 34ch;
  --measure-cell: 30ch;
  --ratio-frame-mobile: 4 / 3;
  --ratio-portrait: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-landscape: 4 / 3;
  --ratio-wide: 16 / 9;
  --measure-text: 46ch;
  --stroke-route: 2px;
  --location-h: min(100svh, 960px);
  --hero-min-h: 600px;
  --hero-focus: 50% 62%;
  --hero-text-bottom-mobile: calc(var(--space-64) + var(--space-24));
  --hero-step-2: 1.7em;
  --hero-step-3: 5.2em;
  /* rooms (вход): высота триптиха, ширина и пропорция среднего кадра, наплыв левого кадра (drift), размытие букв (chars-blur) */
  /* hero: карточка сезонов над переключателем (season-card) */
  --season-card-w: 340px;
  --season-dim: 0.4;
  /* nearby (вариант «Stage and strip»): большой кадр места, карта поверх него, лента миниатюр; телефон – карта и фото-карточки */
  --map-share-mobile: 38%;
  --card-w: 84%;
  --card-peek: 16%;
  --stage-h: min(78svh, 720px);
  --strip-thumb: 1 / 1;
  --map-overlay-h: 58%;
  --map-overlay-op: 0.82;
  /* breakfast и on-site: пропорции кадров строк активностей, шаг между строками, сдвиг «лесенки» */
  --ratio-act: 373 / 585;
  --ratio-act-wide: 355 / 537;
  --ratio-pano: 3 / 2;
  --ratio-cinema: 21 / 9;
  --act-gap: var(--space-180);
  --stair-drop: 33%;
  --gate-h: min(80svh, 720px);
  /* rooms/: кадр шапки страницы (528×780 у Rossar) и кадр номера (665×443 = 3:2) */
  --ratio-rooms-top: 528 / 780;
  --ratio-room: 3 / 2;
  --gate-mid-w: 75%;
  --ratio-gate-mid: 338 / 468;
  --drift-scale: 1.1;
  --dur-drift: 16s;
  --blur-in: 16px;
  --track-card-w: clamp(260px, 26vw, 420px);
  --track-offset: var(--space-96);

  /* Карта мест рядом (nearby): подробная подложка Esri World Topo, приглушена и чуть согрета под бумагу, маршрут – акцентом поверх бумажной подложки.
     --route-w / --route-casing-w – числа в пикселях для Leaflet, читаются в js/explore.js */
  --map-h: min(78svh, 760px);
  --map-tint: saturate(0.6) sepia(0.12) brightness(1.03) contrast(0.95);
  --pin: 18px;
  --pin-logo: 72px;
  --thumb: 72px;
  --route-w: 4;
  --route-casing-w: 10;
  --ratio-photo: 16 / 9;
  --map-min-mobile: 220px;
  --list-h-mobile: 46svh;
  --nav-btn: 48px;
  /* Кнопки слайдера номера на телефоне – меньше и прозрачнее, чтобы не закрывать фото */
  --nav-btn-s: 32px;
  --icon-s: 16px;
  --icon: 20px;

  /* Радиусы: почти прямые углы – фото и кнопки как вырезки, без «мягкого приложения» */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-pill: 999px;
  /* Кадры-фото: почти прямой угол (у Relais Rossar – 5 px) */
  --radius-photo: var(--radius-s);

  /* Движение: см. docs/motion.md */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.9, 0, 0.1, 1);
  --ease-overshoot: cubic-bezier(0.16, 0.03, 0.08, 1.55);
  --dur-150: 150ms;
  --dur-300: 300ms;
  --dur-600: 600ms;
  --dur-900: 900ms;
  --reveal-y: 24px;
  --scale-zoom: 1.04;
  --scale-location: 1.15;
  --scale-marker: 1.6;

  /* Слои */
  --z-scene: 0;
  --z-content: 1;
  --z-menu: 9;
  --z-header: 10;
  --z-lightbox: 20;
}