/* ============================================================
   ОТЕЛЬ «РОМАНТИК» — ДИЗАЙН-ТОКЕНЫ
   Фирменный стиль по гайдбуку: коралл, крем, графит, золото.
   Тёмная (хвойная) и светлая гаммы шаблона сохранены,
   бронзовые/песочные акценты переведены на коралл.
   Внешние CDN и Google Fonts не используются — только локальные woff2.
   ============================================================ */

/* ============================================================
   0. ШРИФТЫ (локальные, ../fonts/)
   ============================================================ */

/* --- Angst — фирменный ДИСПЛЕЙНЫЙ шрифт (шрифт логотипа).
       ВНИМАНИЕ: капсовый (строчных нет), нет глифа «·» (middot).
       Применять ТОЛЬКО к слову «РОМАНТИК» в первом экране.
       font-display: block — чтобы не мелькал разнорегистровый фолбэк. --- */
@font-face {
  font-family: "Angst";
  src: url("../fonts/angst-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Angst";
  src: url("../fonts/angst-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --- TT Wellingtons — заголовочный --- */
@font-face {
  font-family: "TT Wellingtons";
  src: url("../fonts/tt-wellingtons-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Wellingtons";
  src: url("../fonts/tt-wellingtons-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Wellingtons";
  src: url("../fonts/tt-wellingtons-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Montserrat — основной текст, кнопки, навигация --- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     1. ФИРМЕННАЯ ПАЛИТРА (гайдбук)
     ============================================================ */

  /* Коралл / розово-терракотовый — ГЛАВНЫЙ фирменный акцент.
     coral-500 — на ТЁМНОМ фоне и как заливка кнопок.
     coral-700 — для ТЕКСТА и мелких акцентов на СВЕТЛОМ фоне
     (светлый коралл на светлом даёт 2.3:1 и не проходит по AA). */
  --coral-300: #E4B9AD;
  --coral-400: #D89B8B; /* hover светлого коралла */
  --coral-500: #CB8A7A; /* базовый фирменный, RGB 203-138-122 */
  --coral-600: #B76A57;
  --coral-700: #9B4E3B; /* тёмный коралл: текст/акцент на светлом, 5.7:1 на молочном */
  --coral-800: #83402F; /* hover тёмного коралла */
  --coral-900: #6E3527;

  /* Готовые RGB-триплеты для сборки rgba() в компонентах */
  --coral-rgb: 203, 138, 122;
  --coral-dark-rgb: 155, 78, 59;

  /* Крем */
  --cream-100: #F3E7E0; /* гайдбук */
  --cream-200: #E8D3C9;
  --cream-300: #D9BCB0;

  /* Графит (гайдбук) */
  --graphite-brand: #3D372F;

  /* Тёмная «чернильная» подложка — текст на коралловой заливке.
     #241F1A на #CB8A7A = 5.8:1 (белый дал бы 2.8:1 и не читался). */
  --ink-900: #241F1A;

  /* Изумруд (гайдбук). Хвойная гамма шаблона первична,
     изумруд доступен точечно — для плашек и иллюстративных подложек. */
  --emerald-700: #005B5D;
  --emerald-900: #00393B;

  /* Золото — металлик-акцент, использовать точечно */
  --gold-400: #DCC08A;
  --gold-500: #C2A25F;

  /* ============================================================
     2. ПАЛИТРА ШАБЛОНА (сохранена)
     ============================================================ */

  /* Хвойный — основной тёмный, «глубина леса» */
  --pine-900: #0E1F19;
  --pine-800: #163028;
  --pine-700: #1E4034;
  --pine-600: #2A5648;
  --pine-500: #3A6E5C;

  /* Графитовый — текст и плотные поверхности */
  --graphite-900: #1A1C1F;
  --graphite-700: #2C3034;
  --graphite-500: #4A4F55;

  /* Молочный — основной светлый фон */
  --milk-50: #FCFAF7;
  --milk-100: #F7F3ED;
  --milk-200: #EFE9DF;

  /* Каменный — вторичный текст, границы.
     200/300/400 — НЕтекстовые: разделители, рамки, декоративные штрихи.
     stone-400 на молочном фоне даёт всего 2.39:1, текстом его брать нельзя.
     500/600 — текстовые: 4.86:1 и 5.13:1 на --milk-50. */
  --stone-200: #DAD7D0;
  --stone-300: #C3BFB6;
  --stone-400: #A8A49B;
  --stone-500: #736F66;
  --stone-600: #6F6C65;

  /* Тёплые подложки — переведены на кремовую (фирменную) гамму
     вместо прежнего песочного */
  --sand-200: var(--cream-100);
  --sand-300: var(--cream-200);
  --sand-400: var(--cream-300);

  /* Псевдонимы прежних бронзовых акцентов → коралл.
     Оставлены, чтобы не ломать места шаблона, где они ещё встречаются. */
  --bronze-300: var(--coral-500);
  --bronze-500: var(--coral-700);
  --bronze-600: var(--coral-800);
  --bronze-700: var(--coral-900);

  /* Служебные */
  --error-500: #B3402F;
  --error-050: #FBEEEC;
  --success-500: #3E7C52;
  --success-050: #EDF4EF;

  /* ============================================================
     3. СЕМАНТИЧЕСКИЕ ТОКЕНЫ — СВЕТЛАЯ СЕКЦИЯ
     ============================================================ */
  --bg: var(--milk-50);
  --bg-soft: var(--milk-100);
  --bg-muted: var(--milk-200);
  --bg-cream: var(--cream-100);
  --surface: #FFFFFF;
  --fg: var(--graphite-900);
  --fg-muted: var(--stone-600);
  /* --fg-subtle красит РЕАЛЬНЫЙ текст (подписи карточек, сноски, placeholder),
     поэтому на светлом это stone-500 (4.86:1), а не stone-400: тот давал 2.39:1
     и не проходил AA даже для 13px. Декоративные штрихи берут --line/--line-strong. */
  --fg-subtle: var(--stone-500);
  --line: var(--stone-200);
  --line-strong: var(--stone-300);
  /* --line-control — ГРАНИЦА ЭЛЕМЕНТА УПРАВЛЕНИЯ (WCAG 1.4.11, минимум 3:1),
     а не декоративный штрих. Нужен там, где заливки нет и рамка — единственное,
     что отделяет контрол от фона (контурная кнопка).
     stone-300 здесь давал 1.76:1 на молочном и 1.51:1 на кремовом.
     #807C73 замерен: milk-50 3.99:1, milk-100 3.76:1, cream-100 3.43:1,
     белая карточка 4.16:1 — проходит на всех светлых подложках шаблона. */
  --line-control: #807C73;

  /* Акцент = цвет ТЕКСТА, иконок, бордеров, надзаголовков.
     На светлом это ТЁМНЫЙ коралл — ради контраста. */
  --accent: var(--coral-700);
  --accent-hover: var(--coral-800);
  --accent-fg: #FFFFFF; /* текст поверх заливки --accent */
  --accent-soft: rgba(var(--coral-rgb), 0.14);
  --accent-soft-strong: rgba(var(--coral-rgb), 0.28);

  /* CTA — фирменная КОРАЛЛОВАЯ кнопка. Одинакова на светлом и тёмном:
     заливка --cta-bg, текст ВСЕГДА тёмный --cta-fg (5.8:1). */
  --cta-bg: var(--coral-500);
  --cta-bg-hover: var(--coral-400);
  --cta-fg: var(--ink-900);
  --cta-ring: rgba(var(--coral-rgb), 0.45);

  --focus: var(--coral-700);

  /* ============================================================
     4. ТИПОГРАФИКА
     ============================================================ */

  /* --font-brand — ТОЛЬКО слово «РОМАНТИК» (капсовый Angst).
     --font-display / --font-heading — заголовки (TT Wellingtons), одно и то же.
     --font-body — текст, кнопки, навигация (Montserrat). */
  --font-brand: "Angst", "TT Wellingtons", "Montserrat", Impact,
    "Haettenschweiler", sans-serif;
  --font-heading: "TT Wellingtons", "Montserrat", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-heading); /* алиас: шаблон обращается к нему */
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Шкала кеглей УВЕЛИЧЕНА (дисплейный масштаб, «ближе к шаблону 1»).
     Плавно: минимум — 360px, максимум — 1440px+ */
  /* «РОМАНТИК» (Angst). Оценка 6.2× кегля ПРОВЕРЕНА замером в браузере
     с загруженным шрифтом (Range.getBoundingClientRect): при 40px строка
     занимает 247.6px, то есть 6.19× — глифы 5.39× плюс разрядка 0.10em
     на 8 межбуквенных промежутков. На 360px это 272px при контентной
     ширине 328px, запас 56px.
     Слово набирается в одну строку (text-wrap:nowrap), переносов быть не должно. */
  --fs-brand: clamp(2.75rem, 1.083rem + 7.41vw, 7.75rem); /* 44 → 124px */
  --fs-display: clamp(2.60rem, 0.967rem + 7.26vw, 7.5rem); /* было max 6.25rem */
  --fs-h1: clamp(2.35rem, 1.300rem + 4.67vw, 5.5rem);      /* было max 4.25rem */
  --fs-h2: clamp(2.00rem, 1.333rem + 2.96vw, 4.0rem);      /* было max 3.00rem */
  --fs-h3: clamp(1.55rem, 1.233rem + 1.41vw, 2.5rem);      /* было max 1.95rem */
  --fs-h4: clamp(1.20rem, 1.083rem + 0.52vw, 1.55rem);     /* было max 1.35rem */
  --fs-lead: clamp(1.05rem, 0.96rem + 0.42vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-brand: 0.92;
  --lh-tight: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.62;

  --ls-brand: 0.10em;   /* разрядка «РОМАНТИК», как в логотипе */
  --ls-display: -0.015em;
  --ls-heading: -0.008em;
  --ls-eyebrow: 0.16em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ============================================================
     5. ФИРМЕННАЯ ГРАФИКА (паттерн, звезда, знак)

     SVG встроены как data:URI НАМЕРЕННО. Относительный url("../img/…")
     внутри кастомного свойства резолвится браузером относительно
     ДОКУМЕНТА-потребителя, а не tokens.css: из index.html он уходил
     в /img/pattern.svg → 404. data:URI снимает вопрос и убирает 3 запроса.

     Цвет задаётся не внутри SVG, а снаружи: элемент красится
     background-color (или linear-gradient), а SVG работает АЛЬФА-МАСКОЙ:
       -webkit-mask-image: var(--pattern-src); mask-image: var(--pattern-src);
     Боковой паттерн с угасанием к центру — БЕЗ mask-composite:
       background-image: linear-gradient(to right, var(--pattern-color), transparent);
       mask-image/-size/-repeat: var(--pattern-src) / var(--pattern-tile) / repeat;
     ============================================================ */
  --pattern-src: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='240'%20viewBox='0%200%20160%20240'%3E%20%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='square'%3E%20%3Cpath%20d='M4%20240V96a76%2076%200%200%201%20152%200v144'/%3E%20%3Cpath%20d='M20%20240V96a60%2060%200%200%201%20120%200v144'/%3E%20%3Cpath%20d='M36%20240V96a44%2044%200%200%201%2088%200v144'/%3E%20%3Cpath%20d='M52%20240V96a28%2028%200%200%201%2056%200v144'/%3E%20%3Cpath%20d='M68%20240V96a12%2012%200%200%201%2024%200v144'/%3E%20%3Cpath%20d='M80%20240V84'/%3E%20%3C/g%3E%20%3C/svg%3E");
  --pattern-tile: 160px 240px;               /* нативный размер плитки */
  --pattern-band: clamp(96px, 13vw, 240px);  /* ширина боковой полосы */
  --pattern-color: var(--coral-500);
  --pattern-opacity: 0.28;

  --star-src: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%3E%20%3Cpath%20fill='%23000'%20d='M12%200c.6%206.1%205.9%2011.4%2012%2012-6.1.6-11.4%205.9-12%2012-.6-6.1-5.9-11.4-12-12C6.1%2011.4%2011.4%206.1%2012%200z'/%3E%20%3C/svg%3E");
  /* ВАЖНО: --star-color повторно объявлен в каждой теме ниже.
     var() в кастомном свойстве подставляется ОДИН раз в той области,
     где свойство объявлено, поэтому без повтора звезда в .theme-dark
     осталась бы тёмно-коралловой. */
  --star-color: var(--accent);
  --bullet-size: 0.72em;   /* размер звезды-буллита в списках */

  --logo-src: url("data:image/svg+xml,%3Csvg%20width='184'%20height='132'%20viewBox='0%200%20184%20132'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%20%3Cg%20clip-path='url(%23a)'%20fill='%23fff'%3E%20%3Cpath%20d='M15.04%20116.432c0%204.528-3.445%207.453-8.532%207.453q-.806%200-1.706-.094v-.943h.443c4.454%200%206.887-2.265%206.887-6.164%200-3.397-2.212-6.259-6.445-6.259H2.843v17.768c0%201.982%200%202.359.221%203.177v.125H0v-.125c.158-.818.158-1.195.158-3.177v-15.409c0-1.982%200-2.359-.158-3.177v-.126h6.003c5.783%200%209.037%202.485%209.037%206.951m15.07%2014.623c5.37%200%209.258-4.748%209.258-10.692%200-5.976-3.54-10.693-8.5-10.693-5.34%200-9.195%204.717-9.195%2010.693%200%205.944%203.507%2010.692%208.436%2010.692m-11.281-10.692c0-6.479%205.182-11.636%2011.69-11.636%206.51%200%2011.692%205.157%2011.692%2011.636s-5.182%2011.636-11.691%2011.636-11.691-5.158-11.691-11.636m30.144-10.88%209.953%2015.913%209.385-15.913h.6c-.127.817-.159%201.289-.159%202.987v15.725c0%201.98%200%202.358.159%203.175v.126h-3.064v-.126c.22-.817.22-1.195.22-3.175v-13.021l-7.805%2013.209h-.631l-8.153-13.019v12.831c0%201.98%200%202.358.222%203.175v.126h-1.327v-.126c.158-.817.158-1.195.158-3.175V112.47c0-1.698-.032-2.17-.158-2.987zm38.8%2015.282-4.898-13.931-5.434%2013.931zm-3.001-15.944%206.888%2019.372c.948%202.642%201.17%202.987%201.264%203.176v.126h-3.129v-.126c0-.189.096-.534-.821-3.176l-.885-2.485H77.061l-.948%202.453c-1.011%202.642-.854%203.019-.854%203.208v.126h-1.61v-.126c.095-.189.315-.566%201.358-3.176l7.33-18.711c.759%200%201.675-.158%202.434-.661m29.638.662v.125c-.159.818-.159%201.196-.159%203.176v15.411c0%201.98%200%202.358.159%203.175v.126h-3.065v-.126c.221-.817.221-1.195.221-3.175v-11.071h-10.427v11.071c0%201.98%200%202.358.221%203.175v.126h-3.064v-.126c.157-.817.157-1.195.157-3.175v-15.411c0-1.98%200-2.358-.157-3.176v-.125h3.064v.125c-.221.818-.221%201.196-.221%203.176v3.397h10.427v-3.397c0-1.98%200-2.358-.221-3.176v-.125zm20.348%200v1.163h-.127c-.821-.22-1.2-.22-2.874-.22h-2.908v17.769c0%201.886.032%202.326.126%202.955l.032.22v.126h-3.002v-.126l.032-.22c.095-.629.126-1.069.126-2.955v-17.769h-2.906c-1.675%200-2.054%200-2.876.22h-.126v-1.163zm8.941-.001v.126c-.221.817-.221%201.195-.221%203.175v14.404l13.618-17.862h.6c-.158.849-.158%201.352-.158%202.987v15.882c0%201.98%200%202.358.158%203.175v.126h-3.065v-.126c.221-.817.221-1.195.221-3.175V113.79l-13.618%2017.863h-.6c.158-.85.158-1.353.158-2.988v-15.882c0-1.98%200-2.358-.158-3.175v-.126zm25.277%200v.126c-.221.817-.221%201.195-.221%203.176v6.353l6.825-6.353c1.991-1.824%202.749-2.641%203.001-3.176l.064-.126h1.801v.094c-.853.598-1.612%201.353-3.571%203.208l-3.254%203.082%205.972%2010.095c2.053%203.491%203.381%204.812%204.139%205.126l-.032.471c-3.064.378-4.866-1.918-6.256-4.276l-5.782-9.654-2.907%202.703v7.863c0%201.981%200%202.359.221%203.176v.126h-3.065v-.126c.158-.817.158-1.195.158-3.176v-15.41c0-1.981%200-2.359-.158-3.176v-.126zm-63.441-32.214a38%2038%200%200%200-.12-14.184c10.761-.621%2019.212-5.042%2023.928-12.188-3.161%2012.162-12.143%2021.988-23.808%2026.372m-15.976-37.8V14.674h10.245c15.254%200%2023.222%2010.31%2023.222%2022.547%200%2012.137-6.546%2019.872-18.677%2021.753a36.98%2036.98%200%200%200-14.79-19.508M67.426%2071.093l-.315-.257c-.138-.114-.27-.234-.406-.35-8.079-6.983-13.245-17.217-13.434-28.66%204.621-3.524%2010.258-5.562%2016.537-5.562%203.622%200%207.006.787%2010.075%202.226v39.366a38.7%2038.7%200%200%201-12.457-6.763m24.438%208.654c-.774%200-1.542-.03-2.306-.074V46.446c4.711%206.152%207.477%2014.619%207.477%2024.07a41.5%2041.5%200%200%201-.979%209.003%2039%2039%200%200%201-4.192.228m-31.268-61.23c.19-.264.39-.518.586-.776C68.259%208.594%2079.366%202.693%2091.864%202.693c11.103%200%2021.108%204.66%2028.167%2012.115-5.06-2.316-11.454-3.532-19.089-3.532h-21.63v.454c.57%202.945.57%204.305.57%2011.442V34.9a38.2%2038.2%200%200%200-11.188-1.658c-5.402%200-10.516%201.11-15.132%203.115a38.5%2038.5%200%200%201%206.96-17.737zM91.896%200C69.048-.017%2050.51%2018.404%2050.493%2041.145c-.018%2022.74%2018.49%2041.19%2041.339%2041.208%2022.848.017%2041.386-18.404%2041.403-41.145C133.253%2018.467%20114.745.018%2091.896%200'/%3E%20%3C/g%3E%20%3Cdefs%3E%20%3CclipPath%20id='a'%3E%20%3Cpath%20fill='%23fff'%20d='M0%200h183.857v132H0z'/%3E%20%3C/clipPath%3E%20%3C/defs%3E%20%3C/svg%3E");
  --watermark-color: var(--coral-500);
  --watermark-opacity: 0.10;
  --watermark-size: clamp(260px, 34vw, 620px);

  /* ============================================================
     6. СЕТКА И ОТСТУПЫ
     ============================================================ */
  --container: 1360px;
  --gutter: clamp(1rem, 0.55rem + 2.0vw, 3rem);
  --section-y: clamp(2.6rem, 1.6rem + 4.0vw, 6rem); /* правки: сокращены отступы между блоками */

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  /* ---------- Радиусы ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Тени ---------- */
  --sh-sm: 0 1px 2px rgba(26, 28, 31, 0.05), 0 2px 8px rgba(26, 28, 31, 0.04);
  --sh-md: 0 4px 12px rgba(26, 28, 31, 0.07), 0 12px 32px rgba(26, 28, 31, 0.06);
  --sh-lg: 0 10px 24px rgba(26, 28, 31, 0.10), 0 30px 60px rgba(26, 28, 31, 0.10);
  --sh-focus: 0 0 0 3px rgba(var(--coral-dark-rgb), 0.35);

  /* ---------- Движение ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;

  /* Слайдер первого экрана.
     Текстовые панели меняются в две фазы, иначе ~0,9 с два надзаголовка и два
     абзаца акции читаются друг сквозь друга: уходящая уходит за --slide-out,
     приходящая стартует с задержкой --slide-pane-delay, когда старая уже на нуле.
     Фотослой кроссфейдится на --slide-fade как есть — там наложение не мешает. */
  --slide-interval: 6500ms;
  --slide-fade: 900ms;
  --slide-out: 260ms;
  --slide-pane-delay: 300ms;

  /* ---------- Слои ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-lightbox: 450;
  --z-toast: 500;

  /* ---------- Размеры ---------- */
  --header-h: 76px;
  --header-h-compact: 62px;
  --tap: 44px; /* минимальная область нажатия, WCAG 2.1 AA */
}

@media (min-width: 1024px) {
  :root {
    --header-h: 92px;
    --header-h-compact: 70px;
  }
}

/* ============================================================
   ИНВЕРСНАЯ СЕКЦИЯ — тёмная хвойная подача.
   Переопределяет семантические токены, компоненты не меняются.
   ============================================================ */
.theme-dark {
  --bg: var(--pine-900);
  --bg-soft: var(--pine-800);
  --bg-muted: var(--pine-700);
  --bg-cream: var(--pine-800);
  --surface: var(--pine-800);
  --fg: var(--milk-50);
  --fg-muted: rgba(247, 243, 237, 0.72);
  --fg-subtle: rgba(247, 243, 237, 0.52);
  --line: rgba(247, 243, 237, 0.16);
  --line-strong: rgba(247, 243, 237, 0.28);
  /* Замер: .28 давал 2.39:1 на pine-900 и 2.34:1 внутри карточки (pine-800).
     .45 → 4.12:1 на pine-900, 3.81:1 на pine-800, 3.42:1 на pine-700. */
  --line-control: rgba(247, 243, 237, 0.45);

  /* На тёмном фоне работает СВЕТЛЫЙ коралл: 6.1:1 на хвойном */
  --accent: var(--coral-500);
  --accent-hover: var(--coral-400);
  --accent-fg: var(--ink-900);
  --accent-soft: rgba(var(--coral-rgb), 0.16);
  --accent-soft-strong: rgba(var(--coral-rgb), 0.30);

  --focus: var(--coral-500);
  --sh-focus: 0 0 0 3px rgba(var(--coral-rgb), 0.45);

  --star-color: var(--accent); /* пересчёт под тёмную тему, см. коммент выше */
  --pattern-opacity: 0.34;
  --watermark-opacity: 0.11;
}

/* Секция поверх фотографии */
.theme-photo {
  --fg: #FFFFFF;
  --fg-muted: rgba(255, 255, 255, 0.82);
  --fg-subtle: rgba(255, 255, 255, 0.64);
  --line: rgba(255, 255, 255, 0.24);
  /* Поверх фотографии подложка непредсказуема — берём непрозрачный белый:
     на любом кадре он даёт максимум, что физически возможно. */
  --line-control: rgba(255, 255, 255, 0.72);
  --accent: var(--coral-500);
  --accent-hover: var(--coral-400);
  --accent-fg: var(--ink-900);
  --accent-soft: rgba(var(--coral-rgb), 0.18);
  --accent-soft-strong: rgba(var(--coral-rgb), 0.32);
  --focus: #FFFFFF;
  --sh-focus: 0 0 0 3px rgba(255, 255, 255, 0.55);
  --star-color: var(--accent);
  --watermark-color: #FFFFFF;
  --watermark-opacity: 0.12;
}

/* Светлый островок внутри тёмной/фото-секции: возвращает светлые семантические
   токены, иначе подписи полей белые на белом.
   `.booking` перечислен здесь напрямую, а не через класс темы в разметке:
   карточка бронирования обязана быть самодостаточной (её набор токенов раньше
   лежал копией в main.css). Класс `.theme-light` остаётся для ui-kit.html и
   внутренних страниц, где светлый островок объявляется классом. */
.theme-light,
.booking {
  --bg: var(--milk-50);
  --bg-soft: var(--milk-100);
  --bg-muted: var(--milk-200);
  --bg-cream: var(--cream-100);
  --surface: #FFFFFF;
  --fg: var(--graphite-900);
  --fg-muted: var(--stone-600);
  --fg-subtle: var(--stone-500);
  --line: var(--stone-200);
  --line-strong: var(--stone-300);
  --line-control: #807C73;
  --accent: var(--coral-700);
  --accent-hover: var(--coral-800);
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(var(--coral-rgb), 0.14);
  --accent-soft-strong: rgba(var(--coral-rgb), 0.28);
  --focus: var(--coral-700);
  --sh-focus: 0 0 0 3px rgba(var(--coral-dark-rgb), 0.35);
  --star-color: var(--accent);
  --pattern-opacity: 0.28;
  --watermark-color: var(--coral-500);
  --watermark-opacity: 0.10;
}