:root {
  /* Monochromatisch kleurschema op basis van HSL */
  --Hbasis: 220;
  --Hcontra: 20;
  --Sbasis: 80%;
  --Sknop: 48%;
  --Lbasis: 65%;
  --Lknop: 70%;
  --Lctrl: 60%;
  --Ldonker: 55%;
  --Llicht: 75%;
  --Lhoverdim: 5%; /* Te gebruiken met calc() */
  --Lactivedim: 10%; /* Te gebruiken met calc() */

  --cBasis: hsl(var(--Hbasis), var(--Sbasis), var(--Lbasis));
  --cVerloop: hsl(220, 52%, 60%);
  --cInhoud: hsl(var(--Hbasis), var(--Sbasis), var(--Ldonker));
  --cInhoudTxt: cornsilk;
  --cKopTxt: rgb(64, 78, 78);
  --cDoorkijk: hsla(
    var(--Hbasis),
    var(--Sbasis),
    var(--Lbasis),
    0.8
  ); /* doorkijklaag */
  --cControle: hsl(var(--Hbasis), var(--Sbasis), var(--Lctrl));
  --cDialoog: hsl(var(--Hbasis), var(--Sbasis), var(--Lctrl));
  --cInhbtnHover: hsl(
    var(--Hbasis),
    var(--Sbasis),
    calc(var(--Ldonker) - var(--Lhoverdim))
  );
  --cInhbtn-select: hsl(
    var(--Hbasis),
    var(--Sbasis),
    calc(var(--Ldonker) - var(--Lactivedim))
  );
  --cKnop: hsl(var(--Hbasis), var(--Sknop), var(--Lknop));
  --cKnopHover: hsl(
    var(--Hbasis),
    var(--Sknop),
    calc(var(--Lknop) - var(--Lhoverdim))
  );
  --cKnopAct: hsl(
    var(--Hbasis),
    var(--Sknop),
    calc(var(--Lknop) - var(--Lactivedim))
  );
  --cXknp: hsl(0, var(--Sknop), var(--Lknop));
  --cXknpHover: hsl(0, var(--Sknop), calc(var(--Lknop) - var(--Lhoverdim)));
  --cXknpAct: hsl(0, var(--Sknop), calc(var(--Lknop) - var(--Lactivedim)));
  --cRadioHover: hsl(
    var(--Hbasis),
    var(--Sbasis),
    calc(var(--Lbasis) + var(--Llicht))
  );
  --cMasker: rgba(var(--Hbasis), var(--Sbasis), var(--Lbasis), 0.3);
}