/* Токены и база. Источник: design-system/kostroma-fair/MASTER.md */

:root {
	/* Цвет: бренд */
	--color-pink: #fdb7d3;
	--color-green: #007a22;
	--color-red: #ec2f59;
	--color-white: #fff;
	--color-ink: #1f0c11; /* тёплый почти-чёрный, как текст афиши; на красном держит 4.5:1 */

	/* Цвет: производные оттенки бренда */
	--color-pink-soft: #fff1f7;
	--color-red-deep: #c41e45; /* красный для текста и кнопок с белым текстом */
	--color-green-deep: #005c19; /* мелкий зелёный текст на розовом */
	--color-green-dark: #0b4a20; /* футер, тёмные плашки */
	--color-rope: #f4a3bf; /* светло-розовая половина верёвки и ниток */
	--color-wood: #e3b06a; /* дерево прищепки */
	--color-wood-light: #f6d9a6;
	--color-mint: #eefaf1; /* светлая зелёная подложка */
	--color-mint-deep: #e3f4e8;
	--color-gray: #555; /* второстепенный текст на белом */
	--color-red-btn: #de2650; /* фон кнопок под белый текст (4.67:1), на глаз = бренд-красный */

	/* Отступы */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--section-y: clamp(3rem, 8vw, 6rem);

	/* Контейнер */
	--gutter: clamp(16px, 4vw, 48px);
	--container: min(1400px, 100% - 2 * var(--gutter));
	--container-narrow: min(720px, 100% - 2 * var(--gutter));

	/* Формы и тени */
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--border: 1px solid rgb(17 17 17 / 0.14);
	--border-strong: 1.5px solid var(--color-ink);
	--shadow-card: 0 10px 30px -12px rgb(17 17 17 / 0.25);
	--shadow-btn: 0 8px 18px -8px rgb(196 30 69 / 0.7);

	/* Шрифтовая шкала (семейства: fonts.css) */
	--fs-h1: clamp(2.5rem, 7vw, 5.5rem);
	--fs-h2: clamp(2rem, 4.5vw, 3.5rem);
	--fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	/* Движение */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;

	/* Звезда-блёстка с афиши: 4 длинных луча + 4 коротких диагональных */
	--star: polygon(50% 0%, 54% 41%, 73% 27%, 59% 46%, 100% 50%, 59% 54%, 73% 73%, 54% 59%, 50% 100%, 46% 59%, 27% 73%, 41% 54%, 0% 50%, 41% 46%, 27% 27%, 46% 41%);

	/* Вспышка-«взрыв» (24 луча) под котом и значками */
	--burst: polygon(50.0% 0.0%, 55.2% 10.3%, 62.9% 1.7%, 65.3% 13.0%, 75.0% 6.7%, 74.4% 18.3%, 85.4% 14.6%, 81.7% 25.6%, 93.3% 25.0%, 87.0% 34.7%, 98.3% 37.1%, 89.7% 44.8%, 100.0% 50.0%, 89.7% 55.2%, 98.3% 62.9%, 87.0% 65.3%, 93.3% 75.0%, 81.7% 74.4%, 85.4% 85.4%, 74.4% 81.7%, 75.0% 93.3%, 65.3% 87.0%, 62.9% 98.3%, 55.2% 89.7%, 50.0% 100.0%, 44.8% 89.7%, 37.1% 98.3%, 34.7% 87.0%, 25.0% 93.3%, 25.6% 81.7%, 14.6% 85.4%, 18.3% 74.4%, 6.7% 75.0%, 13.0% 65.3%, 1.7% 62.9%, 10.3% 55.2%, 0.0% 50.0%, 10.3% 44.8%, 1.7% 37.1%, 13.0% 34.7%, 6.7% 25.0%, 18.3% 25.6%, 14.6% 14.6%, 25.6% 18.3%, 25.0% 6.7%, 34.7% 13.0%, 37.1% 1.7%, 44.8% 10.3%);

	/* Высота sticky-шапки */
	--header-h: 4.25rem;

	/* Фокус */
	--focus-ring: 3px solid var(--color-ink);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--header-h);
}

html.menu-open {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--color-pink);
	color: var(--color-ink);
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;

	/* Подвал прижат к низу окна, если контента мало */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

main {
	flex: 1 0 auto;
}

h1,
h2,
h3 {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.05;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

/* Заголовки секций как на афише: заглавные, зелёные (крупный текст, на розовом 3.4:1 допустимо).
   Подписи карточек (h2 внутри плиток и блоков) остаются обычными */
.section-head h2,
.about__body h2,
.pricing__head h2,
.apply__card h2,
.kn-h2,
.sv-title,
.vopros-faq__title,
.form-page__form-title {
	color: var(--color-green);
	text-transform: uppercase;
}
h3 { font-size: var(--fs-h3); }

h4,
h5,
h6 {
	margin: 0 0 var(--space-sm);
	font-weight: 700;
	line-height: 1.2;
}

p,
ul,
ol {
	margin: 0 0 var(--space-md);
}

small {
	font-size: var(--fs-small);
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button,
[role='button'],
summary,
label[for],
select {
	cursor: pointer;
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Контейнеры */
.container {
	width: var(--container);
	margin-inline: auto;
}

.container--narrow {
	width: var(--container-narrow);
	margin-inline: auto;
}

/* Скрыть визуально, оставить для скринридеров */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ссылка «К содержимому»: видна только при фокусе */
.skip-link {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1000;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-sm);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}