/**
 * Typography hierarchy — element and utility classes.
 *
 * @package Fashion_Brand_Theme
 */

body {
	font: var(--font-body);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text);
	background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--space-4);
	color: var(--color-text);
}

h1 {
	font: var(--font-h1);
	letter-spacing: var(--letter-spacing-heading);
}

h2 {
	font: var(--font-h2);
	letter-spacing: var(--letter-spacing-heading);
}

h3 {
	font: var(--font-h3);
}

p {
	margin-block: 0 var(--space-4);
}

small,
.text-small {
	font: var(--font-small);
	color: var(--color-text-muted);
}

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

label,
.text-label {
	font: var(--font-label);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.text-display {
	font: var(--font-display);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text);
}

.text-display-xl {
	font: var(--font-display-xl);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text);
}

.text-chapter {
	font: var(--font-chapter);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text-subtle);
}

.text-statement {
	font: var(--font-statement);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text);
}

.text-body {
	font: var(--font-body);
}

.text-body-lg {
	font: var(--font-body-lg);
}

.text-nav,
nav a {
	font: var(--font-nav);
	letter-spacing: var(--letter-spacing-nav);
}

.text-button {
	font: var(--font-button);
	letter-spacing: var(--letter-spacing-button);
}

.text-price,
.price {
	font: var(--font-price);
	color: var(--color-text);
}

.text-product,
.product-name {
	font: var(--font-product);
	color: var(--color-text);
}

.entry-title,
.page-title {
	margin-top: 0;
}

.page-header {
	margin-bottom: var(--space-lg);
}

.pagination {
	margin-top: var(--space-lg);
}

/* Narrow viewports — prevent display overflow */
@media (max-width: 22.5rem) {
	:root {
		--font-size-display-xl: clamp(2.25rem, 11vw, 2.75rem);
		--font-size-display: clamp(1.875rem, 9vw, 2.25rem);
		--font-size-chapter: clamp(2.75rem, 18vw, 3.5rem);
	}
}