/* Дизайн-токены opencall226.ru.
   Все значения сняты из Figma Bqp717vgdraYWOqN8tBy0x (кадры 1:3, 122:489, 69:243,
   205:5554). Таблица «токен → значение → узел-источник» — plan/progress/0.3-tokens-check.md.
   Ничего не придумано: если нужного значения нет — снимаем узел, а не подбираем на глаз.
   1rem = 10px на ширине канвы (402 мобилка / 1728 десктоп); множитель на html —
   в base.css, обе канвы тянутся за шириной окна. */

/* Начертания макета. Курсив только у текстового Lyon (chrome.css, landing.css);
   у Epos одно начертание — синтетических bold/italic не заводим. */
@font-face {
	font-family: "Epos";
	src: url("/fonts/Epos-Medium-Web.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lyon Text Cyr";
	src: url("/fonts/Lyon_Text-Regular-Web.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lyon Text Cyr";
	src: url("/fonts/Lyon_Text-Regular_Italic-Web.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Только для подзаголовков подвала, портированного с smyslovaya226.ru
   (правки клиента, п. 18). Файл и объявление — из его же билда: начертание
   переменное, одно italic на диапазон 100–900. */
@font-face {
	font-family: "Gregory Poster";
	src: url("/fonts/Gregory_Poster_Variable_Italic_Web.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* ── Цвет ── уникальные SOLID-fills кадров 1:3 и 122:489 ───────────────── */
	--color-bg: #fff0d7; /* фон страницы, 1:3.fills */
	--color-surface: #fffcf6; /* светлые карточки */
	--color-white: #fff; /* заливка редактора заявки, 205:3886 */
	--color-surface-warm: #f9e0b7; /* тёплая плашка */
	--color-ink: #212026; /* основной текст */
	--color-ink-deep: #0d0d0d; /* текст страницы «отправлено», 175:2249 / 175:2250 */
	--color-ink-muted: rgba(33, 32, 38, .5); /* приглушённый текст */
	--color-line: rgba(33, 32, 38, .1); /* разделители, stroke I122:567;3075:86273 */
	--color-green: #084d36; /* акцент: кнопки, плашки */
	--color-green-deep: #0f3327; /* тёмные секции */
	--color-brown: #8d5714; /* акцент-текст, обводки */
	--color-error: #8d2814; /* «*Обязательное поле» и обводка пустого поля, 122:1027 */
	--color-sand: #e5af57; /* акцент-заливка */
	--color-on-dark: #fff0d7; /* текст на тёмном */
	--color-on-dark-muted: rgba(255, 240, 215, .5);

	/* ── Шрифты ────────────────────────────────────────────────────────────────
	   Epos — витринные заголовки, Lyon Text Cyr — весь текст. Файлы приехали из
	   media226.ru (тот же издатель), лежат в /fonts, @font-face — ниже. Запасные
	   засечные стеки остаются на время загрузки (font-display: swap). */
	--font-display: "Epos", Georgia, "Times New Roman", serif;
	--font-text: "Lyon Text Cyr", Georgia, "Times New Roman", serif;
	--font-poster: "Gregory Poster", Georgia, "Times New Roman", serif; /* только подвал */
	--font-weight: 400; /* весь макет в одном начертании */

	/* ── Типографика ── имена = именованные текст-стили Figma ──────────────────
	   Epos: lineHeight 85% кегля во всех стилях. letterSpacing переведён в em. */
	--t-display-160-size: 16rem; /* Display/160 — 2:686 */
	--t-display-160-lh: 13.6rem;
	--t-display-160-ls: -.01em;

	--t-display-120-size: 12rem; /* Headings/120 — 122:479 */
	--t-display-120-lh: 10.2rem;

	--t-display-80-size: 8rem; /* Display/80 — 4:243, Headings/80 — 122:456 */
	--t-display-80-lh: 6.8rem;

	--t-display-60-size: 6rem; /* Display/60 — 21:129 */
	--t-display-60-lh: 5.1rem;

	--t-display-50-size: 5rem; /* Headings/50 — 1:281 */
	--t-display-50-lh: 4.25rem;

	--t-h3-size: 3.4rem; /* H3/Regular — 17:130 */
	--t-h3-lh: 3.6rem;
	--t-h3-ls: -.005em;

	--t-h4-size: 2.7rem; /* H4/Regular — 62:97 */
	--t-h4-lh: 2.8rem;

	--t-h4-loose-size: 2.7rem; /* тот же кегль с воздухом — списки регламента */
	--t-h4-loose-lh: 3.2rem;

	--t-lead-size: 2.5rem; /* Lead/lead-regular — 122:457 */
	--t-lead-lh: 2.8rem;

	--t-menu-size: 2.3rem; /* Menu/menu — 1:15, SMALL_CAPS */
	--t-menu-lh: 2.4rem;
	--t-menu-ls: .025em;

	--t-paragraph-l-size: 2.1rem; /* Paragraph/L — 24:251, 6:297 (основной текст) */
	--t-paragraph-l-lh: 2.6rem;

	--t-caption-l-size: 2.1rem; /* Caption/caption-L — 122:465 */
	--t-caption-l-lh: 2.4rem;
	--t-caption-l-ls: .005em;

	--t-caption-m-size: 1.7rem; /* Caption/caption-M — 1:216 */
	--t-caption-m-lh: 2rem;
	--t-caption-m-ls: .005em;

	--t-special-size: 1.5rem; /* special — 1:198, SMALL_CAPS_FORCED */
	--t-special-lh: 1.6rem;
	--t-special-ls: .1em;

	--t-caption-s-size: 1.5rem; /* Caption/caption-S — 80:132 */
	--t-caption-s-lh: 1.8rem;
	--t-caption-s-ls: .005em;

	--t-caption-xs-size: 1.3rem; /* Caption/caption-XS — 80:145 */
	--t-caption-xs-lh: 1.6rem;
	--t-caption-xs-ls: .01em;

	--t-numeral-size: 4rem; /* номера этапов «сроки» */
	--t-numeral-lh: 1.6rem;

	/* ── Сетка ── layoutGrid «24» (93:221) на кадре 1:3 ──────────────────────── */
	--page-w: 172.8rem; /* кадр десктопа */
	--page-margin: 2.4rem; /* offset колоночной сетки */
	--content-w: 168rem; /* 3 × 52.8 + 2 × 4.8 */
	--col-w: 52.8rem; /* sectionSize */
	--gutter: 4.8rem; /* gutterSize */
	--section-pad-x: 2rem; /* paddingLeft/Right секций 15:123, 24:203, 62:133 */
	--form-col-w: 42rem; /* колонка поля формы, 69:243 → 80:261 */
	--form-w: 88.8rem; /* две колонки + gutter */

	/* мобильный кадр 402 (205:5554) */
	--page-w-mobile: 40.2rem;
	--page-margin-mobile: 1.6rem;

	/* ── Ритм секций ── paddings/itemSpacing кадров-секций ──────────────────── */
	--section-pad-top: 4.8rem;
	--section-pad-bottom: 12.8rem; /* мобилка — 6.4rem, 205:5554 */
	--section-pad-bottom-mobile: 6.4rem;
	--gap-48: 4.8rem; /* itemSpacing 50:502, 6:418 */
	--gap-64: 6.4rem; /* itemSpacing 15:123, 24:203, 59:93 */
	--gap-72: 7.2rem; /* itemSpacing 62:133, 69:243 */
	--gap-96: 9.6rem; /* itemSpacing 122:490, 122:493 */
	--gap-40: 4rem; /* itemSpacing 80:261 (форма) */
	--gap-32: 3.2rem; /* itemSpacing 205:5557 (форма, мобилка) */

	/* ── Радиусы ── cornerRadius узлов кадров 1:3 / 122:489 ─────────────────── */
	--radius-s: 1.2rem;
	--radius-m: 3.2rem;
	--radius-l: 4rem;
	--radius-xl: 4.4rem;
	--radius-pill: 10rem;
}

/* Брейкпоинт один: @media (min-width: 980px). В кастомное свойство его не
   вынести — media-queries не читают var(); значение живёт в этом комментарии
   и в правилах блоков. */