/* Kopie van shared/ontwerp/css/tokens.css, versie 1.2.0: niet hier wijzigen (python3 shared/ontwerp/bin/kopieer.py kladblok). */
/*
 * Ontwerptokens: de enige plek met kleuren, lettergroottes, afstanden, hoeken en schaduwen.
 * De componenten en de rest van de opmaak gebruiken alleen deze variabelen. De contrasten van de
 * paren in ../contrast.json worden getest (tekst 4,5:1, randen en focus 3:1).
 *
 * Een nuance (../nuances/<app>.json, "tokens") mag alleen deze tokens overschrijven, nooit tekst-
 * of statuskleuren:
 * overschrijfbaar: --kleur-accent --kleur-accent-hover --kleur-accent-zacht --kleur-focus --kleur-zijbalk --kleur-zijbalk-actief --kleur-zijbalk-markering --kleur-focus-donker
 */

/* Volgorde van de lagen: eigen css van een app zonder laag wint altijd van de basis. */
@layer ontwerp.basis, ontwerp.schil, ontwerp.componenten;

:root {
	color-scheme: light;

	/* Basiskleuren */
	--kleur-achtergrond: #f2f1f9; /* lavendelgrijs */
	--kleur-vlak: #ffffff; /* kaarten, tabellen, bovenbalk */
	--kleur-vlak-zacht: #f7f6fc; /* tabelkop, hover */
	--kleur-tekst: #1b1c33;
	--kleur-tekst-zacht: #585b78;
	--kleur-rand: #e2e0ef;
	--kleur-rand-sterk: #7c7e9c; /* invoervelden, secundaire knop: zichtbare grens (3:1) */

	/* Accent (violet) */
	--kleur-accent: #5b3fd0;
	--kleur-accent-hover: #4a30b5;
	--kleur-accent-tekst: #ffffff; /* tekst op accent */
	--kleur-accent-zacht: #eeeafc;
	--kleur-focus: #5b3fd0;

	/* Zijbalk (donker marineblauw) */
	--kleur-zijbalk: #171a36;
	--kleur-zijbalk-tekst: #c5c8e4;
	--kleur-zijbalk-actief: #2c3061;
	--kleur-zijbalk-actief-tekst: #ffffff;
	--kleur-zijbalk-markering: #a996ff; /* streep naast het actieve item */
	--kleur-focus-donker: #c9bcff;
	--kleur-lade-achtergrond: rgb(23 26 54 / 0.45); /* achter de open lade op de gsm */

	/* Statuskleuren: tekst + zacht vlak; altijd samen met een woord, nooit kleur alleen */
	--status-groen-tekst: #12643a;
	--status-groen-vlak: #e2f4e9;
	--status-amber-tekst: #7e4a00;
	--status-amber-vlak: #fcefd2;
	--status-rood-tekst: #ad1f28;
	--status-rood-vlak: #fde5e6;
	--status-violet-tekst: #5b3fd0;
	--status-violet-vlak: #eeeafc;
	--status-grijs-tekst: #4a4c63;
	--status-grijs-vlak: #ebebf2;
	--kleur-afwijkend: #ad1f28; /* bv. een vervallen datum in een tabel */

	/* Zakelijk en privé: altijd met label (zie Domeinlabel.svelte) */
	--domein-zakelijk-tekst: #1d4f91;
	--domein-zakelijk-vlak: #e3edfb;
	--domein-zakelijk-streep: #2f6fd0;
	--domein-prive-tekst: #8a2a63;
	--domein-prive-vlak: #fbe6f2;
	--domein-prive-streep: #c2408f;

	/* Lettertypes: alleen systeemlettertypes, niets van buiten */
	--font-tekst: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* Lettergroottes */
	--tekst-xs: 0.75rem;
	--tekst-sm: 0.875rem;
	--tekst-md: 1rem;
	--tekst-lg: 1.125rem;
	--tekst-xl: 1.5rem;
	--tekst-2xl: 2rem;
	--gewicht-normaal: 400;
	--gewicht-half: 600;
	--gewicht-vet: 700;
	--regelhoogte: 1.45;

	/* Afstanden */
	--ruimte-1: 0.25rem;
	--ruimte-2: 0.5rem;
	--ruimte-3: 0.75rem;
	--ruimte-4: 1rem;
	--ruimte-5: 1.5rem;
	--ruimte-6: 2rem;
	--ruimte-7: 3rem;

	/* Afgeronde hoeken */
	--hoek-klein: 6px;
	--hoek: 10px;
	--hoek-groot: 14px;
	--hoek-pil: 999px;

	/* Schaduwen */
	--schaduw-kaart: 0 1px 2px rgb(23 26 54 / 0.06), 0 4px 14px rgb(23 26 54 / 0.05);
	--schaduw-zwevend: 0 6px 24px rgb(23 26 54 / 0.14);

	/* Maten van de schil */
	--zijbalk-breedte: 15rem;
	--bovenbalk-hoogte: 3.75rem;
	--inhoud-max: 80rem;
	--lade-breedte: min(18rem, 85vw);
	--zijbalk-smal: 4rem; /* profiel editor: de ingeklapte zijbalk, alleen pictogrammen (64 px) */
	--bovenbalk-hoogte-editor: 3rem; /* profiel editor: compacter, plaats voor de werkbalk (48 px) */
	--tabbalk-hoogte: 3.5rem; /* profiel gsm: de tabbalk onderaan (56 px, doelen van 44 px) */

	/* Klikdoelen: minstens 24 px, de hoofdactie (en de menuknop op de gsm) 44 px */
	--doel-min: 24px;
	--doel-hoofd: 44px;
}