/**
 * Typography
 * Overused Grotesk Semibold for headings/labels, Medium for body,
 * Geist Mono for prices, codes and metadata (Style Guide 02, 05, 06).
 */

body {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-md);
	line-height: var(--line-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	line-height: var(--line-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
	text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p,
ul,
ol,
figure,
table {
	margin-bottom: var(--space-4);
}

p {
	line-height: var(--line-relaxed);
}

/* Keep a comfortable measure for prose, not for UI text. */
.entry-content p,
.prose p {
	max-width: 68ch;
}

:where(h1, h2, h3, h4, h5, h6) + p {
	margin-top: var(--space-4);
}

strong,
b {
	font-weight: var(--weight-semibold);
}

small {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

blockquote {
	border-left: var(--border-width-strong) solid var(--color-surface-strong);
	padding-left: var(--space-4);
	color: var(--color-muted);
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/**
 * Display headings — oversized, tight, for hero and campaign type.
 */
.display {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
	line-height: var(--line-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
	text-transform: uppercase;
}

/**
 * Section title — the standard heading for content blocks.
 */
.title {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: var(--text-2xl);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
}

.title--sm { font-size: var(--text-lg); }
.title--lg { font-size: var(--text-3xl); }

/**
 * Page title — CART, CHECKOUT, SHOP ALL.
 */
.page-title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0;
}

/**
 * Eyebrow — uppercase mono label that sits above a heading, and the
 * numbered section labels used throughout the style guide.
 */
.eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-muted);
}

.eyebrow--forest { color: var(--color-heading); }
.eyebrow--clay { color: var(--color-accent); }

/**
 * Label — semibold form/UI label (Style Guide 04 "with label").
 */
.label {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: var(--line-snug);
	color: var(--color-heading);
}

/**
 * Lead paragraph — intro copy under a heading.
 */
.lead {
	font-size: var(--text-lg);
	line-height: var(--line-relaxed);
	color: var(--color-text);
}

/**
 * Body copy helpers.
 */
.body-text { font-size: var(--text-md); }
.body-text--sm { font-size: var(--text-sm); }
.muted-text { color: var(--color-muted); }

/**
 * Mono highlight — product codes, collection names, key metadata.
 */
.mono {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--line-normal);
	letter-spacing: var(--tracking-wide);
}

.mono--upper {
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.mono--sm { font-size: var(--text-2xs); }