/**
 * TRIADA — дизайн-токены.
 *
 * ИСТОЧНИК ПРАВДЫ — /design-reference (главная, услуга, проекты, wiki).
 * Файл сгенерирован из фактических значений макетов и содержит КАЖДОЕ
 * значение, встречающееся в утверждённом дизайне, без округления и без
 * сведения близких величин к одному токену.
 *
 * ПРАВИЛА
 * 1. Токен именуется своим значением (--tri-fs-13-5 = 13.5px). Имя не несёт
 *    роли, поэтому его нельзя «переиспользовать не по смыслу» и тем самым
 *    незаметно схлопнуть два разных дизайнерских значения в одно.
 * 2. Роли (какой токен чем является в конкретном компоненте) описаны
 *    в секции 8 как алиасы. Алиас — только имя, он ничего не нормализует.
 * 3. Добавлять сюда значения, которых нет в design-reference, нельзя.
 *    Всё, что тема вынуждена ввести сама (мобильные состояния, которых
 *    в макетах нет), вынесено в секцию 9 и перечислено
 *    в docs/DESIGN-DEVIATIONS.md.
 * 4. Зеркало значений живёт в theme.json — правьте оба файла.
 *
 * FLUID-ТИПОГРАФИКА
 * Кегли < 24px статичны (они и так пригодны для мобильных).
 * Кегли >= 24px — clamp(): верхняя граница достигается на 1280px и держится
 * выше, поэтому на desktop (макеты свёрстаны под 1440px) размер совпадает
 * с исходным ТОЧНО. Уменьшается только мобильный конец диапазона.
 */

:root {
	/* =============================================================
	 * 1. ЦВЕТ — 63 значения из макетов, все сохранены 1:1
	 * ============================================================= */

	/* --- Бренд ------------------------------------------------- */
	--tri-color-navy: #12295C;             /* основной синий, x317 */
	--tri-color-hero-navy: #0D2050;        /* первый экран главной, v2 */
	--tri-color-navy-mid: #12336E;         /* заливка карточек в иллюстрациях, x50 */
	--tri-color-navy-deep: #0E1F47;        /* подвал, x5 */
	--tri-color-navy-1e355f: #1E355F;      /* фон вложенных блоков, x3 */
	--tri-color-navy-16305f: #16305F;      /* фон вложенных блоков, x2 */
	--tri-color-navy-0f2450: #0F2450;      /* фон вложенных блоков, x2 */
	--tri-color-accent: #F8B327;           /* CTA-жёлтый, x61 */
	--tri-color-accent-edaa2a: #EDAA2A;    /* фон акцентных плашек, x2 */
	--tri-color-accent-f2b23f: #F2B23F;    /* текст на тёмном, x1 */

	/* --- Текст ------------------------------------------------- */
	--tri-color-ink: #16181D;              /* заголовки и основной текст, x322 */
	--tri-color-ink-secondary: #3A3F49;    /* текст статей и списков, x54 */
	--tri-color-muted: #5A6270;            /* подписи, лиды карточек, x103 */
	--tri-color-muted-soft: #6B7280;       /* метки, служебный текст, x113 */
	--tri-color-white: #FFFFFF;            /* x358 */

	/* --- Текст на тёмном (в макетах это ТРИ разных оттенка) ---- */
	--tri-color-on-dark-c8cdd6: #C8CDD6;   /* подписи на фото/тёмном, x37 */
	--tri-color-on-dark-b4bac5: #B4BAC5;   /* второй лид hero, x3 */
	--tri-color-on-dark-d6dae1: #D6DAE1;   /* текст тёмной карточки услуги, x6 */
	--tri-color-on-dark-e6eaf2: #E6EAF2;   /* первый лид hero, x1 */
	--tri-color-on-dark-9aa1ae: #9AA1AE;   /* текст и ссылки подвала, x31 */

	/* --- Линии ------------------------------------------------- */
	--tri-color-border: #DDE0E6;           /* граница элементов, x55 */
	--tri-color-border-e2e5ea: #E2E5EA;    /* граница карточек и врезок, x53 */
	--tri-color-border-c9cdd5: #C9CDD5;    /* контрастная граница/точки, x24 */
	--tri-color-divider: #EBEDF1;          /* разделители внутри блоков, x69 */
	--tri-color-border-8fa6d6: #8FA6D6;    /* граница на синем фоне, x4 */

	/* --- Светлые поверхности (в макетах 17 отдельных оттенков) - */
	--tri-color-surface-edf2fd: #EDF2FD;   /* основная голубая подложка, x57 */
	--tri-color-route-track: #DCE4F5;      /* дорожка маршрута «Как мы работаем», v2 */
	--tri-color-surface-fafbff: #FAFBFF;   /* врезки «коротко о главном», x25 */
	--tri-color-surface-f5f8ff: #F5F8FF;   /* подсветка пункта меню, x21 */
	--tri-color-surface-f7faff: #F7FAFF;   /* фон блока, x4 */
	--tri-color-surface-fafcff: #FAFCFF;   /* фон блока, x4 */
	--tri-color-surface-f3f7fe: #F3F7FE;   /* фон блока, x2 */
	--tri-color-surface-e8effb: #E8EFFB;   /* «Единая платформа» на главной, v2 */
	--tri-color-surface-f6f9fe: #F6F9FE;   /* фон блока, x2 */
	--tri-color-surface-f8f9fb: #F8F9FB;   /* фон блока, x2 */
	--tri-color-surface-fcfdff: #FCFDFF;   /* фон блока, x1 */
	--tri-color-surface-f8fbff: #F8FBFF;   /* фон блока, x1 */
	--tri-color-surface-eaf1fd: #EAF1FD;   /* фон блока, x1 */
	--tri-color-surface-e7effc: #E7EFFC;   /* фон блока, x1 */
	--tri-color-surface-f2f7fe: #F2F7FE;   /* фон блока, x1 */
	--tri-color-surface-eff5fe: #EFF5FE;   /* фон блока, x1 */
	--tri-color-surface-ebf2fd: #EBF2FD;   /* фон блока, x1 */
	--tri-color-surface-f4f8fe: #F4F8FE;   /* фон блока, x1 */
	--tri-color-surface-edf3fd: #EDF3FD;   /* фон блока, x1 */
	--tri-color-surface-c5d5f2: #C5D5F2;   /* плотная голубая заливка, x2 */

	/* --- Ссылки ------------------------------------------------ */
	--tri-color-link-hover: #003B95;       /* a:hover, x4 */
	--tri-color-link-2a56b8: #2A56B8;      /* акцентная ссылка, x4 */

	/* --- Статус: успех ----------------------------------------- */
	--tri-color-success: #17703D;          /* x27 */
	--tri-color-success-2fa36b: #2FA36B;   /* x2 */
	--tri-color-success-1c8a4c: #1C8A4C;   /* x1 */
	--tri-color-success-surface: #E9F6EF;  /* подложка плашки соответствия в макете поиска */
	--tri-color-success-on-dark: #2FD98A;  /* положительное значение на тёмной плашке расчёта */

	/* --- Статус: предупреждение -------------------------------- */
	--tri-color-warn-surface: #FFF8EC;     /* фон врезки, x3 */
	--tri-color-warn-border: #F0DDBA;      /* граница врезки, x3 */
	--tri-color-warn-accent: #E9A13B;      /* левая граница врезки, x2 */
	--tri-color-warn-text: #6B4E1B;        /* текст врезки, x3 */
	--tri-color-warn-text-strong: #8A5A0F; /* акцентный текст врезки, x5 */

	/* --- Статус: ошибка ---------------------------------------- */
	--tri-color-error-surface: #FDF3F1;    /* x1 */
	--tri-color-error-border: #F0CFC6;     /* x1 */
	--tri-color-error-accent: #C1533A;     /* x1 */
	--tri-color-error-text: #A8442C;       /* x1 */
	--tri-color-error-text-soft: #5E3328;  /* x1 */

	/* --- Внешние бренды ---------------------------------------- */
	--tri-color-yandex: #FC3F1D;           /* плашка Яндекса, x7 */
	--tri-color-star: #F5C518;             /* звезда рейтинга, x4 */

	/* --- Иллюстрации (inline-SVG макетов) ---------------------- */
	--tri-color-illustration-text: #B9C7E2;   /* подписи внутри SVG, x100 */
	--tri-color-illustration-fill: #E8EEFA;   /* заливка карты, x2 */
	--tri-color-illustration-stroke: #B9C8E6; /* обводка карты, x2 */


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

	/*
	 * ОДНА ГАРНИТУРА НА ВЕСЬ САЙТ. В утверждённом дизайне стек задан
	 * как 'Muller','Golos Text',system-ui — Muller первым и для текста,
	 * и для заголовков. Раньше заголовки приходилось держать на второй
	 * гарнитуре: из Muller было поставлено единственное начертание
	 * Regular 400, а CSS не умеет «взять гарнитуру только на этом
	 * весе» — браузер рисовал бы поддельный жирный.
	 *
	 * Теперь поставлены настоящие Medium 500, Bold 700 и ExtraBold 800,
	 * поэтому Muller стоит первым в обоих стеках, как и задумано
	 * дизайном. Кегли, интерлиньяж, трекинг и отступы не менялись —
	 * отличается только гарнитура.
	 *
	 * Стека по-прежнему два: display остаётся отдельной точкой входа
	 * для заголовков — менять её значение проще, чем править 250
	 * правил. Сейчас оба стека совпадают.
	 */
	--tri-font-body: "Muller", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tri-font-display: "Muller", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--tri-fw-400: 400;
	--tri-fw-500: 500;
	/*
	 * ПОЛУЖИРНОГО В MULLER НЕТ. У гарнитуры есть Medium (500) и Bold
	 * (700), а начертания между ними не существует — это свойство
	 * Muller, а не недопоставка файлов.
	 *
	 * Макеты рисовались в Golos Text, где 600 есть, и весом 600 там
	 * набраны пункты меню, ссылки и кнопки — интерфейсный текст 13,5–15px.
	 * Пока токен просил 600, подбор по правилам CSS отдавал таким
	 * элементам ближайшее большее НАСТОЯЩЕЕ начертание — Bold 700. В
	 * результате меню и кнопки набирались тем же весом, что заголовки:
	 * на странице пропадала середина между обычным текстом и заголовком.
	 *
	 * ЗАМЕРЕНО НА STAGING. Насыщенность мерили не на глаз, а по
	 * количеству краски: один и тот же текст отрисован на канве
	 * каждым начертанием, суммирована непрозрачность. Относительно
	 * Regular 400:
	 *
	 *   меню 15px      500 +21,7%   700 +39,4%
	 *   кнопка 14px    500 +20,2%   700 +38,0%
	 *   подпись 12,5px 500 +20,2%   700 +42,5%
	 *   текст 13,5px   500 +21,3%   700 +37,6%
	 *
	 * Ширина для этого не годится: у Muller одинаковые метрики на всех
	 * весах — вся семья укладывается в 1,4% по ширине строки, тогда как
	 * у обычной гарнитуры разброс 7,7%. Контур толстеет, набор не едет.
	 *
	 * Просили Regular — токен просит Regular 400. Medium 500 оставался
	 * на пятую часть жирнее Regular, то есть до просьбы не дотягивал.
	 * Подменять файл начертания нельзя: объявить Medium или Bold под
	 * именем 600 значило бы соврать о гарнитуре.
	 *
	 * ИСКЛЮЧЕНИЕ — КНОПКИ. У них вес несёт не тон, а назначение: на
	 * жёлтой и белой заливке подпись в Regular перестаёт читаться как
	 * нажимаемая. Кнопки остаются на Medium 500 явным объявлением в
	 * button.css и form-cf7.css — снимается одной строкой там же.
	 *
	 * Это единственная правка, меняющая вид уже принятых страниц:
	 * значение 600 возвращается одной строкой.
	 */
	--tri-fw-600: 400;
	--tri-fw-700: 700;
	--tri-fw-800: 800;
	--tri-fw-900: 900;

	/* Кегли: все 33 значения макетов. Desktop-значение = исходному. */
	--tri-fs-11: 11px;                                 /* плашки панели AI, v2 */
	--tri-fs-12: 12px;
	--tri-fs-11-5: 11.5px;                             /* плашки первого экрана v2 */
	--tri-fs-10-5: 10.5px;                             /* плашка на обложке видео v2 */
	--tri-fs-12-5: 12.5px;
	--tri-fs-13: 13px;
	--tri-fs-13-5: 13.5px;
	--tri-fs-14: 14px;
	--tri-fs-14-5: 14.5px;
	--tri-fs-15: 15px;
	--tri-fs-15-5: 15.5px;
	--tri-fs-16: 16px;
	--tri-fs-16-5: 16.5px;
	--tri-fs-17: 17px;
	--tri-fs-17-5: 17.5px;
	--tri-fs-18: 18px;
	--tri-fs-18-5: 18.5px;
	--tri-fs-19: 19px;
	--tri-fs-19-5: 19.5px;
	--tri-fs-20: 20px;
	--tri-fs-21: 21px;
	--tri-fs-22: 22px;
	--tri-fs-23: 23px;
	--tri-fs-24: clamp(20px, 18.43px + 0.43vw, 24px);  /* desktop 24px */
	--tri-fs-26: clamp(21px, 19.04px + 0.54vw, 26px);  /* desktop 26px */
	--tri-fs-28: clamp(22px, 19.65px + 0.65vw, 28px);  /* desktop 28px */
	--tri-fs-30: clamp(23px, 20.26px + 0.76vw, 30px);  /* desktop 30px */
	--tri-fs-32: clamp(24px, 20.87px + 0.87vw, 32px);  /* desktop 32px */
	--tri-fs-34: clamp(25px, 21.48px + 0.98vw, 34px);  /* desktop 34px */
	--tri-fs-36: clamp(26px, 22.17px + 1.06vw, 36px);  /* desktop 36px */
	--tri-fs-38: clamp(27px, 22.70px + 1.20vw, 38px);  /* desktop 38px */
	--tri-fs-40: clamp(28px, 23.30px + 1.30vw, 40px);  /* desktop 40px */
	--tri-fs-42: clamp(29px, 23.91px + 1.41vw, 42px);  /* desktop 42px */
	--tri-fs-44: clamp(30px, 24.52px + 1.52vw, 44px);  /* desktop 44px */
	--tri-fs-46: clamp(30px, 24.09px + 1.64vw, 46px);  /* desktop 46px, первый экран AI v3 */
	--tri-fs-48: clamp(31px, 24.65px + 1.77vw, 48px);  /* desktop 48px, первый экран главной v2 */
	--tri-fs-50: clamp(32px, 24.96px + 1.96vw, 50px);  /* desktop 50px */
	--tri-fs-56: clamp(34px, 25.39px + 2.39vw, 56px);  /* desktop 56px */
	--tri-fs-58: clamp(34px, 24.61px + 2.61vw, 58px);  /* desktop 58px */

	/* Интерлиньяж: все значения макетов. */
	--tri-lh-1: 1;
	--tri-lh-1-08: 1.08;
	--tri-lh-1-1: 1.1;
	--tri-lh-1-12: 1.12;
	--tri-lh-1-14: 1.14;
	--tri-lh-1-15: 1.15;
	--tri-lh-1-16: 1.16;
	--tri-lh-1-18: 1.18;
	--tri-lh-1-2: 1.2;
	--tri-lh-1-25: 1.25;
	--tri-lh-1-3: 1.3;
	--tri-lh-1-35: 1.35;
	--tri-lh-1-4: 1.4;
	--tri-lh-1-45: 1.45;
	--tri-lh-1-5: 1.5;
	--tri-lh-1-55: 1.55;
	--tri-lh-1-6: 1.6;
	--tri-lh-1-65: 1.65;
	--tri-lh-1-7: 1.7;

	/* Межбуквенное расстояние: все значения макетов. */
	--tri-ls-n0-04: -0.04em;
	--tri-ls-n0-028: -0.028em;
	--tri-ls-n0-022: -0.022em;
	--tri-ls-n0-02: -0.02em;
	--tri-ls-n0-015: -0.015em;
	--tri-ls-n0-014: -0.014em;
	--tri-ls-n0-012: -0.012em;
	--tri-ls-n0-01: -0.01em;
	--tri-ls-p0-02: 0.02em;
	--tri-ls-p0-04: 0.04em;
	--tri-ls-p0-05: 0.05em;
	--tri-ls-p0-06: 0.06em;
	--tri-ls-p0-07: 0.07em;
	--tri-ls-p0-08: 0.08em;
	--tri-ls-p0-1: 0.1em;
	--tri-ls-p0-12: 0.12em;

	/* =============================================================
	 * 3. ОТСТУПЫ — шаг шкалы = фактическое значение из макетов.
	 *    Ни одно значение не заменено соседним: 64/96/104/128
	 *    существуют отдельно, потому что в дизайне это разные величины.
	 * ============================================================= */

	--tri-space-2: 2px;
	--tri-space-3: 3px;
	--tri-space-4: 4px;
	--tri-space-5: 5px;
	--tri-space-6: 6px;
	--tri-space-7: 7px;
	--tri-space-8: 8px;
	--tri-space-9: 9px;
	--tri-space-10: 10px;
	--tri-space-11: 11px;
	--tri-space-12: 12px;
	--tri-space-13: 13px;
	--tri-space-14: 14px;
	--tri-space-15: 15px;
	--tri-space-16: 16px;
	--tri-space-17: 17px;
	--tri-space-18: 18px;
	--tri-space-20: 20px;
	--tri-space-22: 22px;
	--tri-space-24: 24px;
	--tri-space-26: 26px;
	--tri-space-28: 28px;
	--tri-space-30: 30px;
	--tri-space-32: 32px;
	--tri-space-34: 34px;
	--tri-space-36: 36px;
	--tri-space-38: 38px;
	--tri-space-40: 40px;
	--tri-space-42: 42px;
	--tri-space-44: 44px;
	--tri-space-46: 46px;
	--tri-space-48: 48px;
	--tri-space-52: 52px;
	--tri-space-56: 56px;
	--tri-space-60: 60px;
	--tri-space-64: 64px;
	--tri-space-72: 72px;
	--tri-space-78: 78px;
	--tri-space-80: 80px;
	--tri-space-84: 84px;
	--tri-space-88: 88px;
	--tri-space-92: 92px;
	--tri-space-96: 96px;
	--tri-space-100: 100px;
	--tri-space-104: 104px;
	--tri-space-110: 110px;
	--tri-space-112: 112px;
	--tri-space-128: 128px;
	--tri-space-144: 144px;
	--tri-space-150: 150px;
	--tri-space-160: 160px;

	/* =============================================================
	 * 4. РАСКЛАДКА
	 * ============================================================= */

	/*
	 * ШИРИНА САЙТА. Значения сняты с утверждённых макетов v2, а не
	 * выбраны на глаз: во всех семи файлах — главная, услуга, проект,
	 * «О компании», статья, программа, агент — контейнер записан
	 * одинаково:
	 *
	 *   max-width: 1240px; width: calc(100% - 48px)
	 *
	 * Прежние 1640/80 — это первая редакция макетов. На широком мониторе
	 * содержимое растягивалось почти во всю ширину окна, и страница
	 * читалась разрежённой. Полноэкранные фоны при этом не меняются:
	 * их даёт секция, а не контейнер.
	 */
	--tri-container-max: 1240px;      /* max-width контейнера (макет v2) */
	--tri-container-gutter: 24px;     /* поле: width:calc(100% - 48px) */
	--tri-measure: 64ch;              /* max-width абзацев в макетах */
	--tri-toc-column: 230px;          /* колонка оглавления wiki */
	--tri-toc-gap: 44px;              /* зазор оглавление/текст */
	--tri-header-bar-height: 72px;    /* первая строка шапки */
	--tri-header-topics-height: 46px; /* строка направлений */

	/* =============================================================
	 * 5. СКРУГЛЕНИЯ И ГРАНИЦЫ
	 * ============================================================= */

	--tri-radius-4: 4px;
	--tri-radius-6: 6px;
	--tri-radius-8: 8px;
	--tri-radius-9: 9px;
	--tri-radius-10: 10px;
	--tri-radius-11: 11px;
	--tri-radius-12: 12px;
	--tri-radius-14: 14px;
	--tri-radius-16: 16px;
	--tri-radius-18: 18px;
	--tri-radius-20: 20px;
	--tri-radius-24: 24px;
	--tri-radius-100: 100px;
	--tri-radius-pill: 100px;
	--tri-radius-circle: 50%;

	--tri-border-width: 1px;

	/* =============================================================
	 * 6. ТЕНИ — все 27 вариантов макетов (25 из разметки + 2 из логики:
 *    раскрытая и свёрнутая карточка услуги на главной)
	 * ============================================================= */

	--tri-shadow-black-44-25: 0 18px 44px rgba(0,0,0,0.25);
	--tri-shadow-black-40-3: 0 14px 40px rgba(0,0,0,0.3);
	--tri-shadow-blue-20-3: 0 8px 20px rgba(13,63,178,0.3);
	--tri-shadow-primary-26-2: 0 12px 26px rgba(18,41,92,0.2);
	--tri-shadow-primary-26-22: 0 12px 26px rgba(18,41,92,0.22);
	--tri-shadow-primary-30-22: 0 14px 30px rgba(18,41,92,0.22);
	--tri-shadow-accent-26-3: 0 12px 26px rgba(248,179,39,0.3);
	--tri-shadow-accent-30-3: 0 14px 30px rgba(248,179,39,0.3);
	--tri-shadow-accent-30-32: 0 14px 30px rgba(248,179,39,0.32);
	--tri-shadow-accent-24-35: 0 10px 24px rgba(248,179,39,0.35);
	--tri-shadow-accent-26-35: 0 12px 26px rgba(248,179,39,0.35);
	--tri-shadow-accent-26-4: 0 12px 26px rgba(248,179,39,0.4);
	--tri-shadow-deep-40-22: 0 18px 40px rgba(4,18,46,0.22);
	--tri-shadow-deep-32-3: 0 14px 32px rgba(4,18,46,0.3);
	--tri-shadow-deep-44-34: 0 20px 44px rgba(4,18,46,0.34);
	--tri-shadow-deep-64-34: 0 30px 64px rgba(4,18,46,0.34);
	--tri-shadow-deep-56-4: 0 24px 56px rgba(4,18,46,0.4);
	--tri-shadow-navy-26-06: 0 10px 26px rgba(4,34,92,0.06);
	--tri-shadow-navy-26-07: 0 10px 26px rgba(4,34,92,0.07);
	--tri-shadow-navy-28-08: 0 10px 28px rgba(4,34,92,0.08);
	--tri-shadow-navy-36-1: 0 14px 36px rgba(4,34,92,0.1);
	--tri-shadow-navy-34-10: 0 14px 34px rgba(4,34,92,0.10);
	--tri-shadow-navy-34-12: 0 14px 34px rgba(4,34,92,0.12);
	--tri-shadow-navy-60-14: 0 26px 60px rgba(4,34,92,0.14);
	--tri-shadow-navy-18-10: 0 6px 18px rgba(4,34,92,0.10);
	--tri-shadow-navy-50-22: 0 22px 50px rgba(4,34,92,0.22);
	--tri-shadow-navy-56-18: 0 24px 56px rgba(4,34,92,0.18);

	/* =============================================================
	 * 7. ДВИЖЕНИЕ И СЛОИ
	 * ============================================================= */

	--tri-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tri-duration-15: 0.15s;          /* wiki.html: карточки «Читайте также», x4 */
	--tri-duration-20: 0.2s;           /* услуга v3: наведение в навигации по разделам */
	--tri-duration-28: 0.28s;
	--tri-duration-32: 0.32s;
	--tri-duration-3: 0.3s;

	--tri-z-sticky: 20;
	--tri-z-header: 50;
	--tri-z-dropdown: 60;
	--tri-z-modal: 90;
	--tri-z-skiplink: 100;

	/* =============================================================
	 * 8. РОЛИ — только имена, значения не меняются.
	 *    Роль указывает, какое значение макета используется
	 *    по умолчанию для нового компонента. Если конкретный блок
	 *    дизайна требует другое значение — берите его напрямую
	 *    из шкал выше, а не «подгоняйте» под роль.
	 * ============================================================= */

	--tri-role-page-bg: var(--tri-color-white);
	--tri-role-text: var(--tri-color-ink);
	--tri-role-text-muted: var(--tri-color-muted);
	--tri-role-surface: var(--tri-color-surface-edf2fd);
	--tri-role-card-bg: var(--tri-color-white);
	--tri-role-card-border: var(--tri-color-border-e2e5ea);
	--tri-role-control-border: var(--tri-color-border);
	--tri-role-control-radius: var(--tri-radius-10);
	--tri-role-card-radius: var(--tri-radius-10);
	--tri-role-badge-radius: var(--tri-radius-6);
	--tri-role-panel-radius: var(--tri-radius-20);
	--tri-role-focus: var(--tri-color-navy);
	--tri-role-transition: var(--tri-duration-28) var(--tri-ease);
	--tri-role-transition-slow: var(--tri-duration-32) var(--tri-ease);

	/* =============================================================
	 * 9. ЗНАЧЕНИЯ, КОТОРЫХ НЕТ В DESIGN-REFERENCE
	 *
	 *    Макеты свёрстаны только под desktop (min-width:1440px,
	 *    ни одного @media). Значения ниже тема вводит сама —
	 *    исключительно для состояний, которых в дизайне не существует.
	 *    Каждое перечислено в docs/DESIGN-DEVIATIONS.md.
	 * ============================================================= */

	/* Поле контейнера на узких экранах. Desktop-значение (40px)
	   достигается на 1000px и выше — там раскладка совпадает с макетом. */
	--tri-gutter: clamp(16px, 4vw, var(--tri-container-gutter));

	/* Полная высота шапки. На мобильном (макета нет) — 64px;
	   на desktop — первая строка 72px + ряд направлений 46px. */
	--tri-header-height: 64px;

	/* Пропорция медиа-слота по умолчанию (.tri-ratio). */
	--tri-ratio: 16 / 9;
}

@media (min-width: 1280px) {
	:root {
		--tri-header-height: calc(
			var(--tri-header-bar-height) + var(--tri-header-topics-height)
		);
	}

	/*
	 * Ряд направлений свёрнут — шапка ровно на него ниже. Класс ставит
	 * скрипт шапки (navigation.js). Без этой строки липкие элементы
	 * отступали бы от несуществующей высоты: полоса разделов услуги
	 * отрывалась от шапки, и между ними просвечивало содержимое.
	 */
	:root.tri-topics-collapsed {
		--tri-header-height: var(--tri-header-bar-height);
	}
}

/*
 * БРЕЙКПОИНТЫ. Custom properties не работают внутри @media, поэтому
 * значения пишутся литералами. Единый набор темы (в макетах отсутствует):
 *
 *   sm   480px   крупный телефон
 *   md   768px   планшет
 *   lg  1024px   раскладка контента
 *   xl  1280px   переключение шапки mobile -> desktop;
 *                fluid-типографика выходит на desktop-значения
 *  2xl  1600px   контейнер выходит на max-width 1640px
 */