/**
 * Cup of Air — shared design tokens (typography + spacing)
 * Desktop-first. Load site-wide before page CSS.
 *
 * IMPORTANT: Helix/template sets html { font-size: 14px }.
 * Tokens use absolute px (not rem) so sizes don’t shrink under that root.
 *
 * Scale anchored on body (--coa-text-md: 18px):
 *   xs   14px  — badges / micro
 *   sm   16px  — captions, footnotes
 *   md   18px  — body
 *   lg   21px  — leads, subtitles
 *   xl   26px  — H3 / card titles (~1.44× body)
 *   2xl  32–42px — section / stage headings (~1.8–2.3×)
 *   3xl  36–48px — CTA / large section
 *   display 42–60px — hero (fluid + hard max)
 */

:root {
	--coa-text-xs: 14px;
	--coa-text-sm: 16px;
	--coa-text-md: 18px;
	--coa-text-lg: 21px;
	--coa-text-xl: 26px;
	--coa-text-2xl: clamp(32px, 3.4vw, 42px);
	--coa-text-3xl: clamp(36px, 3.8vw, 48px);
	--coa-text-display: clamp(42px, 4.4vw, 60px);

	--coa-lh-tight: 1.2;
	--coa-lh-snug: 1.35;
	--coa-lh-body: 1.65;
	--coa-lh-lead: 1.55;

	--coa-tracking-display: -0.03em;
	--coa-tracking-heading: -0.02em;

	--coa-space-stack: 1.05em;
	--coa-space-stack-sm: 0.8em;
	--coa-space-lead-y: 1.35em;
	--coa-space-section-y: clamp(3.5rem, 6vw, 5.5rem);
	--coa-space-card-gap: 1.5rem;
}

@media (max-width: 768px) {
	:root {
		--coa-text-xs: 13px;
		--coa-text-sm: 15px;
		--coa-text-md: 17px;
		--coa-text-lg: 19px;
		--coa-text-xl: 22px;
		--coa-text-2xl: clamp(26px, 5.8vw, 34px);
		--coa-text-3xl: clamp(28px, 6vw, 38px);
		--coa-text-display: clamp(32px, 7vw, 44px);
		--coa-space-section-y: clamp(2rem, 8vw, 3rem);
	}
}