/*
 * Typography system. Loaded after site.css on the front end and in the block editor.
 *
 *   Display  Bricolage Grotesque 500   headings and big numbers
 *   Body     Figtree 400 / 500         paragraphs, buttons, UI text
 *   Label    DM Mono 400               eyebrows, meta, small caps labels
 *   Accent   Instrument Serif 400      italic accent words, wordmark, wallet card name
 *
 * Only weights 400 and 500 are used, so the browser never fakes a bold.
 * The --font-geist-* names are legacy: site.css still references them.
 */
:root {
	--font-geist-sans: "Figtree";
	--font-geist-mono: "DM Mono";
	--font-instrument-serif: "Instrument Serif";
	--font-display: "Bricolage Grotesque";
}

h1,
h2 {
	letter-spacing: -0.02em;
}

/* Display: every heading and every big number. */
h1,
h2,
h3,
h4,
h5,
h6,
.push-copy h2,
.value h4,
.legal-content h2,
.post h3,
.price .num,
.portal-stat strong,
.hero-proof strong,
.phone-clock,
.pass-reward strong,
.logo-chip,
.avatar,
.tmeta .avatar,
.bio-photo {
	font-family: var(--font-display), var(--font-geist-sans), sans-serif;
	font-weight: 500;
}

.push-copy h2 {
	letter-spacing: -0.02em;
}

/* Accent: italic serif for emphasised words inside headings, never bold. */
h1 em,
h2 em,
h3 em,
h4 em {
	font-family: var(--font-instrument-serif), serif;
	font-style: italic;
	font-weight: 400;
}

/* Serif is only ever regular weight: the font has no bold to draw from. */
.pass-title,
.push-app-icon {
	font-weight: 400;
}

/* Body UI: no 600/700 anywhere, so emphasis is always the 500 step. */
.phone > .phone-time,
.push-title {
	font-weight: 500;
}

.tquote {
	font-family: var(--font-geist-sans), sans-serif;
	font-weight: 400;
}

.phone-header .title {
	font-family: var(--font-geist-sans), sans-serif;
	font-weight: 500;
}