/* 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;
}

.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));
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

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;
}