/**
 * База: токены, сброс, типографика, доступность.
 *
 * Токены — из docs/blocks.md, раздел 1. Палитра и шрифты продублированы
 * в theme.json для редактора; если меняешь цвет здесь — поменяй и там.
 */

:root {
	/* Цвета */
	--fsp-color-primary: #255C50;
	--fsp-color-primary-dark: #1B4A40;
	--fsp-color-accent: #E6D3B5;
	--fsp-color-accent-dark: #D8BF96; /* hover вторичной кнопки; текст --fsp-color-text на нём 10.3:1 */
	--fsp-color-text: #031812;
	--fsp-color-text-muted: #383C3F;  /* графит: 11:1 на белом, 7.3:1 на шалфейном */
	--fsp-color-bg: #fff;
	--fsp-color-bg-alt: #F7F7EE;
	--fsp-color-border: #E6D3B5;
	--fsp-color-on-primary: #fff;

	/* Производные от палитры — не новые цвета, а смеси зелёного с кремовым */
	--fsp-color-deep: #031812;        /* = text: тёмные кнопки-пилюли, белый текст 18.4:1 */
	--fsp-color-sage: #C9D5CB;        /* 22% зелёного в кремовом: текст 12.1:1, зелёный 5.1:1, графит 7.3:1 */
	--fsp-color-sage-light: #EAEEE5;  /* 6% */
	--fsp-gradient-sage: linear-gradient(165deg, var(--fsp-color-sage) 0%, var(--fsp-color-sage-light) 60%, var(--fsp-color-bg-alt) 100%);
	--fsp-color-glass: rgb(255 255 255 / 0.6);     /* метки и карточки на шалфейном фоне */
	--fsp-color-line: rgb(3 24 18 / 0.1);          /* тонкие рамки на любом фоне */

	/* Типографика */
	--fsp-font-heading: Poppins, system-ui, sans-serif;
	--fsp-font-body: Inter, system-ui, sans-serif;
	--fsp-fw-heading: 500; /* заголовки — на ступень тоньше, чтобы буквы не сливались (решение владельца) */
	--fsp-fs-base: 1.125rem; /* 18px — не меньше */
	--fsp-fs-small: 1rem;    /* мельче не бывает нигде */
	--fsp-fs-lead: 1.375rem;
	--fsp-lh-base: 1.65;

	/* Модульная шкала 1.25 от 18px, на узких экранах — на шаг меньше */
	/* Крупнее шкалы — заголовок главный на экране; на низких окнах (ноутбук 1366×768)
	   ограничен и высотой, чтобы первый экран помещался без прокрутки. */
	--fsp-fs-h1: clamp(2.25rem, min(1.6rem + 3.2vw, 7svh), 3.5rem);
	--fsp-fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
	--fsp-fs-h3: clamp(1.5rem, 1.35rem + 0.7vw, 1.9375rem);
	--fsp-fs-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5625rem);
	--fsp-fs-h5: 1.25rem;
	--fsp-fs-h6: 1.125rem;

	/* Сетка и ритм */
	--fsp-container: 1200px;
	--fsp-container-text: 720px;
	--fsp-gutter: clamp(1.5rem, 4vw, 2rem);    /* ≥ двух --fsp-panel-gap: текст в панелях встаёт на ту же линию */
	--fsp-gap: 1.5rem;
	--fsp-section-y: clamp(3.5rem, 8vw, 6.5rem);
	--fsp-radius-sm: 12px;   /* мелкие элементы, поля в таблицах */
	--fsp-radius: 24px;      /* карточки, фото */
	--fsp-radius-lg: 40px;   /* секции-панели, крупные фото */
	--fsp-radius-pill: 999px; /* кнопки, метки, поля ввода */

	/* Панели и первый экран */
	--fsp-panel-gap: clamp(0.5rem, 1.5vw, 1.5rem); /* поля панелей от краёв и отступ от шапки */
	--fsp-header-h: 4.5rem;                          /* высота шапки; на десктопе — в header.css */
	--fsp-first-screen: calc(100svh - var(--fsp-header-h) - var(--fsp-panel-gap));
	--fsp-hero-pad: clamp(1.5rem, 5svh, 4rem);       /* вертикальные поля первого экрана */

	/* Доступность */
	--fsp-tap: 48px; /* минимальная кликабельная зона */
	--fsp-focus: 3px solid var(--fsp-color-primary-dark);
}

/* Сброс */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 6rem; /* якоря не прячутся под липкой шапкой */
}

body {
	margin: 0;
	background: var(--fsp-color-bg);
	color: var(--fsp-color-text);
	font-family: var(--fsp-font-body);
	font-size: var(--fsp-fs-base);
	line-height: var(--fsp-lh-base);
	text-rendering: optimizeLegibility;
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--fsp-color-primary);
	font-family: var(--fsp-font-heading);
	font-weight: var(--fsp-fw-heading);
	line-height: 1.3;
	text-wrap: balance;
}

h1 { font-size: var(--fsp-fs-h1); line-height: 1.2; letter-spacing: -0.005em; }
h2 { font-size: var(--fsp-fs-h2); line-height: 1.25; }
h3 { font-size: var(--fsp-fs-h3); }
h4 { font-size: var(--fsp-fs-h4); }
h5 { font-size: var(--fsp-fs-h5); }
h6 { font-size: var(--fsp-fs-h6); }

p,
ul,
ol,
blockquote,
figure,
table {
	margin: 0 0 1em;
}

a {
	color: var(--fsp-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--fsp-color-primary-dark);
	text-decoration-thickness: 2px;
}

strong,
b {
	font-weight: 600;
}

/* Доступность */

:focus-visible {
	outline: var(--fsp-focus);
	outline-offset: 3px;
}

.fsp-skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--fsp-color-primary);
	color: var(--fsp-color-on-primary);
	font-weight: 600;
	transform: translateY(-200%);
}

.fsp-skip-link:focus {
	transform: none;
	color: var(--fsp-color-on-primary);
}

.fsp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.fsp-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}