/**
 * Universal frontend foundations. Component styling lives in separate files.
 */

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

body {
	background: var(--oz-color-background);
	color: var(--oz-color-text);
	font-family: var(--oz-font-family-body);
	overflow-wrap: break-word;
}

::selection {
	background: var(--oz-color-accent);
	color: var(--oz-color-on-accent);
}

:where(a) {
	color: var(--oz-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

:where(a:hover) {
	color: var(--oz-color-link-hover);
}

img,
picture,
video,
canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

svg:not([width]) {
	max-width: 100%;
}

iframe {
	max-width: 100%;
}

:focus-visible {
	box-shadow: var(--oz-focus-ring);
	outline: 2px solid var(--oz-color-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	/* Accessibility override: user preference takes precedence over components. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}