/* * De ontwerptokens van Morris — letterlijk overgenomen uit de levende * designgids: site-live/design/index.html (en identiek aan site-live/index.html). * Wijzig je hier een kleur-, type- of vormwaarde, wijzig hem dan ook daar. * De gids is de bron van waarheid; bij twijfel wint de gids. * * :root draagt de dagstand — de standaardstand van de site. De nachtstand * hangt aan [data-thema="nacht"] op (gezet door browser/thema.js, * onthouden onder de sleutel "morris-thema" in localStorage — dezelfde * sleutelnaam als de applicatie gebruikt). * * --radius en --schaduw bestaan niet als losse token in de gids: die werkt * daar met een tabel (radius per componentrol) en een prosaregel (schaduw). * Ze zijn hier samengesteld uit diezelfde gidswaarden, niet verzonnen — zie * taak-6-verslag.md voor de onderbouwing. * * --amber-tekst bestaat ook niet in de gids. De gids gebruikt --amber zelf * als linkkleur (`a{color:var(--amber)}`), maar dat haalt in de dagstand * op --vlak maar 3.44:1 — onder de AA-norm van 4.5:1 voor tekst. Voor * lopende tekstlinks in het Helpcentrum (waar leesbaarheid harder telt dan * op de marketingsite) gebruiken we daarom een donkerder tint met dezelfde * tint/verzadiging als --amber (hue 36,5°, verzadiging 91%), alleen de * lichtheid omlaag tot een comfortabele marge boven de norm (5,34:1). Voor * vlakken, randen en accenten blijft --amber ongewijzigd. Zie * taak-6-verslag.md voor de meting. */ :root { --f-display: "Syne", sans-serif; --f-body: "DM Sans", system-ui, sans-serif; /* dag */ --vlak: #F3EDE3; --kaart: #FFFDF8; --kaart2: #FAF6EE; --lijn: #DCD3C5; --tekst: #14100A; --stil: #7D6E5E; --amber: #B37008; --amber-gloed: rgba(179, 112, 8, .22); --amber-tekst: #895606; --teal: #0E8C86; --groen: #2D7A4F; --rood: #B23A3A; --blauw: #1A5FA0; /* Radius van de gids-tabel: 14–16px is de rol "Kaart" (modulekaart, weetje, KPI) — de rol van de meeste afgeronde vlakken op deze site. */ --radius: 16px; /* Letterlijk de schaduw van de dag-schakelknop (.schakel) uit de gids: een los element dat van de pagina moet loskomen, precies de rol van ons zoekresultaat en de screenshotlijst. */ --schaduw: 0 8px 30px rgba(20, 16, 10, .14); } [data-thema="nacht"] { --vlak: #16110B; --kaart: #211A12; --kaart2: #282016; --lijn: #3B3226; --tekst: #F3EDE3; --stil: #A08F79; --amber: #E09A26; --amber-gloed: rgba(224, 154, 38, .28); /* De gewone --amber haalt in de nachtstand al 7,88:1 op --vlak — geen apart donkerder token nodig, dus deze verwijst gewoon terug. */ --amber-tekst: var(--amber); --teal: #17B3AB; --groen: #5BBE8C; --rood: #E05252; --blauw: #5E93CE; /* Zelfde bron (.schakel), nachtvariant: zwarter en sterker. */ --schaduw: 0 8px 30px rgba(0, 0, 0, .4); }