/*
 * De design tokens. Dit bestand is de enige bron van waarheid voor kleur,
 * typografie en ruimte, en staat daarom als eerste in de keten. inc/colors.php
 * injecteert hierop alleen de tokens die het buurtbeheer echt heeft gewijzigd.
 *
 * Richting: Kaartblad. De veldnamenkaart van Ewijk als ontwerp. Op een
 * kadastrale kaart uit 1832 ligt de codering vast: bebouwing karmijn, water
 * blauw, wegen oker, heggen en houtwallen groen, alles op ongebleekt papier met
 * ijzergallusinkt. Dat is het hele palet, en het is dus niet vrij gekozen.
 *
 * Alle maten hangen aan een stap van 28 px. Regelafstand, marges en de goot
 * tussen kolommen zijn een veelvoud daarvan, zodat de tekst op de rasterlijn
 * blijft staan.
 */

:root {
	/* --- Kleur -------------------------------------------------------- */

	/* Ongebleekt kaartpapier. */
	--kleur-grond: #f6f1e5;
	/* Het lichtere blad dat op het papier ligt: kaarten, kop en voet. */
	--kleur-vlak: #fbf8f0;
	/* Karton onder de kaart, voor banden die iets dieper liggen. */
	--kleur-onderlegger: #efe8d8;

	/* IJzergallusinkt: zwart met een bruine ondertoon. 14,5:1 op papier. */
	--kleur-tekst: #1e2119;
	/* Sepia, voor bijschriften. 6,7:1 op papier. */
	--kleur-tekst-zacht: #565547;

	/* Heg en houtwal. 7,0:1 op papier. */
	--kleur-primair: #2c5b3f;
	--kleur-primair-donker: #1f4530;
	--kleur-primair-licht: #d9e4d5;
	--kleur-op-primair: #f6f1e5;

	/* Kadasterrood: de kleur van bebouwing op de minuutplans. 6,4:1. */
	--kleur-accent: #9b3b1f;
	--kleur-accent-donker: #7e2b18;
	--kleur-op-accent: #f6f1e5;

	/* De overige kaartkleuren. Water blauw, wegen oker. */
	--kleur-water: #1f546e;
	--kleur-oker: #8a6410;

	/* Ingekleurde vlakken, altijd met de gewone tekstkleur erop. */
	--kleur-wash-groen: #d9e4d5;
	--kleur-wash-oker: #ebd9ae;
	--kleur-wash-rood: #f0dcd2;
	--kleur-wash-blauw: #d4e1e9;

	/* Perceelgrenzen, van fijn naar zwaar. */
	--kleur-rand: #d6ccb4;
	--kleur-kader: #b7ab8e;
	--kleur-lijn-zwaar: #877f6c;

	--kleur-focus: #9b3b1f;

	/* Het ruitjespapier en de heg, allebei bewust ingehouden. De jury vond het
	   blad in de eerste opzet te druk, en dat kost een zwakke lezer moeite. */
	--raster-lijn: rgb(30 33 25 / 4%);
	--heg-lijn: rgb(30 33 25 / 30%);

	/* --- Typografie --------------------------------------------------- */

	--font-kop: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--font-tekst: "Source Sans 3", "Segoe UI", Roboto, system-ui, sans-serif;

	/* Zeven treden plus een titelmaat, en daarbuiten bestaat geen enkele
	   tekstgrootte. Een afwijking valt dan meteen op.
	   De onderste twee treden staan hoger dan in het oorspronkelijke ontwerp:
	   de kaarttekst en de straattegels stonden op 14 px en de meta op 12 px
	   gespatieerde kapitalen, en dat is precies de zetting waar iemand met
	   minder scherpe ogen op stukloopt. */
	--trap-1: 0.8125rem;  /* 13 - alleen echte labels, spaarzaam */
	--trap-2: 0.9375rem;  /* 15 - bijschrift, meta, datum */
	--trap-3: 1rem;       /* 16 - kaarttekst en lijsten */
	--trap-4: 1.125rem;   /* 18 - lopende tekst */
	--trap-5: 1.3125rem;  /* 21 - lead en kaartkop */
	--trap-6: 1.625rem;   /* 26 - sectiekop */
	--trap-7: 2.125rem;   /* 34 - paginakop op een telefoon */
	--trap-titel: clamp(2.125rem, 1.5rem + 2.6vw, 3rem);

	--maat-label: var(--trap-1);
	--maat-klein: var(--trap-2);
	--maat-tekst: var(--trap-4);
	--maat-groot: var(--trap-5);
	--maat-h3: var(--trap-5);
	--maat-h2: var(--trap-6);
	--maat-h1: var(--trap-titel);

	--regelhoogte: 1.5556;      /* 18 px op 28 px, dus op de rasterlijn */
	--regelhoogte-kop: 1.15;
	/* Kapitalen krijgen maar half zoveel spatiëring als eerst; op deze maat is
	   meer spatiëring geen elegantie maar een leesdrempel. */
	--spatie-label: 0.06em;

	/* --- Ruimte, op de stap van 28 px --------------------------------- */

	--stap: 1.75rem;
	--r1: 0.4375rem;  /*  7 - kwart stap */
	--r2: 0.875rem;   /* 14 - halve stap */
	--r3: 1.3125rem;  /* 21 - driekwart stap */
	--r4: 1.75rem;    /* 28 - een stap */
	--r5: 2.625rem;   /* 42 - anderhalve stap */
	--r6: 3.5rem;     /* 56 - twee stappen */
	--r7: 5.25rem;    /* 84 - drie stappen */
	--r8: 7rem;       /* 112 - vier stappen */

	/* --- Vorm --------------------------------------------------------- */

	/* Een kaartblad heeft rechte hoeken. Alleen knoppen en invoervelden krijgen
	   een haartje rondig, zodat ze aanraakbaar ogen. */
	--radius-klein: 2px;
	--radius: 3px;
	--radius-groot: 4px;
	--randdikte: 1px;

	--schaduw-zacht: 0 1px 0 rgb(30 33 25 / 5%);
	--schaduw-op: 0 1px 2px rgb(30 33 25 / 10%), 0 6px 16px rgb(30 33 25 / 7%);

	/* --- Maten -------------------------------------------------------- */

	--breedte-inhoud: 70rem;
	--breedte-smal: 42rem;
	--raakvlak: 44px;
	--headerhoogte: 5rem;
}

/*
 * Nachtdruk: dezelfde kaart, maar gedrukt op donker papier. De inkt wordt
 * kalklicht, de wassingen worden diep en de heg en het kadasterrood lichten op
 * zodat ze op de donkere ondergrond hun contrast houden.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--kleur-grond: #16180f;
		--kleur-vlak: #1e2117;
		--kleur-onderlegger: #262a1d;

		--kleur-tekst: #ece7d7;
		--kleur-tekst-zacht: #b0ab98;

		--kleur-primair: #9cc0a4;
		--kleur-primair-donker: #b6d3bc;
		--kleur-primair-licht: #253026;
		--kleur-op-primair: #10130b;

		--kleur-accent: #e08a68;
		--kleur-accent-donker: #eda484;
		--kleur-op-accent: #1a0d06;

		--kleur-water: #7fb0c8;
		--kleur-oker: #d2a63f;

		--kleur-wash-groen: #22301f;
		--kleur-wash-oker: #332c17;
		--kleur-wash-rood: #33201a;
		--kleur-wash-blauw: #1b2a33;

		--kleur-rand: #363a29;
		--kleur-kader: #4a4e39;
		--kleur-lijn-zwaar: #6f7359;

		--kleur-focus: #e5b85f;

		--raster-lijn: rgb(236 231 215 / 4%);
		--heg-lijn: rgb(236 231 215 / 26%);

		--schaduw-zacht: 0 1px 0 rgb(0 0 0 / 40%);
		--schaduw-op: 0 1px 2px rgb(0 0 0 / 50%), 0 6px 16px rgb(0 0 0 / 40%);
	}
}