/* =============================================================
   Ядро системы: всё, что не зависит от бренда.

   Здесь нет ни одного фирменного цвета — только шкалы, сетка,
   типографика, скругления и тени. Цвет приходит из темы
   (tokens/themes/*.css), поэтому один и тот же компонент
   работает и в Droome, и в Яхроме, ничего не зная о них.

   Правило: если значение встречается в вёрстке дважды —
   ему место здесь. Локальные числа в компонентах допустимы
   только там, где они действительно единичны.
   ============================================================= */

:root {
	/* --- Ритм и сетка --------------------------------------- */

	/*
	 * Одна шкала отступов на всю систему. Промежуточные значения
	 * (13px, 22px) не выдумываем: если чего-то не хватает, значит
	 * шкала выбрана неверно, и чинить надо её, а не один блок.
	 */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 22px;
	--s-6: 30px;
	--s-7: 40px;
	--s-8: 56px;
	--s-9: 76px;

	--wrap: 1200px;          /* ширина контентной колонки */
	--wrap-narrow: 760px;    /* для текстовых страниц: длинная строка не читается */
	--pad: clamp(20px, 4vw, 44px);
	--gap-section: clamp(64px, 8vw, 128px);

	/* --- Типографика ---------------------------------------- */

	/*
	 * Две гарнитуры: заголовочная и текстовая. Больше двух —
	 * почти всегда ошибка. Конкретные имена задаёт тема.
	 */
	--font-ui: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-display: var(--font-ui);

	/*
	 * Кегли на clamp: между телефоном и десктопом разница вдвое,
	 * и фиксированные размеры дают либо мелко, либо гигантски.
	 */
	--t-h1: clamp(34px, 5.6vw, 68px);
	--t-h2: clamp(27px, 3.6vw, 44px);
	--t-h3: clamp(19px, 1.9vw, 23px);
	--t-lead: clamp(16px, 1.5vw, 19px);
	--t-body: 17px;
	--t-small: 15px;
	--t-caption: 13px;

	--lh-tight: 1.08;        /* заголовки */
	--lh-normal: 1.6;        /* текст */
	--ls-tight: -.02em;      /* крупный кегль без этого выглядит рыхло */

	/* --- Форма ---------------------------------------------- */

	--r-lg: 24px;
	--r: 16px;
	--r-sm: 11px;
	--r-pill: 999px;

	--border: 1px;
	--focus-ring: 3px;       /* толщина кольца фокуса */

	/* --- Движение ------------------------------------------- */

	/*
	 * Три длительности на всё. Наведение — мгновенно, появление —
	 * заметно, но не тормозит; всё, что дольше 600 мс, читается
	 * как «сайт задумался».
	 */
	--t-fast: .18s;
	--t-mid: .3s;
	--t-slow: .6s;
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* --- Слои ----------------------------------------------- */

	--z-base: 1;
	--z-sticky: 40;
	--z-header: 60;
	--z-modal: 80;
}

/*
 * Уважение к системной настройке. Отключаем не только переходы,
 * но и плавную прокрутку: у части людей она вызывает укачивание.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0s;
		--t-mid: 0s;
		--t-slow: 0s;
	}

	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* =============================================================
   Сброс и базовая типографика
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 var(--t-body)/var(--lh-normal) var(--font-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }

p { margin: 0; }
a { color: inherit; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Фокус виден всегда — по нему ходят с клавиатуры и скринридером. */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* --- Утилиты, которых достаточно в 90% случаев --------------- */

.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--pad) * 2, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--gap-section); }
.band { background: var(--bg2); }

.lead { font-size: var(--t-lead); color: var(--ink2); max-width: 34em; }
.eyebrow { font-size: var(--t-caption); color: var(--ink3); }
.caption { font-size: var(--t-caption); color: var(--ink3); }

/* Заголовок секции: подпись, заголовок, лид — всегда в этом порядке. */
.head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }

.stack { display: grid; gap: var(--s-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}