/* =========================================================
 * assets/css/tokens.css
 *
 * Единственное место, где живут фирменный зелёный и размеры «зелёной» части
 * сайта. До этого #0b5d46 был вбит литералом в трёх файлах сразу
 * (wf-shortcodes.css — герой главной, currency-page.css — герой курса валют,
 * bank-page.css — шапка банка), и оттенки начинали расходиться.
 *
 * Правим цвет здесь, во всех остальных файлах ссылаемся на var(--wf-*).
 * Подключается первым в wf_child_enqueue_assets(), до child-style.
 * =======================================================*/

:root {
	/* --- Фирменный зелёный --- */
	--wf-green: #0b5d46;        /* фон героев и тёмных плашек */
	--wf-green-dark: #094b39;   /* градиент/ховер поверх --wf-green */
	--wf-green-deep: #0b2f25;   /* самые тёмные блоки (карточка калькулятора) */
	--wf-green-bright: #afe9a4; /* акцентный текст на зелёном */
	--wf-green-dot: #57e389;    /* «живая» точка в бейдже */

	/* --- Текст поверх зелёного --- */
	--wf-on-green: #ffffff;
	--wf-on-green-muted: rgba(255, 255, 255, 0.72);
	--wf-on-green-faint: rgba(255, 255, 255, 0.55);
	--wf-on-green-line: rgba(255, 255, 255, 0.14);

	/* --- Высота прозрачной шапки ---
	   Герои отсчитывают от неё верхний отступ. Меняется шапка — правим здесь,
	   а не по 120px в каждом отдельном файле.

	   Значение замерено на живой шапке и взято по МАКСИМУМУ в полосе: выше 980px
	   она гуляет от 80px (1440) до 92px (1024-1200) — меню там переносится в два
	   ряда. Занижать нельзя: герой заезжает под шапку. Лишние пиксели на широком
	   экране читаются просто как воздух. */
	--wf-header-h: 92px;

	/* --- Контентная колонка ---
	   Ровно та ширина, которую WP печатает для контейнера post-content
	   (.wp-container-core-post-content-is-layout-* > * { max-width: 1170px }).
	   Переменной для неё ядро не отдаёт — она генерится под каждый контейнер,
	   поэтому держим значение здесь. Разъедется — герой перестанет совпадать
	   по левому краю с карточками ниже. */
	--wf-page-max: 1170px;
	--wf-page-pad: 40px;
}

/* Значения замерены на живой шапке, а не на глаз: до 560px она 80px (лого 32 +
   по 24 сверху/снизу, бургер 24), в промежутке 640-980px меню разъезжается в две
   строки и высота 90px. Занижение здесь не косметика — герой отсчитывает от этой
   переменной верхний отступ и на телефоне заезжал под шапку на 16px. */
@media (max-width: 980px) {
	:root {
		--wf-header-h: 90px;
		--wf-page-pad: 24px;
	}
}

@media (max-width: 560px) {
	:root {
		--wf-header-h: 80px;
		--wf-page-pad: 18px;
	}
}