/* base: what the Floor already decided */

html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-rule-2) var(--color-paper-2); accent-color: var(--color-accent); }
body {
	background: var(--color-paper);
	color: var(--color-ink-2);
	font-variant-numeric: oldstyle-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	min-width: 0;
	text-wrap: balance;
	font-style: normal;
}
p { text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; }

table, .num, .price, .amount { font-variant-numeric: lining-nums tabular-nums; }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	transition: none;
}

::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); }

.screen-reader-text:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

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