:root{
  --papier:#FAF8F4;        /* de achtergrond van alles wat leest */
  --paneel:#FFFFFF;        /* een kaart of blok op het papier */
  --lijn:#E3DED3;          /* randen en scheidingen */
  --lijn-zacht:#EEEAE0;    /* rijen in tabellen */
  --nacht:#0F1B2D;         /* de hemel waaronder de satelliet kijkt: koppen van verkooppagina en inlogscherm */
  --nacht2:#182842;

  --inkt:#1D2129;
  --grijs:#5F6977;         /* gedempte tekst, bijschriften */
  --grijs-zacht:#9AA3AF;   /* nog stiller: eenheden, hints */

  --signaal:#E4572E;       /* het merk, en de kleur van een alarm */
  --signaal-diep:#C9471F;  /* hover op een signaalknop */
  --gloed:#F2A93B;         /* hitte, waarschuwing, amber */
  --dennen:#2F6B47;        /* sein veilig, in orde */
  --dennen-diep:#255A3A;

  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --bg:var(--papier);
  --pap:var(--papier);
  --panel:var(--paneel);
  --edge:var(--lijn);
  --ink:var(--inkt);
  --dim:var(--grijs);
  --faint:var(--grijs-zacht);
  --ember:var(--signaal);
  --gold:var(--gloed);
  --ok:var(--dennen);
  --bad:var(--signaal);
}

:root[data-theme=dark]{
  --papier:#0F1116;
  --paneel:#171A21;
  --lijn:#2A2F38;
  --lijn-zacht:#22262E;
  --inkt:#EAE6DF;
  --grijs:#98A0AC;
  --grijs-zacht:#5F6A78;
  --signaal-diep:#F06A44;
}

.merkbalk{display:flex;align-items:center;gap:22px;padding:20px 0 16px;
  border-bottom:1px solid var(--lijn);margin-bottom:24px}
.merkbalk .merk{font:600 18px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--inkt)}
.merkbalk .merk b,.merkbalk .merk em{color:var(--signaal);font-weight:600;font-style:normal}
.merkbalk .merk small{font:400 11px var(--mono);letter-spacing:.1em;margin-left:10px;
  color:var(--grijs);text-transform:none}
.merkbalk .ruimte{flex:1}
.merkbalk a.nl{font:400 14px var(--sans);text-decoration:none;color:var(--grijs)}
.merkbalk a.nl:hover{color:var(--inkt)}

.knop{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:10px;
  font:500 15px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;
  color:var(--inkt);background:var(--paneel);transition:transform .12s,background .12s,border-color .12s}
.knop:active{transform:translateY(1px)}
.knop.vol{background:var(--signaal);color:#fff}
.knop.vol:hover{background:var(--signaal-diep)}
.knop.los{background:transparent;border-color:currentColor}
.knop.los:hover{background:#0000000a}
.knop:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--gloed);outline-offset:2px}

.kaartje{background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 2px #1D21290A}

.lezen{color:var(--inkt);font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.lezen h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.02em;font-weight:600;margin:0 0 14px}
.lezen h2{font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.015em;font-weight:600;margin:40px 0 12px;max-width:24ch}
.lezen h3{font-size:19px;font-weight:600;margin:24px 0 6px}
.lezen p{margin:0 0 1em}
.lezen a{color:var(--signaal)}
.lezen .stil{color:var(--grijs)}
.lezen .mono{font-family:var(--mono)}