/*
 * Designtokens dehuisgids.nl - richting Bouwtekening
 *
 * GEGENEREERD DOOR build/maak-tokens.py. Niet met de hand aanpassen: pas het
 * recept in dat script aan en draai het opnieuw, anders drijven de kleuren
 * weer uit elkaar.
 *
 * Het idee: een site die leest als een goede bouwtekening. Bijna-zwarte inkt
 * op wit, een diep bouwtekeningblauw dat de dragende kleur is, en oker als
 * enige luide kleur - die wijst altijd naar iets wat je kunt doen. Rechte
 * hoeken, haarlijnen, geen schaduwen behalve op wat echt boven de pagina
 * zweeft.
 *
 * De achttien onderwerpkleuren staan allemaal op lichtheid 0.480 en
 * verzadiging 0.110 in OKLCH en verschillen alleen in tint. Daardoor zijn het
 * achttien leden van één familie in plaats van achttien losse kleuren.
 */

:root {
	--inkt: #13181d;
	--inkt-zacht: #555a5f;
	--inkt-licht: #7e8287;
	--papier: #ffffff;
	--papier-2: #f2f5f8;
	--papier-3: #e8ecf0;
	--kaart: #ffffff;
	--lijn: #d9dde0;
	--lijn-sterk: #b6bbc1;
	--primair: #204b6d;
	--primair-donker: #0f304a;
	--primair-zacht: #e6f2fd;
	--accent: #d69718;
	--accent-zacht: #ffeccb;
	--accent-diep: #704500;
	--goed: #2c6d3e;
	--goed-zacht: #e4f6e6;
	--let-op: #ab3a31;
	--let-op-zacht: #ffe9e5;

	/* Achttien vakgebieden: gelijke lichtheid, gelijke verzadiging, eigen tint */
	--warmrood:   #92413d;   --warmrood-zacht: #f8efee;   --warmrood-rand: #f3c9c4;
	--klei:       #904527;   --klei-zacht: #f7efec;   --klei-rand: #f1cbbc;
	--noot:       #8c4a11;   --noot-zacht: #f7efeb;   --noot-rand: #eecdb7;
	--perzik:     #825100;   --perzik-zacht: #f6f0ea;   --perzik-rand: #e9cfb3;
	--okergoud:   #795702;   --okergoud-zacht: #f4f1ea;   --okergoud-rand: #e4d2b1;
	--zongeel:    #6d5d03;   --zongeel-zacht: #f3f1ea;   --zongeel-rand: #dcd5b2;
	--mosgroen:   #4f6815;   --mosgroen-zacht: #eff2eb;   --mosgroen-rand: #cddab8;
	--blad:       #2f6d34;   --blad-zacht: #edf3ed;   --blad-rand: #c1ddc1;
	--accugroen:  #027048;   --accugroen-zacht: #ecf3ef;   --accugroen-rand: #badfca;
	--zeegroen:   #016d5e;   --zeegroen-zacht: #eaf3f1;   --zeegroen-rand: #b3dfd4;
	--turkoois:   #006c6c;   --turkoois-zacht: #eaf3f3;   --turkoois-rand: #b0dfde;
	--staalblauw: #036884;   --staalblauw-zacht: #eaf3f6;   --staalblauw-rand: #b3dcec;
	--hemelblauw: #1f6198;   --hemelblauw-zacht: #ecf2f8;   --hemelblauw-rand: #bcd8f3;
	--leisteen:   #3f5b9b;   --leisteen-zacht: #eef1f8;   --leisteen-rand: #c5d4f5;
	--lavendel:   #5b5298;   --lavendel-zacht: #f0f0f8;   --lavendel-rand: #d2d0f3;
	--pruim:      #6f4b8d;   --pruim-zacht: #f3eff6;   --pruim-rand: #ddcced;
	--framboos:   #7f447b;   --framboos-zacht: #f5eff4;   --framboos-rand: #e7c9e4;
	--koraal:     #8a4066;   --koraal-zacht: #f7eef2;   --koraal-rand: #eec8d9;

	/* Actieve onderwerpkleur; wordt per pagina gezet op [data-kleur] */
	--cluster: var(--primair);
	--cluster-zacht: var(--primair-zacht);
	--cluster-rand: var(--primair-rand);

	/* Letters. Space Grotesk voor koppen en labels: strak en technisch, met
	   een eigen g en a. IBM Plex Sans voor lopende tekst: getekend voor
	   cijfers en tabellen, en dat is waar deze site vol mee staat. */
	--kop: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tekst: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: 0.78rem;
	--t-s: 0.875rem;
	--t-m: 1rem;
	--t-l: 1.125rem;
	--t-xl: 1.375rem;
	--t-2xl: 1.75rem;
	--t-3xl: 2.25rem;
	--t-4xl: 3.25rem;

	/* Ritme */
	--r-1: 0.25rem;
	--r-2: 0.5rem;
	--r-3: 0.75rem;
	--r-4: 1rem;
	--r-5: 1.5rem;
	--r-6: 2rem;
	--r-7: 3rem;
	--r-8: 4.5rem;

	/* Vorm: een bouwtekening heeft geen afgeronde hoeken. Alleen wat echt een
	   knop is krijgt een minieme ronding, zodat het aanraakbaar oogt. */
	--rond-s: 0;
	--rond-m: 0;
	--rond-l: 0;
	--rond-xl: 0;

	/* Alleen wat boven de pagina zweeft krijgt schaduw. De rest doet het met
	   haarlijnen; dat is wat een tekening ook doet. */
	--schaduw-s: 0 1px 2px rgb(12 18 26 / 0.06);
	--schaduw-m: 0 2px 4px rgb(12 18 26 / 0.07), 0 8px 20px rgb(12 18 26 / 0.06);
	--schaduw-l: 0 4px 8px rgb(12 18 26 / 0.08), 0 20px 48px rgb(12 18 26 / 0.14);

	--breedte: 1220px;
	--breedte-tekst: 68ch;

	--soepel: 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Onderwerpkleur toewijzen. Elk onderdeel met [data-kleur] zet de drie
   variabelen die alle kinderen gebruiken, zodat een register, een kruimelpad
   en een rekenhulp vanzelf de goede tint krijgen. */
[data-kleur="warmrood"]   { --cluster: var(--warmrood);   --cluster-zacht: var(--warmrood-zacht); --cluster-rand: var(--warmrood-rand); }
[data-kleur="klei"]       { --cluster: var(--klei);       --cluster-zacht: var(--klei-zacht); --cluster-rand: var(--klei-rand); }
[data-kleur="noot"]       { --cluster: var(--noot);       --cluster-zacht: var(--noot-zacht); --cluster-rand: var(--noot-rand); }
[data-kleur="perzik"]     { --cluster: var(--perzik);     --cluster-zacht: var(--perzik-zacht); --cluster-rand: var(--perzik-rand); }
[data-kleur="okergoud"]   { --cluster: var(--okergoud);   --cluster-zacht: var(--okergoud-zacht); --cluster-rand: var(--okergoud-rand); }
[data-kleur="zongeel"]    { --cluster: var(--zongeel);    --cluster-zacht: var(--zongeel-zacht); --cluster-rand: var(--zongeel-rand); }
[data-kleur="mosgroen"]   { --cluster: var(--mosgroen);   --cluster-zacht: var(--mosgroen-zacht); --cluster-rand: var(--mosgroen-rand); }
[data-kleur="blad"]       { --cluster: var(--blad);       --cluster-zacht: var(--blad-zacht); --cluster-rand: var(--blad-rand); }
[data-kleur="accugroen"]  { --cluster: var(--accugroen);  --cluster-zacht: var(--accugroen-zacht); --cluster-rand: var(--accugroen-rand); }
[data-kleur="zeegroen"]   { --cluster: var(--zeegroen);   --cluster-zacht: var(--zeegroen-zacht); --cluster-rand: var(--zeegroen-rand); }
[data-kleur="turkoois"]   { --cluster: var(--turkoois);   --cluster-zacht: var(--turkoois-zacht); --cluster-rand: var(--turkoois-rand); }
[data-kleur="staalblauw"] { --cluster: var(--staalblauw); --cluster-zacht: var(--staalblauw-zacht); --cluster-rand: var(--staalblauw-rand); }
[data-kleur="hemelblauw"] { --cluster: var(--hemelblauw); --cluster-zacht: var(--hemelblauw-zacht); --cluster-rand: var(--hemelblauw-rand); }
[data-kleur="leisteen"]   { --cluster: var(--leisteen);   --cluster-zacht: var(--leisteen-zacht); --cluster-rand: var(--leisteen-rand); }
[data-kleur="lavendel"]   { --cluster: var(--lavendel);   --cluster-zacht: var(--lavendel-zacht); --cluster-rand: var(--lavendel-rand); }
[data-kleur="pruim"]      { --cluster: var(--pruim);      --cluster-zacht: var(--pruim-zacht); --cluster-rand: var(--pruim-rand); }
[data-kleur="framboos"]   { --cluster: var(--framboos);   --cluster-zacht: var(--framboos-zacht); --cluster-rand: var(--framboos-rand); }
[data-kleur="koraal"]     { --cluster: var(--koraal);     --cluster-zacht: var(--koraal-zacht); --cluster-rand: var(--koraal-rand); }
[data-kleur="primair"]    { --cluster: var(--primair);    --cluster-zacht: var(--primair-zacht); --cluster-rand: var(--primair-rand); }

/* Donkere modus: hetzelfde recept, andere lichtheden. */
@media (prefers-color-scheme: dark) {
	:root {
		--inkt: #e4e8ed;
		--inkt-zacht: #a0a5ab;
		--inkt-licht: #767b80;
		--papier: #0c1014;
		--papier-2: #13181c;
		--papier-3: #1d2227;
		--kaart: #13181c;
		--lijn: #292e34;
		--lijn-sterk: #42484f;
		--primair: #79b1e0;
		--primair-donker: #a5d0f6;
		--primair-zacht: #162430;
		--accent: #e8ab3e;
		--accent-zacht: #302308;
		--accent-diep: #fcc687;
		--goed: #85c291;
		--goed-zacht: #162519;
		--let-op: #f2897c;
		--let-op-zacht: #331b18;

		--warmrood:   #ec968f;   --warmrood-zacht: #2c1816;   --warmrood-rand: #523431;
		--klei:       #ea9b7c;   --klei-zacht: #2b1912;   --klei-rand: #51352a;
		--noot:       #e59f6f;   --noot-zacht: #2a1a0f;   --noot-rand: #503726;
		--perzik:     #dca564;   --perzik-zacht: #281b0d;   --perzik-rand: #4c3922;
		--okergoud:   #d2ab5f;   --okergoud-zacht: #261d0b;   --okergoud-rand: #493b21;
		--zongeel:    #c3b260;   --zongeel-zacht: #221e0c;   --zongeel-rand: #433d21;
		--mosgroen:   #a2bd71;   --mosgroen-zacht: #1b2110;   --mosgroen-rand: #384127;
		--blad:       #86c387;   --blad-zacht: #142215;   --blad-rand: #2e432e;
		--accugroen:  #71c69a;   --accugroen-zacht: #102319;   --accugroen-rand: #274435;
		--zeegroen:   #5bc7b1;   --zeegroen-zacht: #0b231e;   --zeegroen-rand: #20453d;
		--turkoois:   #4fc6c6;   --turkoois-zacht: #082323;   --turkoois-rand: #1c4544;
		--staalblauw: #5dbfe3;   --staalblauw-zacht: #0b2129;   --staalblauw-rand: #21424f;
		--hemelblauw: #7ab7f1;   --hemelblauw-zacht: #111f2d;   --hemelblauw-rand: #2a3f54;
		--leisteen:   #90b0f4;   --leisteen-zacht: #171e2d;   --leisteen-rand: #313d55;
		--lavendel:   #aea6f0;   --lavendel-zacht: #1d1c2c;   --lavendel-rand: #3c3954;
		--pruim:      #c49fe5;   --pruim-zacht: #221a2a;   --pruim-rand: #44374f;
		--framboos:   #d799d1;   --framboos-zacht: #271825;   --framboos-rand: #4b3448;
		--koraal:     #e495ba;   --koraal-zacht: #2a1820;   --koraal-rand: #4f3340;

		--schaduw-s: 0 1px 2px rgb(0 0 0 / 0.5);
		--schaduw-m: 0 6px 18px rgb(0 0 0 / 0.55);
		--schaduw-l: 0 16px 44px rgb(0 0 0 / 0.65);
	}
}