/**
 * SCBL — Typography (frontend base + utility classes)
 *
 * IMPORTANT: only loaded on the frontend. Variables live in
 * typography-tokens.css (which IS loaded in the editor) so the
 * Gutenberg admin UI keeps its native fonts and sizes.
 */

/* ─── Base ───────────────────────────────────────────────────────────── */
body {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Display utility classes ────────────────────────────────────────── */
.display-1, .display-2, .display-3, .display-4 {
	font-family: var(--font-primary);
	font-weight: var(--fw-extrabold);
	text-transform: uppercase;
	line-height: var(--lh-tight);
}
.display-1 { font-size: var(--fs-display-1); }
.display-2 { font-size: var(--fs-display-2); }
.display-3 { font-size: var(--fs-display-3); }
.display-4 { font-size: var(--fs-display-4); }

/* ─── Headings ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); }

.heading-1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.heading-2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.heading-3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.heading-4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.heading-5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
.heading-6 { font-size: var(--fs-h6); line-height: var(--lh-snug); }

/* ─── Text utility classes ───────────────────────────────────────────── */
.text-r1 { font-size: var(--fs-r1); line-height: var(--lh-snug); }
.text-r2 { font-size: var(--fs-r2); line-height: var(--lh-snug); }
.text-r3 { font-size: var(--fs-r3); line-height: var(--lh-snug); }
.text-r4 { font-size: var(--fs-r4); line-height: var(--lh-snug); }
.text-r5 { font-size: var(--fs-r5); line-height: var(--lh-snug); }

.text-medium   { font-weight: var(--fw-medium); }
.text-semibold { font-weight: var(--fw-semibold); }
.text-bold     { font-weight: var(--fw-extrabold); }

.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-inverse { color: var(--color-text-inverse); }

/* ─── Uppercase ramp ─────────────────────────────────────────────────── */
.uppercase-1, .uppercase-2, .uppercase-3, .uppercase-4, .uppercase-5 {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	line-height: var(--lh-snug);
}
.uppercase-1 { font-size: var(--fs-r1); letter-spacing: var(--ls-uppercase-sm); }
.uppercase-2 { font-size: var(--fs-r2); letter-spacing: var(--ls-uppercase-sm); }
.uppercase-3 { font-size: var(--fs-r3); letter-spacing: var(--ls-uppercase-md); }
.uppercase-4 { font-size: var(--fs-r4); letter-spacing: var(--ls-uppercase-md); }
.uppercase-5 { font-size: var(--fs-r5); letter-spacing: var(--ls-uppercase-lg); }

/* ─── Links (Figtree per Figma M1 hyperlink style) ───────────────────── */
a {
	font-family: var(--font-secondary);
	color: var(--color-link);
	line-height: var(--lh-normal);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}
a:hover { color: var(--color-link-hover); }