/*
 * «Вітай!» — токени оформлення.
 *
 * Напрямок «Святкова листівка»: кремове тло з рожевим підтоном, малиновий
 * акцент, велике скруглення, тепла рожева тінь. Патерни цього сайту —
 * hero H4 (слайдер), заголовки секцій S4, бейджі B1, картки C14 «листівка»,
 * C15 «конверт», C16 «гірлянда», стрічка `confetti`.
 *
 * Єдиний файл, де в темі стоять кольори. Дві групи змінних:
 *
 *   --osn-*   токени Osnova. Перевизначені тут — і батьківський скін
 *             перефарбовується цілком, знімати його не доводиться.
 *   --vity-*  те, чого в Osnova немає: конфеті, стрічки, кути листівки.
 */

:root {
	/* -- палітра «Святкова листівка» ---------------------------------- */
	--vity-bg: #fdf5f2;
	--vity-surface: #ffffff;
	--vity-surface-alt: #faece7;
	--vity-line: #f0dcd4;
	--vity-line-strong: #e2c4b9;

	--vity-accent: #c01f56;
	--vity-accent-hover: #9d1746;
	--vity-accent-soft: #fce7ee;
	--vity-accent-contrast: #ffffff;

	--vity-ink: #211a20;
	--vity-ink-muted: #5f4f58;
	--vity-ink-faint: #7a6470;
	--vity-ink-invert: #fffaf8;

	/*
	 * Конфеті. Тільки декор: крапки, стрічки й кутики 4–10px. Текст ними
	 * не набирається ніде, тому до них не застосовується вимога 4.5:1.
	 */
	--vity-spark-a: #2f8f6b;
	--vity-spark-b: #e08a2e;
	--vity-spark-c: #4a72c4;

	/* -- перевизначення токенів Osnova -------------------------------- */
	--osn-font-display: "Unbounded", "Trebuchet MS", sans-serif;
	--osn-font-body: "Onest", "Segoe UI", system-ui, sans-serif;

	--osn-accent: var(--vity-accent);
	--osn-accent-hover: var(--vity-accent-hover);
	--osn-accent-soft: var(--vity-accent-soft);
	--osn-accent-contrast: var(--vity-accent-contrast);

	--osn-ink: var(--vity-ink);
	--osn-ink-muted: var(--vity-ink-muted);
	--osn-ink-faint: var(--vity-ink-faint);
	--osn-ink-invert: var(--vity-ink-invert);

	--osn-bg: var(--vity-bg);
	--osn-surface: var(--vity-surface);
	--osn-surface-alt: var(--vity-surface-alt);
	--osn-line: var(--vity-line);
	--osn-line-strong: var(--vity-line-strong);

	/* Найкругліший набір у серії — листівка не має гострих кутів. */
	--osn-r-sm: 6px;
	--osn-r-md: 10px;
	--osn-r-lg: 24px;
	--osn-r-pill: 999px;
	--vity-r-xl: 32px;

	--osn-shadow-sm: 0 1px 3px rgba(140, 30, 70, .07);
	--osn-shadow-md: 0 10px 30px rgba(140, 30, 70, .10);
	--vity-shadow-lg: 0 20px 48px rgba(140, 30, 70, .16);

	--osn-space: 8px;
	--osn-container: 1280px;
	--osn-gutter: 24px;
	--osn-gap: 44px;
	--osn-sidebar: 316px;
	--osn-prose: 66ch;
	--osn-logo-height: 46px;

	--osn-fs-body: 17px;
	--osn-fs-small: 14px;
	--osn-fs-meta: 13px;
	--osn-fs-kicker: 11px;
	--osn-lh-body: 1.72;
	--osn-track-caps: .09em;

	/* Власні кроки блоків головної. */
	--vity-block-gap: 20px;
	--vity-block-space: 56px;
}

@media (max-width: 768px) {
	:root {
		--osn-gap: 32px;
		--osn-gutter: 18px;
		--vity-block-space: 40px;
		--vity-block-gap: 16px;
	}
}

@media (max-width: 540px) {
	:root {
		--osn-fs-body: 16px;
		--osn-gutter: 14px;
		--osn-r-lg: 18px;
		--vity-r-xl: 22px;
		--vity-block-space: 32px;
	}
}