:root {
  --kleur-sinterklaasrood: #B22222;
  --kleur-donkerrood: #8B0000;
  --kleur-goud: #D4AF37;
  --kleur-warmgeel: #F5C443;
  --kleur-roomwit: #FAF8F0;
  --kleur-donkerpaars: #551A8B;
  --kleur-zwart: #222222;
  --kleur-kidsroze: #F2609F;
  --kleur-kidsgeel: #F7C948;
  --kleur-kidsturquoise: #3FBFB4;
  --kleur-kidspaars: #9B6BD6;
  --kleur-kidsblauw: #3E8FD8;
  --kleur-kidsdiepblauw: #1B2A6B;

  --kleur-primair:        var(--kleur-sinterklaasrood);
  --kleur-primair-donker: var(--kleur-donkerrood);
  --kleur-accent:         var(--kleur-goud);
  --kleur-highlight:      var(--kleur-warmgeel);
  --kleur-achtergrond:    var(--kleur-roomwit);
  --kleur-tekst:          var(--kleur-zwart);

  --font-kop:    "Lilita One", cursive;
  --font-subkop: "Lilita One", cursive;
  --font-tekst:  "Nunito", sans-serif;
  --font-knop:   "Lilita One", cursive;

  --tekst-basis: 17px;
  --tekst-s:     13.6px;
  --tekst-m:     21.25px;
  --tekst-l:     26.56px;
  --tekst-xl:    33.2px;
  --tekst-xxl:   41.5px;

  --rond:        14px;
  --rond-groot:  28px;
}

/* Knopstijlen uit het CMS */
.knop--primair {
  --knop-bg: var(--kleur-sinterklaasrood);
  --knop-tekst: var(--kleur-roomwit);
  --knop-rand: transparent;
  --knop-bg-hover: var(--kleur-donkerrood);
  --knop-tekst-hover: var(--kleur-roomwit);
  --knop-rand-hover: transparent;
  --knop-rond: 999px;
}
.knop--paars {
  --knop-bg: var(--kleur-donkerpaars);
  --knop-tekst: var(--kleur-roomwit);
  --knop-rand: transparent;
  --knop-bg-hover: #3E1266;
  --knop-tekst-hover: var(--kleur-roomwit);
  --knop-rand-hover: transparent;
  --knop-rond: 999px;
}
.knop--omlijnd {
  --knop-bg: transparent;
  --knop-tekst: var(--kleur-sinterklaasrood);
  --knop-rand: var(--kleur-sinterklaasrood);
  --knop-bg-hover: var(--kleur-sinterklaasrood);
  --knop-tekst-hover: var(--kleur-roomwit);
  --knop-rand-hover: var(--kleur-sinterklaasrood);
  --knop-rond: 999px;
}
.knop--goud {
  --knop-bg: var(--kleur-goud);
  --knop-tekst: var(--kleur-zwart);
  --knop-rand: transparent;
  --knop-bg-hover: var(--kleur-warmgeel);
  --knop-tekst-hover: var(--kleur-zwart);
  --knop-rand-hover: transparent;
  --knop-rond: 999px;
}