/* VERDE — единый слой токенов и брейкпоинтов.
   Только переменные и утилиты. Внешний вид утверждённой вёрстки не меняется. */
:root {
	/* Палитра */
	--vd-paper: #fafbf3;
	--vd-ink: #252a2d;
	--vd-green: #252a2d;
	--vd-deep: #1c211b;
	--vd-muted: #7e8c7b;
	--vd-mist: #e1ece3;
	--vd-surface: #ffffff;
	--vd-border: #dfe2d5;
	--vd-on-dark: #f4f6ee;

	/* Типографика */
	--vd-font-head: Opium, serif;
	--vd-font-body: "Manrope", Arial, sans-serif;
	--vd-font-ui: Inter, Arial, sans-serif;

	/* Ритм */
	--vd-space-xs: 8px;
	--vd-space-s: 16px;
	--vd-space-m: 24px;
	--vd-space-l: 40px;
	--vd-space-xl: 64px;
	--vd-space-2xl: 96px;
	--vd-space-3xl: 120px;

	/* Контейнеры и кадры утверждённого макета */
	--vd-frame-desktop: 1440px;
	--vd-frame-mobile: 402px;
	--vd-container: 1200px;
	--vd-gutter: 24px;

	/* Скругления, тени, движение */
	--vd-radius: 2px;
	--vd-radius-lg: 12px;
	--vd-shadow-card: 0 16px 36px rgba(0, 0, 0, 0.14);
	--vd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vd-dur-fast: 0.18s;
	--vd-dur: 0.55s;
	--vd-dur-slow: 0.9s;
	--vd-header-h: 74px;
	--vd-z-header: 100;
	--vd-z-modal: 900;
}

/* Совместимость со старыми именами переменных runtime */
:root {
	--verde-paper: var(--vd-paper);
	--verde-ink: var(--vd-ink);
	--verde-green: var(--vd-green);
	--verde-muted: var(--vd-muted);
	--verde-mist: var(--vd-mist);
}

@media (max-width: 1024px) {
	:root {
		--vd-gutter: 20px;
		--vd-space-3xl: 88px;
		--vd-space-2xl: 72px;
	}
}

@media (max-width: 768px) {
	:root {
		--vd-gutter: 16px;
		--vd-space-3xl: 64px;
		--vd-space-2xl: 56px;
		--vd-space-xl: 44px;
	}
}

@media (max-width: 480px) {
	:root {
		--vd-gutter: 14px;
		--vd-space-3xl: 52px;
		--vd-space-2xl: 44px;
	}
}

/* Служебные утилиты */
.vd-container {
	width: 100%;
	max-width: var(--vd-container);
	margin-inline: auto;
	padding-inline: var(--vd-gutter);
	box-sizing: border-box;
}

.vd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

img,
video {
	max-width: 100%;
}