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

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block: var(--dsf-space-5);
}

body {
	margin: 0;
	background: var(--dsf-color-background);
	color: var(--dsf-color-text);
	font-family: var(--dsf-font-body);
	font-size: var(--dsf-text-body);
	line-height: 1.65;
	overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure) {
	margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--dsf-color-primary);
	font-family: var(--dsf-font-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

h1 { font-size: var(--dsf-text-h1); }
h2 { font-size: var(--dsf-text-h2); }
h3 { font-size: var(--dsf-text-h3); }
h4 { font-size: var(--dsf-text-lead); }
:where(h5, h6) { font-size: var(--dsf-text-body); }

a {
	color: var(--dsf-color-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition: color var(--dsf-duration-fast) var(--dsf-ease);
}

a:hover { color: var(--dsf-color-accent-hover); }

:where(img, video, canvas, svg) {
	display: block;
	max-inline-size: 100%;
}

:where(img, video) { block-size: auto; }
iframe { max-inline-size: 100%; }
[hidden] { display: none !important; }

:where(button, input, select, textarea) {
	max-inline-size: 100%;
	color: inherit;
	font: inherit;
	caret-color: var(--dsf-color-accent);
}

:where(button, select, input[type="checkbox"], input[type="radio"]) {
	cursor: pointer;
}

:where(input, select, textarea) {
	accent-color: var(--dsf-color-accent);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) {
	min-block-size: 2.75rem;
	padding: var(--dsf-space-3) var(--dsf-space-4);
	border: 1px solid var(--dsf-color-control-border);
	border-radius: var(--dsf-radius-small);
	background: var(--dsf-color-surface);
	line-height: 1.5;
}

textarea {
	inline-size: 100%;
	min-block-size: 8rem;
	resize: vertical;
}

::placeholder {
	color: var(--dsf-color-muted);
	opacity: 1;
}

[aria-invalid="true"] { border-color: var(--dsf-color-error); }

::selection {
	background: var(--dsf-color-primary);
	color: var(--dsf-color-surface);
}

:focus-visible {
	outline: 3px solid var(--dsf-color-accent);
	outline-offset: 3px;
}

/* Two colors preserve the focus indicator on both navy and light surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	box-shadow: 0 0 0 3px var(--dsf-color-surface);
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 100000;
	inset-block-start: var(--dsf-space-4);
	inset-inline-start: var(--dsf-space-4);
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: var(--dsf-space-3) var(--dsf-space-5);
	clip-path: none;
	background: var(--dsf-color-surface);
	color: var(--dsf-color-primary);
	border-radius: var(--dsf-radius-small);
	box-shadow: var(--dsf-shadow-raised);
}

body.admin-bar .skip-link:focus { inset-block-start: 3.75rem; }

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

@media (forced-colors: active) {
	:focus-visible { outline-color: Highlight; }
}