/*
 * Designtokens diy-gids.nl
 *
 * Werkplaats en blauwdruk: helder wit met koelgrijs, diepe inkt en een
 * technische blauwe hoofdkleur. De clusterkleuren zijn afgeleid van materiaal
 * (koper, baksteen, staal, eiken, beton) en bewust ontzadigd. Ze zijn accent,
 * geen behang: gekleurde randen, iconen en koppen op een neutrale ondergrond.
 */

:root {
	/* Basis: wit en koelgrijs, geen warme tinten */
	--inkt: #0f1419;
	--inkt-zacht: #4c5560;
	--inkt-licht: #77818d;
	--papier: #ffffff;
	--papier-2: #f4f6f8;
	--papier-3: #e9edf1;
	--lijn: #dfe4ea;
	--lijn-sterk: #c4ccd6;

	/* Merk */
	--primair: #14458f;
	--primair-donker: #0e3370;
	--primair-zacht: #eaf0f9;
	--accent: #d4600f;
	--accent-zacht: #fbeee3;
	--goed: #10795c;
	--goed-zacht: #e6f2ee;
	--let-op: #b8341f;
	--let-op-zacht: #fbeae7;

	/* Clusterkleuren: materiaaltinten, diep en ontzadigd */
	--amber: #b8801c;         --amber-zacht: #f8f1e2;
	--vuurrood: #b4432e;      --vuurrood-zacht: #f9eae6;
	--waterblauw: #2a6f97;    --waterblauw-zacht: #e9f0f5;
	--aqua: #1f7a72;          --aqua-zacht: #e6f2f1;
	--zand: #8a7358;          --zand-zacht: #f4f1ec;
	--kobalt: #3b4b9a;        --kobalt-zacht: #ecedf7;
	--leisteen: #4f5f73;      --leisteen-zacht: #edf0f3;
	--eiken: #8b5e3c;         --eiken-zacht: #f5efe9;
	--dakpan: #9c4526;        --dakpan-zacht: #f7ebe6;
	--hemel: #35708f;         --hemel-zacht: #eaf1f5;
	--mos: #55702f;           --mos-zacht: #eff2e8;
	--beton: #64707c;         --beton-zacht: #eff1f3;
	--noot: #7a5535;          --noot-zacht: #f3eee9;
	--blad: #3d6b45;          --blad-zacht: #eaf1eb;
	--staal: #44586b;         --staal-zacht: #ecf0f3;
	--pruim: #63467f;         --pruim-zacht: #f0ecf4;

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

	/* Typografie */
	--kop: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tekst: "Inter", 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: 3rem;

	/* 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: strak, niet rond en speelgoedachtig */
	--rond-s: 4px;
	--rond-m: 6px;
	--rond-l: 10px;
	--rond-xl: 14px;

	--schaduw-s: 0 1px 2px rgb(15 20 25 / 0.05), 0 1px 3px rgb(15 20 25 / 0.04);
	--schaduw-m: 0 1px 3px rgb(15 20 25 / 0.06), 0 6px 16px rgb(15 20 25 / 0.07);
	--schaduw-l: 0 2px 6px rgb(15 20 25 / 0.06), 0 16px 40px rgb(15 20 25 / 0.11);

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

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

/* Clusterkleur toewijzen. Elke component met [data-kleur] zet de twee
   variabelen die alle kinderen gebruiken, zodat een tegel, een kruimelpad en
   een tool automatisch de juiste tint krijgen. */
[data-kleur="amber"]      { --cluster: var(--amber);      --cluster-zacht: var(--amber-zacht); }
[data-kleur="vuurrood"]   { --cluster: var(--vuurrood);   --cluster-zacht: var(--vuurrood-zacht); }
[data-kleur="waterblauw"] { --cluster: var(--waterblauw); --cluster-zacht: var(--waterblauw-zacht); }
[data-kleur="aqua"]       { --cluster: var(--aqua);       --cluster-zacht: var(--aqua-zacht); }
[data-kleur="zand"]       { --cluster: var(--zand);       --cluster-zacht: var(--zand-zacht); }
[data-kleur="kobalt"]     { --cluster: var(--kobalt);     --cluster-zacht: var(--kobalt-zacht); }
[data-kleur="leisteen"]   { --cluster: var(--leisteen);   --cluster-zacht: var(--leisteen-zacht); }
[data-kleur="eiken"]      { --cluster: var(--eiken);      --cluster-zacht: var(--eiken-zacht); }
[data-kleur="dakpan"]     { --cluster: var(--dakpan);     --cluster-zacht: var(--dakpan-zacht); }
[data-kleur="hemel"]      { --cluster: var(--hemel);      --cluster-zacht: var(--hemel-zacht); }
[data-kleur="mos"]        { --cluster: var(--mos);        --cluster-zacht: var(--mos-zacht); }
[data-kleur="beton"]      { --cluster: var(--beton);      --cluster-zacht: var(--beton-zacht); }
[data-kleur="noot"]       { --cluster: var(--noot);       --cluster-zacht: var(--noot-zacht); }
[data-kleur="blad"]       { --cluster: var(--blad);       --cluster-zacht: var(--blad-zacht); }
[data-kleur="staal"]      { --cluster: var(--staal);      --cluster-zacht: var(--staal-zacht); }
[data-kleur="pruim"]      { --cluster: var(--pruim);      --cluster-zacht: var(--pruim-zacht); }
[data-kleur="primair"]    { --cluster: var(--primair);    --cluster-zacht: var(--primair-zacht); }

/* Donkere modus: dezelfde tinten, opgehelderd zodat ze op donker leesbaar zijn. */
@media (prefers-color-scheme: dark) {
	:root {
		--inkt: #e9edf1;
		--inkt-zacht: #a6b0bb;
		--inkt-licht: #7d8894;
		--papier: #12161b;
		--papier-2: #1a1f26;
		--papier-3: #232932;
		--lijn: #2c333c;
		--lijn-sterk: #3d4650;

		--primair: #6f9ae0;
		--primair-donker: #8db0ea;
		--primair-zacht: #16233a;
		--accent: #e07f3c;
		--accent-zacht: #2a1d12;
		--goed: #3aa587;
		--goed-zacht: #12241f;
		--let-op: #d9614a;
		--let-op-zacht: #2a1714;

		--amber: #d7a247;       --amber-zacht: #241d10;
		--vuurrood: #d4705c;    --vuurrood-zacht: #251512;
		--waterblauw: #5296bd;  --waterblauw-zacht: #121e26;
		--aqua: #45a49b;        --aqua-zacht: #10211f;
		--zand: #ad9a7e;        --zand-zacht: #221e18;
		--kobalt: #7684c9;      --kobalt-zacht: #171a2b;
		--leisteen: #8697ad;    --leisteen-zacht: #191d23;
		--eiken: #b3835d;       --eiken-zacht: #221b15;
		--dakpan: #c46f4d;      --dakpan-zacht: #251510;
		--hemel: #5e9bba;       --hemel-zacht: #131e25;
		--mos: #86a35c;         --mos-zacht: #1a2013;
		--beton: #8d99a6;       --beton-zacht: #1b1f24;
		--noot: #a67b52;        --noot-zacht: #211a13;
		--blad: #6a9971;        --blad-zacht: #141f17;
		--staal: #6e879f;       --staal-zacht: #161d24;
		--pruim: #9576b3;       --pruim-zacht: #1d1725;

		--schaduw-s: 0 1px 2px rgb(0 0 0 / 0.45);
		--schaduw-m: 0 6px 18px rgb(0 0 0 / 0.5);
		--schaduw-l: 0 16px 40px rgb(0 0 0 / 0.6);
	}
}