/* Exclude .wp-admin so Design System fonts stay off Gutenberg chrome.
   The canvas iframe body is not .wp-admin, so the preview still uses theme type. */
body:not(.wp-admin) {
	color: var(--color-dark);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: 1.6;
}

body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6,
.heading {
	color: var(--text-heading, var(--color-dark));
	font-family: var(--font-family-heading);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.4;
	margin-block: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * Hyphenate only long words, using the language on <html> (WordPress sets it).
 * Short labels stay intact. overflow-wrap is the fallback when a browser will
 * not hyphenate uppercase text, or a string has no syllable break.
 */
body:not(.wp-admin) :is(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.heading,
	.type-heading
) {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 3;
	max-inline-size: 100%;
	min-inline-size: 0;
	overflow-wrap: break-word;
}

body:not(.wp-admin) :is(
	p,
	li,
	figcaption,
	dd,
	dt,
	.type-body,
	.prose
) {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 14 6 5;
	overflow-wrap: break-word;
}

.heading--xl {
	font-size: var(--font-size-heading-xl);
}

.eyebrow {
	color: var(--text-accent, var(--color-dark));
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-block: 0;
	text-transform: uppercase;
}

.type-eyebrow {
	font-size: var(--type-size-eyebrow-small);
}

.type-eyebrow[data-type-size="medium"] {
	font-size: var(--type-size-eyebrow-medium);
}

.type-eyebrow[data-type-size="large"] {
	font-size: var(--type-size-eyebrow-large);
}

.type-heading {
	font-size: var(--type-size-heading-xxl);
}

.type-heading[data-type-size="xs"] {
	font-size: var(--type-size-heading-xs);
}

.type-heading[data-type-size="small"] {
	font-size: var(--type-size-heading-small);
}

.type-heading[data-type-size="medium"] {
	font-size: var(--type-size-heading-medium);
}

.type-heading[data-type-size="large"] {
	font-size: var(--type-size-heading-large);
}

.type-heading[data-type-size="xl"] {
	font-size: var(--type-size-heading-xl);
}

.type-body {
	font-size: var(--type-size-body-large);
}

.type-body[data-type-size="xs"] {
	font-size: var(--type-size-body-xs);
}

.type-body[data-type-size="small"] {
	font-size: var(--type-size-body-small);
}

.type-body[data-type-size="medium"] {
	font-size: var(--type-size-body-medium);
}

.type-body[data-type-size="xl"] {
	font-size: var(--type-size-body-xl);
}

body:not(.wp-admin) a {
	color: var(--link-color, var(--color-dark));
	overflow-wrap: anywhere;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

/* Emails wrap at @ and dots. anywhere would still cut through the domain. */
body:not(.wp-admin) a[href^="mailto:"] {
	overflow-wrap: break-word;
}

body:not(.wp-admin) a:hover {
	color: var(--link-hover-color, var(--color-dark));
}

.prose > * {
	margin-block: 0 1.25em;
}

.prose > :last-child {
	margin-block-end: 0;
}