/**
 * NPHI base layer: body text, heading hierarchy, links.
 *
 * Depends on tokens.css. Applies to theme markup via .nphi scope-friendly
 * element selectors; block content inherits through body.
 */

body {
	background-color: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
}

/* Heading hierarchy: display sans, tight leading, ink color. */
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: var(--leading-tight);
	color: var(--color-ink);
	margin-top: 0;
	margin-bottom: var(--space-3);
	text-wrap: balance;
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--text-4xl);
}

h2 {
	font-size: var(--text-3xl);
}

h3 {
	font-size: var(--text-2xl);
}

h4 {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	font-weight: 700;
}

h5,
h6 {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	font-weight: 700;
}

h6 {
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--text-sm);
}

/* Body text: comfortable measure for long-form public-health content. */
p {
	margin-top: 0;
	margin-bottom: var(--space-4);
	max-width: var(--measure);
}

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

/* Section eyebrow: the single sanctioned use of the accent color. */
.nphi-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

/* Links: always identifiable, never bare color alone. */
a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-primary-deep);
}

a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}