/* Property Inspect — Typography tokens
* Poppins: titles, display. Figtree: body, UI.
* These two families are non-negotiable per brand guidelines.
*
* The Google Fonts @import previously here has moved to header.php as a
* direct in (paired with preconnect hints
* for fonts.googleapis.com + fonts.gstatic.com). The @import form chained
* three sequential roundtrips (theme css → fonts.googleapis.com css →
* woff2 fetch from fonts.gstatic.com) which delayed first paint by
* ~400-800ms on mobile because from a stylesheet can't be
* preconnected. Direct in lets the browser issue the
* fonts.googleapis.com fetch in parallel with the theme stylesheets.
*/
:root {
--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
/* Sizes (px) */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-5xl: 64px;
/* Line-heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-body: 1.55;
--leading-loose: 1.7;
/* Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
}
/* Type treatments — apply directly as classes */
.pi-kicker {
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-subtle);
}
.pi-display {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
color: var(--color-text);
}
.pi-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1.18; letter-spacing: -0.015em; color: var(--color-text); }
.pi-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.22; letter-spacing: -0.01em; color: var(--color-text); }
.pi-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.28; color: var(--color-text); }
.pi-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.35; color: var(--color-text); }
.pi-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-muted); }
.pi-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.55; color: var(--color-text); }
.pi-small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.pi-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-subtle); }
.pi-label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.pi-stat { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: 1; letter-spacing: -0.02em; color: var(--color-text); }