/**
 * RF typography.
 *
 * Seven roles from tokens.css: display, heading, body, navigation, caption, price,
 * button (button lives in base.css with the control). Headings map to roles by
 * default; the role classes let markup choose appearance independent of level.
 */

:where(body.rf) :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--type-heading-font);
	font-weight: var(--type-heading-weight);
	line-height: var(--type-heading-leading);
	letter-spacing: var(--type-heading-tracking);
	text-transform: var(--type-heading-case);
	text-wrap: balance;
}

:where(body.rf) :where(h1) { font-size: var(--type-heading-size-lg); }
:where(body.rf) :where(h2) { font-size: var(--type-heading-size); }
:where(body.rf) :where(h3, h4, h5, h6) { font-size: var(--type-heading-size-sm); }

:where(body.rf) :where(p, li, dd) {
	text-wrap: pretty;
}

/* --------------------------------------------------------------- Role classes */
.rf-display {
	font-family: var(--type-display-font);
	font-size: var(--type-display-size);
	font-weight: var(--type-display-weight);
	line-height: var(--type-display-leading);
	letter-spacing: var(--type-display-tracking);
	text-transform: var(--type-display-case);
	text-wrap: balance;
}

.rf-heading-lg,
.rf-heading,
.rf-heading-sm {
	font-family: var(--type-heading-font);
	font-weight: var(--type-heading-weight);
	line-height: var(--type-heading-leading);
	letter-spacing: var(--type-heading-tracking);
	text-transform: var(--type-heading-case);
	text-wrap: balance;
}

.rf-heading-lg { font-size: var(--type-heading-size-lg); }
.rf-heading { font-size: var(--type-heading-size); }
.rf-heading-sm { font-size: var(--type-heading-size-sm); }

.rf-body {
	font-size: var(--type-body-size);
	line-height: var(--type-body-leading);
}

.rf-body-lg {
	font-size: var(--type-body-size-lg);
	line-height: var(--type-body-leading);
}

.rf-nav-text {
	font-family: var(--type-nav-font);
	font-size: var(--type-nav-size);
	font-weight: var(--type-nav-weight);
	line-height: var(--type-nav-leading);
	letter-spacing: var(--type-nav-tracking);
}

.rf-caption {
	font-family: var(--type-caption-font);
	font-size: var(--type-caption-size);
	font-weight: var(--type-caption-weight);
	line-height: var(--type-caption-leading);
	letter-spacing: var(--type-caption-tracking);
}

.rf-price {
	font-family: var(--type-price-font);
	font-size: var(--type-price-size);
	font-weight: var(--type-price-weight);
	line-height: var(--type-price-leading);
	letter-spacing: var(--type-price-tracking);
	font-variant-numeric: var(--type-price-numerals);
}

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

/* ------------------------------------------------------------ Vertical rhythm */
/* .rf-flow spaces direct children evenly; override per container with --flow-space. */
.rf-flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

/* Long-form text (policies, about, journal): readable measure, links always underlined. */
.rf-prose {
	max-width: var(--layout-text);
	font-size: var(--type-body-size-lg);
	--flow-space: 1.25em;
}

.rf-prose > * + * {
	margin-block-start: var(--flow-space);
}

.rf-prose :where(h2, h3) {
	--flow-space: 2em;
}

.rf-prose a {
	text-decoration-line: underline;
}

.rf-prose a:hover {
	opacity: 0.6;
}