/* Токены темы Corona.
 *
 * Источник: corona-travel/markup/css/tokens.css, коммит b11df05. Значения
 * извлечены из «Corona Travel.fig», разделы «Главная» и «Форма поиска»,
 * светлая и тёмная темы; литеральные заливки взяты с фреймов 390 px.
 *
 * Два намеренных отличия от markup — обе правки относятся к интеграции,
 * а не к дизайну.
 *
 * 1. Атрибут переименован: data-theme -> data-ct-theme. Префикс ct- общий
 *    с токенами --ct-*, а голое data-theme слишком легко занять чем-то
 *    ещё на странице, где живёт и старая тема.
 *
 * 2. Убран блок @media (prefers-color-scheme: dark) с селектором
 *    :root:not([data-theme="light"]). Он нужен был markup, где атрибут
 *    мог отсутствовать. Здесь base.html печатает data-ct-theme="light"
 *    прямо в SSR, а инлайн-скрипт в <head> переписывает его до первой
 *    отрисовки, поэтому атрибут есть всегда и блок недостижим.
 *
 *    Держать его всё равно нельзя: --ct-* наследуются сквозь границу
 *    Shadow DOM, а медиазапрос внутри тени не срабатывает. Форма поиска
 *    <ct-travel-search> живёт в Shadow DOM и разошлась бы с документом.
 *
 * Следствие: без JavaScript страница всегда светлая. Это принятое решение
 * (см. «Тема оформления» в kirov-frontend-arhitektura), а не упущение.
 */

:root {
  /* --- palette (theme-independent brand values) --- */
  --ct-gold: #b2906a;
  --ct-gold-light: #f8bf7e;
  --ct-hero-gold: #f7be7e;
  --ct-gold-mid: #dfa361;
  --ct-gold-soft: #e2b27c;
  --ct-indigo: #303672;
  --ct-indigo-deep: #101d64;
  --ct-indigo-night: #0b1446;
  --ct-indigo-bar: #1d2868;
  --ct-mist: #edf0ff;
  --ct-violet: #8b5cf6; /* бэйдж «групповой» */
  --ct-teal: #2dd4bf; /* бэйдж «райский уголок» */
  --ct-tag-purple: #b851dc; /* страна в карточке новости */
  --ct-white: #fff;
  --ct-black: #000;

  /* ================= ТИПОГРАФИКА: 5 ролей =================
   * Было 9 кеглей, причём 12/13/14/15/16/17/18 шли подряд и на глаз не
   * различались. Шаг 1.25. Интерлиньяж кратен базовой сетке 4 px и задаётся
   * в паре с кеглем. Крупные роли растут по брейкпоинтам (см. main.css). */
  --baseline: 4px;

  --fs-display: 32px;
  --lh-display: 36px;

  --fs-title: 24px;
  --lh-title: 32px;

  --fs-subtitle: 18px;
  --lh-subtitle: 24px;

  --fs-body: 16px;
  --lh-body: 24px;

  --fs-caption: 13px;
  --lh-caption: 20px;

  --ff-base: "Stem", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --fw-light: 300; /* Figma "Semi Light" -> Stem-SemiLight */
  --fw-medium: 500; /* Figma "Medium"    -> Stem-Medium */

  /* Доля высоты заглавной от em. Прочитано из OS/2 самих файлов Stem
   * (sCapHeight 700 при unitsPerEm 1000, одинаково у всех начертаний).
   * Нужна для cap-height-коррекции — см. second-brain/vertical-rhythm.md.
   * У фолбэка Inter это 0.727, поэтому значение верно только пока стоит Stem. */
  --cap-height: 0.7;

  /* ================= ОТСТУПЫ: 7 ступеней =================
   * Было 14 значений (2/4/6/8/10/12/13/14/16/20/24/28/32/40). Шаг ~1.5x —
   * соседние ступени различимы, промежуточные не нужны. */
  --space-3xs: 4px; /* иконка + подпись */
  --space-2xs: 8px; /* внутри чипа, бэйджа */
  --space-xs: 12px; /* между полями формы */
  --space-s: 16px; /* поля страницы, паддинг карточки */
  --space-m: 24px; /* между блоками внутри секции */
  --space-l: 40px; /* между секциями */
  --space-xl: 64px; /* между смысловыми зонами */

  --sheet-pad: 20px; /* поля внутри шита — единственное значение вне шкалы */

  /* ================= СЕТКА =================
   * Гибрид: брейкпоинты только там, где меняется композиция, между ними —
   * резина. Границы (600/960/1400/1800) намеренно не совпадают с ходовыми
   * ширинами устройств, иначе переключение срабатывает на массовом экране.
   *
   *   --page-max      предел всей страницы (карточки идут в край)
   *   --container-max предел текстовой колонки
   *   --cols          колонок в сетке
   *   --card-cols     карточек в ряду (всегда делит --cols нацело)
   */
  --page-max: 100%;
  --container-max: 100%;
  --news-max: 1144px;
  --news-panel-bg: rgb(255 255 255 / 5%);
  --gutter: var(--space-s);
  --col-gap: var(--space-m);
  --cols: 4;
  --card-cols: 2;

  /* ================= РАДИУСЫ: 3 ступени =================
   * Было 8 (включая 48 и 50 — одно намерение, записанное дважды). */
  --radius-s: 8px; /* плитки, превью */
  --radius-m: 24px; /* секции, шиты, крупные карточки */
  --radius-pill: 999px; /* кнопки, поля, чипы */

  /* --- control sizing --- */
  --control-h: 44px;
  --tabbar-h: 76px; /* было 77 */
}

/* ---------- light theme (default) ---------- */
:root,
:root[data-ct-theme="light"] {
  color-scheme: light;

  --bg: var(--ct-mist);
  --text: var(--ct-indigo);
  --text-muted: rgb(48 54 114 / 70%);
  --text-on-media: var(--ct-white);
  --text-on-media-muted: rgb(255 255 255 / 80%);
  --news-preview: var(--ct-indigo);
  --news-date: rgb(48 54 114 / 40%);

  --surface: var(--ct-white);
  --surface-border: rgb(48 54 114 / 10%);

  --accent: var(--ct-gold);
  --hero-title-accent: var(--ct-indigo);
  --accent-text: var(--ct-white);

  /* Сильное действие на светлой поверхности: в светлой теме тёмно-синее, в
     тёмной золотое. Роль общая — так покрашены и «Найти» в полосе поиска, и
     «Хочу сюда» в промо-блоке, поэтому цвет назван по роли, а не по кнопке. */
  --btn-strong-bg: var(--ct-indigo);
  --btn-strong-text: var(--ct-white);

  --btn-secondary-bg: var(--ct-white);
  --btn-secondary-text: var(--ct-black);

  --dot: rgb(48 54 114 / 40%);
  --dot-active: var(--ct-indigo);

  --tab-text: var(--ct-indigo);
  --tab-active-bg: rgb(48 54 114 / 8%);

  --panel-bg: linear-gradient(
    180deg,
    rgb(206 214 254 / 40%) 0%,
    rgb(237 240 255 / 40%) 100%
  );

  /* Полоса поиска — ДВА слоя, как в макете:
     внешняя полупрозрачная оторочка и белая полоса с полями внутри неё.
     Замерено на 1920: фон страницы rgb(237,240,255), оторочка
     rgb(228,231,248) = ровно 5 % индиго поверх фона, поля чисто белые.
     Оторочка шире полей на ~23 px по горизонтали и ~16 по вертикали.
     Раньше эти два слоя были схлопнуты в один, из-за чего белая часть
     выходила заметно шире макетной, а оторочка пропадала. */
  --search-ring-bg: rgb(48 54 114 / 5%);
  --search-panel-bg: var(--ct-white);

  /* Полоса поиска на десктопе белая в ОБЕИХ темах, и текст на ней тёмный:
     в экспорте 1440 dark подложка rgb(255,255,255), подписи почти чёрные.
     Поэтому цвета полосы не наследуются от темы, а заданы отдельно. */
  --search-bar-text: var(--ct-indigo);
  --search-bar-text-muted: rgb(48 54 114 / 70%);
  --search-bar-divider: rgb(48 54 114 / 12%);

  /* Кнопка submit на полосе поиска в светлой теме тёмно-синяя, а не золотая:
     замерено rgb(48,54,114) на 1024 и 1920. В тёмной теме она золотая. */
  --search-submit-bg: var(--ct-indigo);
  --search-submit-text: var(--ct-white);

  /* Волна под поиском: в светлой теме индиговая, в тёмной золотая. */
  --wave-color: var(--ct-indigo);

  /* Обводка контурной кнопки. Единственный её носитель — CTA героя с 960:
     до этой ширины кнопка залитая. Замер экспортов 1920: пилюля 242x48 без
     заливки, обводка в 1 px, в светлой теме индиговая, в тёмной золотая —
     та же пара, что у волны, но роль другая, поэтому токен отдельный.
     --surface-border (10 %) здесь не годится: на фоне rgb(237,240,255) он
     даёт почти невидимую линию, а в макете она читается. */
  --btn-outline-border: var(--ct-indigo);

  /* Ряд вкладок в макете раскрашен вручную: слева тёмные подписи на светлом
     фоне, справа белые поверх фото. Одним цветом это не выражается, поэтому
     вместо перекраски подкладываем матовое стекло — тем же приёмом, что и
     мобильная шапка. На светлом фоне оно почти незаметно, поверх фото
     осветляет кадр настолько, что тёмные подписи остаются читаемыми. */
  /* Подписи вкладок: тёмные на светлой половине, белые над кадром. Граница
     кадра приходится ровно на середину центрированного ряда. */
  --search-tabs-ink: linear-gradient(
    90deg,
    var(--ct-indigo) 0 50%,
    var(--ct-white) 50% 100%
  );

  --footer-bg: var(--ct-indigo-night);
  --tabbar-bg: var(--ct-indigo-bar);
}

/* ---------- dark theme ---------- */
:root[data-ct-theme="dark"] {
  color-scheme: dark;

  --bg: var(--ct-indigo-deep);
  --text: var(--ct-white);
  --text-muted: rgb(255 255 255 / 80%);
  --text-on-media: var(--ct-white);
  --text-on-media-muted: rgb(255 255 255 / 80%);
  --news-preview: rgb(255 255 255 / 80%);
  --news-date: rgb(255 255 255 / 40%);

  --surface: rgb(255 255 255 / 5%);
  --surface-border: rgb(255 255 255 / 10%);

  --accent: var(--ct-gold-light);
  --hero-title-accent: var(--ct-hero-gold);
  --accent-text: var(--ct-black);

  --btn-strong-bg: var(--ct-gold-light);
  --btn-strong-text: var(--ct-black);

  --btn-secondary-bg: rgb(255 255 255 / 5%);
  --btn-secondary-text: var(--ct-white);

  --dot: rgb(255 255 255 / 40%);
  --dot-active: var(--ct-white);

  --tab-text: var(--ct-white);
  --tab-active-bg: rgb(255 255 255 / 10%);

  --panel-bg: linear-gradient(
    180deg,
    rgb(255 255 255 / 8%) 0%,
    rgb(255 255 255 / 3%) 100%
  );

  /* В тёмной теме подписи вкладок белые с обеих сторон границы фото, и
     полоса читается без подложки — как и в макете. Стекло выключено. */
  /* Полоса остаётся светлой и в тёмной теме — так в экспорте 1440 dark.
     Оторочка там rgb(28,40,108) поверх фона rgb(16,29,100) = 5 % белого. */
  --search-ring-bg: rgb(255 255 255 / 5%);
  --search-panel-bg: var(--ct-white);
  --search-bar-text: var(--ct-indigo);
  --search-bar-text-muted: rgb(48 54 114 / 70%);
  --search-bar-divider: rgb(48 54 114 / 12%);
  --search-submit-bg: var(--ct-gold-light);
  --search-submit-text: var(--ct-black);
  --wave-color: var(--ct-gold-light);
  --btn-outline-border: var(--ct-gold-light);
  --search-tabs-ink: linear-gradient(90deg, var(--ct-white) 0, var(--ct-white));

  --footer-bg: var(--ct-indigo-night);
  --tabbar-bg: var(--ct-indigo-bar);
}

/* ================= РЕСПОНСИВНАЯ ШКАЛА =================
 * В markup эти переопределения лежат в main.css вперемешку с правилами
 * секций. Здесь они собраны в токенах: значения сетки и типографики —
 * это уровень темы, а не отдельной секции.
 *
 * Брейкпоинты гибридные и намеренно не совпадают с ходовыми ширинами
 * устройств: 600 / 960 / 1400 / 1800. Между ними composition резиновая.
 *
 * Не перенесены два токена, у которых нет владельца до появления секций:
 * --tablet-col (центральная колонка героя и поиска на 600..959) и
 * --search-max (ширина полосы поиска, осознанное исключение из
 * --container-max). Они приедут вместе со своими компонентами.
 */

@media (min-width: 600px) {
  :root {
    --gutter: var(--space-m);
    --cols: 6;
    --card-cols: 3;
  }
}

@media (min-width: 960px) {
  :root {
    --page-max: 1440px;
    --container-max: 1144px;
    --gutter: 32px;
    --cols: 12;
    --card-cols: 4;
  }
}

@media (min-width: 1400px) {
  :root {
    --page-max: 1680px;
    --container-max: 1360px;
    --gutter: var(--space-l);
    --fs-display: 56px;
    --lh-display: 64px;
    --fs-title: 32px;
    --lh-title: 40px;
    --control-h: 48px;
  }
}

@media (min-width: 1800px) {
  :root {
    --page-max: 1920px;
    --container-max: 1600px;
    --gutter: 48px;
    --card-cols: 6;
  }
}