/* Kopie van shared/ontwerp/css/basis.css, versie 1.2.0: niet hier wijzigen (python3 shared/ontwerp/bin/kopieer.py kladblok). */
/*
 * Basisopmaak voor de hele pagina, op de tokens (tokens.css eerst laden). Bewust klein: lettertype,
 * achtergrond, links, een duidelijke focusrand voor het toetsenbord, een klasse voor tekst die
 * alleen schermlezers horen en de doelgroottes (sinds 1.1.0): elk klikdoel minstens 24 px
 * (--doel-min), de hoofdactie (data-hoofdactie, hoogstens één per pagina) 44 px (--doel-hoofd).
 * In de laag ontwerp.basis en met :where() (geen gewicht): eigen css van een app wint altijd.
 */
@layer ontwerp.basis {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		font-family: var(--font-tekst);
		font-size: var(--tekst-md);
		line-height: var(--regelhoogte);
		background: var(--kleur-achtergrond);
		color: var(--kleur-tekst);
	}
	a {
		color: var(--kleur-accent);
	}
	:focus-visible {
		outline: 3px solid var(--kleur-focus);
		outline-offset: 2px;
	}
	/* Doelgroottes: knoppen en velden minstens 24 × 24 px; een vinkje of keuzerondje telt samen met zijn label. */
	:where(button, select, textarea, input:not([type='checkbox'], [type='radio'], [type='hidden'])) {
		min-height: var(--doel-min);
	}
	:where(button) {
		min-width: var(--doel-min);
	}
	:where([data-hoofdactie]) {
		min-width: var(--doel-hoofd);
		min-height: var(--doel-hoofd);
	}
	.verborgen {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	@media (prefers-reduced-motion: reduce) {
		* {
			transition: none !important;
		}
	}
}