/* ==========================================================================
   Дизайн-токены «Оркен Алем» (design/README.md → «Дизайн-токены»)
   Телефон — значения ветки mobile (390 px), компьютер — ветки desktop (1440 px).
   Планшет (640–1023) — раскладка телефона с плотными сетками, ПК — от 1024 px (v2.1).
   ========================================================================== */

:root {
	/* Цвета */
	--oa-ink: #121412;          /* текст, тёмные секции, подвал, тёмные кнопки */
	--oa-hero: #101316;         /* подложка первого экрана и шапок страниц */
	--oa-page: #EEEDE7;         /* фон страницы между блоками */
	--oa-card: #FFFFFF;         /* секции и карточки */
	--oa-card-2: #F4F3EE;       /* вложенные карточки, подложки */
	--oa-input: #F7F6F2;        /* поля, чипы */
	/* Фирменный цвет (v2.2) — зелёный логотипа вместо лайма. Цвет выбирается по фону элемента */
	--oa-accent: #1E5945;       /* заливки: главные кнопки, чипы, блоки заявки; текст на них белый */
	--oa-accent-light: #6EC4A4; /* акцент на графите: текст, иконки, точки, кольца, счётчики */
	--oa-accent-mid: #2A7E5F;   /* обводка фокуса, начало градиента */
	--oa-accent-deep: #184939;  /* конец градиента, наведение на зелёную кнопку */
	--oa-accent-soft: #E4F1EC;  /* фон меток разделов, активный пункт мобильного меню */
	--oa-accent-soft-hover: #D8E9E2;
	--oa-accent-pale: #CDEADE;  /* светлые подписи на зелёном */
	--oa-accent-line: #B8D5C9;  /* рамка карточек при наведении */
	--oa-accent-ink: #1E5945;   /* текст меток, ссылки и иконки на светлом */
	--oa-on-accent: #FFFFFF;    /* текст и иконки на зелёной заливке */
	--oa-text: #4A4E46;         /* абзацы */
	--oa-muted: #6B6F66;        /* подписи, счётчики */
	--oa-line: #E4E2DA;         /* рамки, разделители */

	/* Дополнительные оттенки из макетов */
	--oa-ink-hover: #2A2E27;    /* hover тёмных кнопок */
	--oa-ink-2: #2A2E27;        /* вторичный тёмный текст */
	--oa-photo: #0B0C0D;        /* подложка тёмных фото */
	--oa-on-dark: #D9DBD4;      /* пункты меню на тёмном */
	--oa-on-dark-2: #C2C6BC;    /* абзацы на тёмном */
	--oa-on-dark-3: #A3A79C;    /* подписи на тёмном */
	--oa-on-dark-4: #8C9086;    /* ссылки подвала */
	--oa-on-dark-5: #A9ADA3;    /* текст тёмных карточек */
	--oa-crumb-sep: #5C6058;
	--oa-label-dark: #3F433B;   /* подписи полей формы */
	--oa-card-hover-line: var(--oa-accent-line);

	/* Шрифты */
	--oa-font-head: 'Unbounded', 'Segoe UI', sans-serif;
	--oa-font: 'Manrope', 'Segoe UI', sans-serif;

	/* Начертания (v2.1): Unbounded 600 — только H1, 500 — H2 и заголовки карточек;
	   Manrope 700 — заголовки карточек, кнопки, чипы; 600 — подписи, метки, навигация; 400–500 — текст */
	--oa-fw-h1: 600;
	--oa-fw-h2: 500;
	--oa-fw-strong: 700;
	--oa-fw-label: 600;

	/* Размеры заголовков (v2.1): между значениями для 390 и 1440 px */
	--oa-h1-home: clamp(30px, 21.83px + 2.095vw, 52px);   /* главная 30 → 52 */
	--oa-h1-page: clamp(30px, 24.06px + 1.524vw, 46px);   /* внутренние страницы 30 → 46 */
	--oa-h1-product: clamp(26px, 21.54px + 1.143vw, 38px); /* изделие и запись 26 → 38 */
	--oa-h1-search: clamp(28px, 22.8px + 1.333vw, 42px);  /* поиск 28 → 42 */
	--oa-h1-404: clamp(26px, 22.29px + 0.952vw, 36px);    /* 404 26 → 36 */
	--oa-h2: clamp(24px, 20.29px + 0.952vw, 34px);        /* H2 секций 24 → 34 */

	/* Радиусы */
	--oa-r-section: 24px;       /* моб. и планшет 24, ПК 32 */
	--oa-r-card: 24px;
	--oa-r-inner: 18px;
	--oa-r-field: 14px;
	--oa-r-pill: 999px;

	/* Сетка (v2.1): колонка до 1392 px вместе с полями, секции до 1360, контент до 1280 */
	--oa-page-max: 1392px;
	--oa-page-pad: 10px;        /* поле страницы: телефон 10, планшет и ПК 16 */
	--oa-gap: 10px;             /* между секциями: телефон 10, планшет 12, ПК 16 */
	--oa-sec-pad: 26px 16px;    /* внутренний отступ секции: телефон 26×16, планшет 32×24, ПК 44×40 */
	--oa-sec-gap: 18px;
	--oa-hdr-space: 48px;       /* полоса под закреплённой шапкой: телефон 48, ПК 60 */

	/* Тени и градиенты (v2.1) */
	--oa-shadow-rest: 0 1px 2px rgba(18, 20, 18, 0.04);
	--oa-shadow-hover: 0 20px 40px -18px rgba(18, 20, 18, 0.28);
	--oa-shadow-ccard-hover: 0 22px 44px -20px rgba(18, 20, 18, 0.3);
	--oa-shadow-tile-hover: 0 24px 48px -22px rgba(18, 20, 18, 0.4);
	--oa-shadow-soft: 0 1px 2px rgba(18, 20, 18, 0.04), 0 10px 30px -22px rgba(18, 20, 18, 0.25);
	--oa-glow-accent: 0 12px 26px -12px rgba(30, 89, 69, 0.55);
	--oa-glow-dark: 0 12px 24px -14px rgba(18, 20, 18, 0.65);
	--oa-photo-light: radial-gradient(120% 100% at 50% 30%, #FFFFFF 0%, #F6F5F0 58%, #ECEBE4 100%);
	--oa-green-grad: linear-gradient(135deg, #297056 0%, #1E5945 48%, #184939 100%); /* блоки заявки (v2.2) */
	--oa-on-green-text: rgba(255, 255, 255, 0.86);  /* абзацы на зелёном */
	--oa-on-green-plate: rgba(255, 255, 255, 0.12); /* полупрозрачные плашки на зелёном */
	--oa-dark-grad: linear-gradient(160deg, #1F231E 0%, #121412 100%);

	/* Состояния */
	--oa-focus: 2px solid #2A7E5F;
	--oa-field-focus: 0 0 0 3px rgba(42, 126, 95, 0.3);
}

/* Планшет (640–1023 px): раскладка телефона, но плотнее сетки и шире поля */
@media (min-width: 640px) {
	:root {
		--oa-page-pad: 16px;
		--oa-gap: 12px;
		--oa-sec-pad: 32px 24px;
		--oa-sec-gap: 22px;
	}
}

/* Компьютер (от 1024 px) */
@media (min-width: 1024px) {
	:root {
		--oa-r-section: 32px;
		--oa-gap: 16px;
		--oa-sec-pad: 44px 40px;
		--oa-sec-gap: 28px;
		--oa-hdr-space: 60px;
	}
}