*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.deep-core {
	margin: 0;
	color: var(--deep-color-text);
	background: var(--deep-color-background);
	font-family: var(--deep-font-body);
	font-size: var(--deep-font-base-size);
	line-height: var(--deep-line-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.deep-core :where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 0.6em;
	color: var(--deep-color-text);
	font-family: var(--deep-font-heading);
	font-weight: 700;
	line-height: var(--deep-line-tight);
	text-wrap: balance;
}

.deep-core :where(h1) { font-size: var(--deep-text-3xl); }
.deep-core :where(h2) { font-size: var(--deep-text-2xl); }
.deep-core :where(h3) { font-size: var(--deep-text-xl); }
.deep-core :where(h4) { font-size: var(--deep-text-lg); }

.deep-core :where(p, ul, ol, dl, blockquote, pre, table) {
	margin-block: 0 1.25em;
}

.deep-core :where(a) {
	color: var(--deep-color-primary);
	text-decoration-thickness: .08em;
	text-underline-offset: .16em;
}

.deep-core :where(a:hover) {
	text-decoration-thickness: .12em;
}

.deep-core :where(img, svg, video, canvas) {
	max-width: 100%;
	height: auto;
}

.deep-core :where(hr) {
	border: 0;
	border-top: 1px solid var(--deep-color-border);
	margin-block: var(--deep-space-xl);
}

.deep-core :where(::selection) {
	background: color-mix(in srgb, var(--deep-color-primary) 22%, transparent);
}

.deep-core :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--deep-color-primary) 42%, transparent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.deep-core *,
	.deep-core *::before,
	.deep-core *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}