/* Doorgronden — de tokens, één keer.

   Deze stonden in `workspace.css` en golden daarmee alleen binnen de
   werkruimte. De voordeur draaide ondertussen op `variables.css`, het palet dat
   Nodge bij het aanmaken van het project genereerde: blauw, cyaan, altijd
   donker. Dat waren twee producten. Wie zich aanmeldde stapte van een blauwe
   landingspagina een indigo werkruimte in, en niets aan het scherm zei dat dat
   dezelfde applicatie was.

   Dus staan ze hier, en laden landingspagina, aanmeldkaart én werkruimte
   hetzelfde bestand. Niet omdat een gedeeld bestand netter is, maar omdat twee
   kopieën van een palet uit elkaar lopen zodra iemand er één bijstelt — en dan
   is de voordeur weer een ander product dan de kamer erachter.

   ── Herzien: het raster ───────────────────────────────────────────────────

   De namen zijn ongewijzigd, de waarden niet. Het indigo accent, de acht pixel
   afronding en de vier verzadigde statuskleuren waren het standaardpakket dat
   elk gegenereerd dashboard van de laatste twee jaar draagt. Ze waren op
   zichzelf verdedigbaar en samen deden ze het werk erachter verdacht lijken.

   Wat ervoor in de plaats komt staat in `concept/herontwerp-vier.html` onder
   voorstel 06:

     • Zwart op wit. Het accent ís de inkt; er is geen tweede huiskleur.
     • Eén verzadigde kleur, en die betekent één ding: **afwijking**. Rood staat
       op een knelpunt, op een gezakte test, op een terugsprong naar een eerdere
       stap. Nergens anders.
     • Toon is hoeveelheid. De sequentiële trap loopt van wit naar zwart en
       draagt aandeel, niet stemming.
     • Geen afronding en geen schaduw. Structuur komt uit uitlijning en uit
       lijnen die iets betekenen.

   ── Wat dat kost, en waarom het toch klopt ────────────────────────────────

   Groen verdwijnt. `--ok` is geen kleur meer maar een grijstoon, en dat is
   opzet: wat in orde is hoort de aandacht niet te trekken. `--warn` wordt de
   zwaarste inkt in plaats van oranje — één stap onder rood, zonder een tweede
   verzadigde kleur op het scherm te zetten. Zijn lijn is bewust grijs en niet
   zwart: met een zwarte rand woog een melding met "aandacht" zwaarder op het
   scherm dan een melding met "kritiek", en dan staat de rangorde omgekeerd. De
   inkt van het woord draagt de ernst, de rand niet. Het onderscheid tussen gezond,
   aandacht en kritiek loopt daarmee over toon (licht → zwart → rood) én over
   het woord dat er sinds het begin al bij staat. Dat tweede was er niet voor
   niets: bij elke status staat ook een woord, want een rapport wordt afgedrukt
   en dan valt kleur als eerste weg. Die regel draagt deze wijziging.

   De redenering achter de typografie staat boven in `workspace.css`: sans is
   productchroom, serif is kwalitatief bewijs, mono is kwantitatief bewijs. Die
   codering blijft; alleen de sans en de mono zijn vervangen — Archivo in plaats
   van Inter, IBM Plex Mono in plaats van JetBrains Mono. De schreef blijft
   Source Serif 4, want die was al goed en het citaat verandert niet.

   `--rail-w`, `--top-h` en `--insp-w` zijn maten van de werkruimte en niet van
   de voordeur. Ze staan hier toch, want een token dat op één plek wordt gebruikt
   is nog steeds één waarheid; hem apart houden levert een tweede bestand op met
   drie regels erin. */

:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f0f0f0; --rail:#ffffff;
  --border:#dcdcdc; --border-strong:#9a9a9a;
  --text:#000000; --text-2:#4a4a4a; --text-3:#7a7a7a;
  --accent:#000000; --accent-hover:#333333; --accent-soft:#f0f0f0; --accent-line:#000000; --on-accent:#fff;
  --crit:#e2231a; --crit-bg:#fdf0ef; --crit-line:#e2231a;
  --warn:#000000; --warn-bg:#f0f0f0; --warn-line:#b4b4b4;
  --ok:#4a4a4a;   --ok-bg:#fafafa;   --ok-line:#dcdcdc;
  --info:#4a4a4a; --info-bg:#fafafa; --info-line:#dcdcdc;
  --idle:#7a7a7a; --idle-bg:#f5f5f5; --idle-line:#dcdcdc;
  --seq-1:#f5f5f5; --seq-2:#e4e4e4; --seq-3:#cfcfcf; --seq-4:#a8a8a8; --seq-5:#7a7a7a; --seq-6:#4a4a4a; --seq-7:#000000;
  /* Geen schaduw. Wat moet opvallen krijgt een lijn, en wat boven de pagina
     hangt krijgt een rand van één pixel — dat is genoeg zodra het scrim eronder
     staat. `--shadow-sm` blijft bestaan en is leeg, zodat de regels die hem
     gebruiken niet hoeven te worden opgezocht. */
  --shadow-sm:none;
  --shadow-md:0 0 0 1px #dcdcdc;
  --shadow-lg:0 0 0 1px #000000;
  --r:0px; --r-sm:0px; --r-lg:0px;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rail-w:242px; --top-h:50px; --insp-w:404px;
}
/* Donker is hetzelfde raster met de inkt omgekeerd. Rood wordt lichter, want
   #e2231a op bijna-zwart haalt de leesbaarheidsgrens niet; het blijft dezelfde
   kleur met dezelfde betekenis. De sequentiële trap draait mee — donker naar
   licht — en `inktOpSeq()` in `workspace.js` draait daarop mee via
   `--on-accent`. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0d0d0d; --surface:#141414; --surface-2:#1a1a1a; --surface-3:#242424; --rail:#0d0d0d;
  --border:#2e2e2e; --border-strong:#5a5a5a;
  --text:#ffffff; --text-2:#b4b4b4; --text-3:#858585;
  --accent:#ffffff; --accent-hover:#d4d4d4; --accent-soft:#242424; --accent-line:#ffffff; --on-accent:#0d0d0d;
  --crit:#ff5247; --crit-bg:#2a100e; --crit-line:#ff5247;
  --warn:#ffffff; --warn-bg:#242424; --warn-line:#5a5a5a;
  --ok:#a0a0a0;   --ok-bg:#1a1a1a;   --ok-line:#2e2e2e;
  --info:#a0a0a0; --info-bg:#1a1a1a; --info-line:#2e2e2e;
  --idle:#858585; --idle-bg:#1a1a1a; --idle-line:#2e2e2e;
  --seq-1:#1c1c1c; --seq-2:#2b2b2b; --seq-3:#3d3d3d; --seq-4:#5e5e5e; --seq-5:#8a8a8a; --seq-6:#b8b8b8; --seq-7:#ffffff;
  --shadow-sm:none;
  --shadow-md:0 0 0 1px #2e2e2e;
  --shadow-lg:0 0 0 1px #5a5a5a;
}}
:root[data-theme="dark"]{
  --bg:#0d0d0d; --surface:#141414; --surface-2:#1a1a1a; --surface-3:#242424; --rail:#0d0d0d;
  --border:#2e2e2e; --border-strong:#5a5a5a;
  --text:#ffffff; --text-2:#b4b4b4; --text-3:#858585;
  --accent:#ffffff; --accent-hover:#d4d4d4; --accent-soft:#242424; --accent-line:#ffffff; --on-accent:#0d0d0d;
  --crit:#ff5247; --crit-bg:#2a100e; --crit-line:#ff5247;
  --warn:#ffffff; --warn-bg:#242424; --warn-line:#5a5a5a;
  --ok:#a0a0a0;   --ok-bg:#1a1a1a;   --ok-line:#2e2e2e;
  --info:#a0a0a0; --info-bg:#1a1a1a; --info-line:#2e2e2e;
  --idle:#858585; --idle-bg:#1a1a1a; --idle-line:#2e2e2e;
  --seq-1:#1c1c1c; --seq-2:#2b2b2b; --seq-3:#3d3d3d; --seq-4:#5e5e5e; --seq-5:#8a8a8a; --seq-6:#b8b8b8; --seq-7:#ffffff;
  --shadow-sm:none;
  --shadow-md:0 0 0 1px #2e2e2e;
  --shadow-lg:0 0 0 1px #5a5a5a;
}