/* ==========================================================================
   Туры и авиабилеты — токены дизайн-системы «Туристический буклет»
   Префикс переменных и классов: tr. Описание системы: ../../05-design.md
   В файле только подключение шрифтов и переменные. Стилей элементов здесь нет.
   Правило системы: плоско. Заливки сплошные, глубину дают линии, а не блики.
   Контраст в комментариях посчитан по формуле WCAG 2.1 (октябрь 2026).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600;700&family=Mulish:ital,wght@0,400;0,600;0,700;1,400&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  color-scheme: light;

  /* ---------- Цвет: бумага ---------- */
  --tr-bg: #FFF9EC;               /* фон страницы — солнечный крем (зерно) */
  --tr-surface: #FFFFFF;          /* поверхность: купоны, бирки, панели, строки рейтинга, поля ввода */
  --tr-surface-2: #FBEFD3;        /* песок: шапка таблицы, строка при наведении, неактивные заливки */

  /* ---------- Цвет: текст ---------- */
  --tr-ink: #1D3557;              /* основной текст и жирные линии (зерно) — 11,78:1 на фоне, 12,36:1 на поверхности, 10,82:1 на песке */
  --tr-ink-deep: #14263F;         /* нажатая вторичная кнопка, текст на оранжевой заливке */
  --tr-muted: #46587A;            /* приглушённый текст — 6,81:1 / 7,15:1 / 6,26:1 */
  --tr-quiet: #5C6A84;            /* подписи, шапки таблиц, «—» — 5,20:1 / 5,45:1 / 4,78:1. На цветных подложках не использовать */

  /* ---------- Цвет: линии ---------- */
  --tr-line: #EBDFC2;             /* разделители строк и рамки панелей (декоративные, 1,26:1) */
  --tr-line-strong: #8F8468;      /* рамки полей, чипов, плиток логотипа, перфорация — 3,53:1 на фоне, 3,70:1 на поверхности */
  --tr-line-ink: #1D3557;         /* рамка купона и бирки, низ шапки, шапка таблицы, вторичная кнопка */

  /* ---------- Цвет: акцент — закат (зерно) ---------- */
  --tr-accent: #FF6F3C;           /* заливка основной кнопки, полоса горизонта, активная вкладка. Как текст на светлом НЕ годится: 2,64:1 */
  --tr-accent-hover: #FF8559;     /* основная кнопка при наведении — текст 6,35:1 */
  --tr-accent-active: #F25A24;    /* основная кнопка при нажатии — текст 4,54:1 */
  --tr-on-accent: #14263F;        /* текст на оранжевой заливке — 5,51:1. Белый на оранжевом запрещён: 2,77:1 */
  --tr-accent-text: #B23E12;      /* оранжевый для текста: 5,57:1 на фоне, 5,85:1 на поверхности, 5,12:1 на песке, 4,82:1 на accent-soft */
  --tr-accent-soft: #FFE4D6;      /* подложка бейджа «лидер», бирка при наведении — основной текст 10,19:1 */

  /* ---------- Цвет: второй акцент — море (зерно) ---------- */
  --tr-accent-2: #2A9D8F;         /* полоса горизонта, полоса бирки, левая линия врезки, иконки от 20px (3,17:1 на фоне). Как мелкий текст НЕ годится */
  --tr-accent-2-text: #176F64;    /* ссылки в тексте, бирюзовый текст: 5,73:1 на фоне, 6,01:1 на поверхности, 5,26:1 на песке, 5,07:1 на accent-2-soft */
  --tr-accent-2-fill: #1E7A6E;    /* бирюзовая заливка под светлый текст: белый 5,17:1, крем 4,92:1 */
  --tr-accent-2-soft: #DCF0EC;    /* подложка бейджа «есть кэшбэк», фон врезки — основной текст 10,43:1 */

  /* ---------- Цвет: состояния ---------- */
  --tr-ok: #22703A;               /* успех — 5,81:1 на фоне, 6,09:1 на поверхности, 5,22:1 на ok-bg */
  --tr-ok-bg: #E1F2E2;
  --tr-warn: #8A5200;             /* предупреждение — 6,09:1 / 6,39:1 / 5,51:1 на warn-bg */
  --tr-warn-bg: #FFEDBF;
  --tr-err: #B3261E;              /* ошибка — 6,23:1 / 6,54:1 / 5,39:1 на err-bg */
  --tr-err-bg: #FCE4DF;
  --tr-focus: #176F64;            /* кольцо фокуса на светлом — 5,73:1 к фону */

  /* ---------- Цвет: тёмная зона (подвал, панель сравнения, шапка формы подбора) ---------- */
  --tr-dark-bg: #1D3557;
  --tr-on-dark: #FFF9EC;          /* 11,78:1 */
  --tr-on-dark-muted: #C3CEE0;    /* 7,78:1 */
  --tr-dark-line: #3A5078;        /* декоративные разделители на тёмном */
  --tr-accent-on-dark: #FF8559;   /* акцент и кольцо фокуса на тёмном — 5,15:1 (чистый акцент даёт 4,47:1 — мало) */
  --tr-accent-2-on-dark: #6FD0C3; /* бирюзовый на тёмном — 6,76:1 */

  /* ---------- Шрифты (зерно) ---------- */
  --tr-font-head: "Montserrat Alternates", "Mulish", "Segoe UI", Arial, sans-serif;
  --tr-font-body: "Mulish", "Segoe UI", Roboto, Arial, sans-serif;
  --tr-font-mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --tr-fw-regular: 400;
  --tr-fw-medium: 500;            /* только Roboto Mono */
  --tr-fw-semi: 600;
  --tr-fw-bold: 700;

  /* ---------- Размеры текста: телефон (от 320px). Пары «размер / интерлиньяж» ---------- */
  --tr-fs-h1: 28px;   --tr-lh-h1: 34px;
  --tr-fs-h2: 22px;   --tr-lh-h2: 28px;
  --tr-fs-h3: 18px;   --tr-lh-h3: 24px;
  --tr-fs-h4: 16px;   --tr-lh-h4: 22px;
  --tr-fs-lead: 17px; --tr-lh-lead: 26px;
  --tr-fs-body: 16px; --tr-lh-body: 26px;
  --tr-fs-ui: 15px;   --tr-lh-ui: 22px;
  --tr-fs-small: 14px; --tr-lh-small: 20px;
  --tr-fs-micro: 13px; --tr-lh-micro: 18px;
  --tr-fs-label: 12px; --tr-lh-label: 16px;
  --tr-fs-table: 15px; --tr-lh-table: 22px;
  --tr-fs-th: 13px;    --tr-lh-th: 16px;
  --tr-fs-num: 15px;   --tr-lh-num: 22px;   /* цифры в строке, Roboto Mono 500 */
  --tr-fs-score: 22px; --tr-lh-score: 26px; /* оценка в строке рейтинга, Roboto Mono 700 */
  --tr-fs-score-xl: 40px; --tr-lh-score-xl: 44px; /* оценка в шапке обзора */

  --tr-ls-head: -0.01em;
  --tr-ls-label: 0.04em;
  --tr-ls-score: -0.08em; /* оценка моноширинным: запятая не должна разрывать число */

  /* ---------- Отступы: шаг 4px ---------- */
  --tr-s-1: 4px;
  --tr-s-2: 8px;
  --tr-s-3: 12px;
  --tr-s-4: 16px;
  --tr-s-5: 20px;
  --tr-s-6: 24px;
  --tr-s-7: 32px;
  --tr-s-8: 40px;
  --tr-s-9: 48px;
  --tr-s-10: 64px;
  --tr-s-11: 80px;
  --tr-s-12: 96px;

  /* ---------- Сетка ---------- */
  --tr-container: 1400px;
  --tr-gutter: 16px;              /* поля контейнера */
  --tr-cols: 4;
  --tr-gap: 12px;                 /* межколонник */
  --tr-section: 48px;             /* расстояние между блоками страницы */
  --tr-measure: 760px;            /* ширина колонки длинного текста */
  --tr-header-h: 56px;

  /* ---------- Формы ---------- */
  --tr-r-0: 0;
  --tr-r-1: 2px;                  /* поля, чипы, бейджи, плитки логотипа */
  --tr-r-2: 4px;                  /* кнопки, купоны, панели */
  --tr-r-round: 50%;              /* только люверс бирки, вырез купона, движок переключателя */
  --tr-bw: 1px;                   /* обычная линия */
  --tr-bw-strong: 2px;            /* жирная линия: шапка таблицы, низ шапки сайта, рамка бирки, перфорация */
  --tr-bw-band: 4px;              /* полоса горизонта, полоса над H2, левая линия врезки */
  --tr-focus-w: 3px;
  --tr-focus-offset: 2px;

  /* ---------- Фирменный приём ---------- */
  --tr-notch: 16px;               /* диаметр полукруглого выреза купона */
  --tr-notch-bg: var(--tr-bg);    /* цвет выреза = цвет того, на чём лежит купон */
  --tr-perf-w: 2px;               /* перфорация: пунктир dashed */
  --tr-perf-color: var(--tr-line-strong);
  --tr-stub-w: 220px;             /* ширина корешка у широкого купона */
  --tr-tag-cut: 16px;             /* срез углов бирки */
  --tr-tag-shape: polygon(var(--tr-tag-cut) 0, 100% 0, 100% 100%, var(--tr-tag-cut) 100%, 0 calc(100% - var(--tr-tag-cut)), 0 var(--tr-tag-cut));
  --tr-tag-eye: 12px;             /* люверс */
  --tr-tag-band: 8px;             /* цветная полоса бирки справа */

  /* ---------- Размеры элементов ---------- */
  --tr-h-btn: 44px;
  --tr-h-btn-sm: 36px;            /* только в таблице на 1200px и шире */
  --tr-h-btn-lg: 52px;
  --tr-h-field: 48px;
  --tr-h-chip: 40px;
  --tr-h-tab: 44px;
  --tr-h-badge: 22px;
  --tr-logo-sm: 40px;
  --tr-logo-md: 48px;
  --tr-logo-lg: 64px;
  --tr-icon: 20px;
  --tr-icon-lg: 24px;
  --tr-icon-stroke: 1.75;
  --tr-cmpbar-h: 56px;

  /* ---------- Слои ---------- */
  --tr-z-sticky: 20;              /* шапка таблицы */
  --tr-z-cmpbar: 40;              /* панель сравнения */
  --tr-z-header: 50;              /* шапка и раскрытое меню — всегда выше панели сравнения */

  /* ---------- Движение ---------- */
  --tr-t-fast: 120ms;
  --tr-ease: ease-out;
}

@media (min-width: 768px) {
  :root {
    --tr-fs-h1: 36px;   --tr-lh-h1: 42px;
    --tr-fs-h2: 26px;   --tr-lh-h2: 32px;
    --tr-fs-h3: 20px;   --tr-lh-h3: 26px;
    --tr-fs-h4: 17px;   --tr-lh-h4: 24px;
    --tr-fs-lead: 18px; --tr-lh-lead: 28px;

    --tr-gutter: 24px;
    --tr-cols: 8;
    --tr-gap: 20px;
    --tr-section: 64px;
    --tr-header-h: 64px;

    --tr-h-field: 44px;
    --tr-h-chip: 36px;
    --tr-cmpbar-h: 64px;
  }
}

@media (min-width: 1200px) {
  :root {
    --tr-fs-h1: 44px;   --tr-lh-h1: 50px;
    --tr-fs-h2: 30px;   --tr-lh-h2: 36px;
    --tr-fs-h3: 22px;   --tr-lh-h3: 28px;
    --tr-fs-body: 17px; --tr-lh-body: 28px;
    --tr-fs-table: 14px; --tr-lh-table: 20px;
    --tr-fs-num: 14px;   --tr-lh-num: 20px;
    --tr-fs-score: 20px; --tr-lh-score: 24px;
    --tr-fs-score-xl: 56px; --tr-lh-score-xl: 60px;

    --tr-gutter: 32px;
    --tr-cols: 12;
    --tr-gap: 24px;
    --tr-section: 80px;
  }
}