:root {
  --default-color-highlight: #0072B7;
  --default-color-highlight-rgb: 0, 114, 183;
  --default-color-homegreen: #7aa520;
  --default-color-green: #649021;
  /**/
  /**/
  /* Main backgrounds */
  --color-page-background: #f6f9fb;
  --color-white-background: #FFFFFF;
  --color-grey-background: #f3f5f7;
  --color-light-grey-background: lightgrey;
  --color-highlight-background: #E8F2F9;
  /**/
  /**/
  /*footer*/
  --color-footer-background: #131217;
  --color-footer-highlight-background: #4A4A4A;
  /**/
  /**/
  /*panels background / borders*/
  --color-panel-background: #FFFFFF;
  --color-panel-border-hard: var(--default-color-highlight);
  --color-panel-border-soft: rgba(var(--default-color-highlight-rgb), 0.5);
  --color-panel-highlight-background: #FBFEFF;
  --color-panel-highlight-background-hard: #E8F2F9;
  --color-panel-highlight-border: var(--default-color-highlight);
  /**/
  /**/
  /* borders */
  --color-border-default-soft: #00000080;
  --color-border-default-light-grey: #E2E8F0;
  /**/
  /**/
  /* primary buttons  */
  --color-button-primary-background: var(--default-color-green);
  --color-button-primary-border: #415720;
  --color-button-primary-text: #FFFFFF;
  /**/
  /**/
  /* secundary button  */
  --color-button-secundary-background: #FFFFFF;
  --color-button-secundary-border: #41571C;
  --color-button-secundary-text: var(--default-color-green);
  /**/
  /**/
  /* Text */
  --color-text: #1d1d1d;
  --color-sub-text: #666;
  --color-muted-text: #999;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-rgb: 255,255,255;
  --color-text-highlight: var(--default-color-highlight);
  /**/
  /**/
  /* icon   */
  --color-icon-background: var(--default-color-highlight);
  --color-icon-background-soft: rgba(var(--default-color-highlight-rgb), 0.15);
  --color-icon-background-hard: rgba(var(--default-color-highlight-rgb), 0.85);
  --color-icon-background-border: var(--default-color-highlight);
  --color-icon-background-text: var(--color-text-inverse);
  /* loading icon filter */
  --gif-invert: invert(0%);
}

body {
  color: var(--color-text) !important;
  background: var(--color-page-background) !important;
}


/* Thema-accenten staan onderaan, ná body.darkmode (zie "Accenten"). */

  body.darkmode {
    --default-color-highlight: #2F8FC7;
    --default-color-highlight-rgb: 47, 143, 199;
    --default-color-homegreen: #7AA520;
    --default-color-green: #7AA520;
    /* Main backgrounds */
    --color-page-background: #111111;
    --color-white-background: #191919;
    --color-grey-background: #212121;
    --color-light-grey-background: #2B2B2B;
    --color-highlight-background: #1B2227;
    /* footer */
    --color-footer-background: #090909;
    --color-footer-highlight-background: #202020;
    /* panels background / borders */
    --color-panel-background: #1C1C1C;
    --color-panel-border-hard: #2F8FC7;
    --color-panel-border-soft: rgba(var(--default-color-highlight-rgb), 0.28);
    --color-panel-highlight-background: #242424;
    --color-panel-highlight-background-hard: #1B2227;
    --color-panel-highlight-border: #2F8FC7;
    /* borders */
    --color-border-default-soft: rgba(255,255,255,0.33);
    --color-border-default-light-grey: rgba(255,255,255,0.3);
    /* primary buttons */
    --color-button-primary-background: #5E7F1A;
    --color-button-primary-border: #4C6914;
    --color-button-primary-text: #FFFFFF;
    /* secundary button */
    --color-button-secundary-background: #191919;
    --color-button-secundary-border: #6F991E;
    --color-button-secundary-text: #8FBE35;
    /* Text */
    --color-text: #F0F0F0;
    --color-sub-text: #B8B8B8;
    --color-muted-text: #8A8A8A;
    --color-text-inverse: #FFFFFF;
    --color-text-inverse-rgb: 255,255,255;
    --color-text-highlight: #68B6E8;
    /* icon */
    --color-icon-background: #2F8FC7;
    --color-icon-background-soft: rgba(var(--default-color-highlight-rgb), 0.14);
    --color-icon-background-hard: rgba(var(--default-color-highlight-rgb), 0.75);
    --color-icon-background-border: #2F8FC7;
    --color-icon-background-text: #FFFFFF;
    /* loading icon filter */
    --gif-invert: invert(88%);
  }


  /* =========================================================
     Accenten — kleuren bovenop het Licht/Donker basisthema.
     Elk accent zet alleen de highlight-kleur; het gedeelde blok
     daaronder leidt daaruit randen, iconen en knoppen af. Zo
     blijven achtergrond en tekst van de gekozen modus (licht/donker)
     behouden. Halloween en Valentijn krijgen daarnaast een subtiele
     ondertoon in de achtergrond (paars resp. roze), per modus.
     ========================================================= */

  body.accent-halloween {
    --default-color-highlight: #ff7b00;
    --default-color-highlight-rgb: 255, 123, 0;
  }

  body.accent-valentines {
    --default-color-highlight: #E13D6F;
    --default-color-highlight-rgb: 225, 61, 111;
  }

  /* Gedeelde afgeleiden: highlight -> tekst-accent, randen, iconen, knoppen. */
  body.accent-halloween,
  body.accent-valentines {
    --color-text-highlight: var(--default-color-highlight);
    --color-panel-border-hard: var(--default-color-highlight);
    --color-panel-border-soft: rgba(var(--default-color-highlight-rgb), 0.4);
    --color-panel-highlight-border: var(--default-color-highlight);
    --color-icon-background: var(--default-color-highlight);
    --color-icon-background-soft: rgba(var(--default-color-highlight-rgb), 0.15);
    --color-icon-background-hard: rgba(var(--default-color-highlight-rgb), 0.85);
    --color-icon-background-border: var(--default-color-highlight);
    --color-button-primary-background: var(--default-color-highlight);
    --color-button-primary-border: rgba(var(--default-color-highlight-rgb), 0.7);
    --color-button-secundary-border: var(--default-color-highlight);
    --color-button-secundary-text: var(--default-color-highlight);
  }

  /* Halloween-ondertoon: licht paars op Licht, donker paars op Donker. */
  body.accent-halloween:not(.darkmode) {
    --color-page-background: #f7f4fb;
    --color-grey-background: #f0eaf7;
    --color-light-grey-background: #e6dcf2;
    --color-highlight-background: #efe6f9;
    --color-panel-highlight-background: #faf7ff;
    --color-panel-highlight-background-hard: #efe6f9;
  }

  body.darkmode.accent-halloween {
    --color-page-background: #100b1a;
    --color-white-background: #181226;
    --color-grey-background: #201830;
    --color-light-grey-background: #2a2040;
    --color-highlight-background: #241640;
    --color-panel-background: #181226;
    --color-panel-highlight-background: #241836;
    --color-panel-highlight-background-hard: #2d1b4d;
  }

  /* Valentijn-ondertoon: licht roze op Licht, donker roze op Donker. */
  body.accent-valentines:not(.darkmode) {
    --color-page-background: #fff6f8;
    --color-grey-background: #ffeef2;
    --color-light-grey-background: #ffdfe6;
    --color-highlight-background: #ffe3eb;
    --color-panel-highlight-background: #fff8fa;
    --color-panel-highlight-background-hard: #ffe3eb;
  }

  body.darkmode.accent-valentines {
    --color-page-background: #160d12;
    --color-white-background: #20141a;
    --color-grey-background: #281820;
    --color-light-grey-background: #341f29;
    --color-highlight-background: #3a1e2a;
    --color-panel-background: #20141a;
    --color-panel-highlight-background: #2a1a22;
    --color-panel-highlight-background-hard: #3a1e2a;
  }