/*
 * Element defaults drawn from theme.css tokens. Opt-in per site (load after theme.css): legacy pages that style
 * everything themselves should not load it, because it sets the page background, text colour and font.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	line-height: 1.5;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

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

::selection {
	background: var(--accent-soft);
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
}

img,
video,
canvas,
svg {
	max-width: 100%;
}

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