html {
scroll-behavior: smooth;
/* 16px base (browser default, kept explicit) — the site's typography scale
(below) is spec'd in exact px targets assuming Tailwind's stock rem-based
text-* utilities (e.g. text-6xl = 60px), so the root size must stay at
16px for those utilities to hit their intended values. */
font-size: 16px;
}
/* Typography system — see the spec this implements: Inter (body/UI) +
Space Grotesk (headings), 16px base body, headings weight 700 (800 for
hero), body line-height 1.6-1.8, headings 1.1-1.2. Values here are
defaults only — a low-specificity element selector, so any Tailwind
text-*/font-*/leading-* utility already on an element still wins. */
:root {
--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--fs-body: 1rem; /* 16px */
--fs-small: 0.875rem; /* 14px */
--fs-caption: 0.75rem; /* 12px */
--fs-h1: 3.75rem; /* 60px desktop */
--fs-h1-mobile: 2.25rem; /* 36px mobile */
--fs-h2: 3rem; /* 48px desktop */
--fs-h2-mobile: 2rem; /* 32px mobile */
--fs-h3: 2.25rem; /* 36px */
--fs-h4: 1.75rem; /* 28px */
--fs-h5: 1.375rem; /* 22px */
--fs-h6: 1.125rem; /* 18px */
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
}
p {
line-height: 1.7;
}
/* Static equivalent of Tailwind's .hidden utility, for the one place (the
Facebook Pixel's