:root 
{
    /* De hoofdkleuren van de website */
    --cassiopeia-color-primary: #f2cacb;    /* Roze (bijv. voor headers/knoppen) */
    --cassiopeia-color-hover: #f2cacb;      /* Roze (voor hover-effecten) */
    --cassiopeia-color-link: #800020;       /* Rood (voor standaard tekstlinks) */

    /* Achtergrondkleuren */
    --body-bg: #f2cacb;                     /* Roze de achtergrond van de hele pagina */
    --card-bg: #f2cacb;                     /* Roze achtergrond van modules/kaarten */

    /* Tekstkleuren */
    --body-color: #800020;                  /* Standaard tekstkleur rood) */
    --heading-color: #800020;               /* Rode Kleur van koppen (H1, H2, H3, etc.) */
    
}

/* Aanvulling voor de header (als je het standaard Cassiopeia template gebruikt) */
.header {
    background-color: var(--cassiopeia-color-primary);
}

/* Aanvulling voor de footer */
.footer {
    background-color: #f2cacb;              /* Vaak heel donkergrijs/zwart */
    color: #800020; 
}

/* Header: vaste achtergrondkleur */
header,
.site-header,
.header {
  background: #f2cacb; !important; /* vervang door gewenste kleur */
  background-image: none !important;
}

/* Footer: vaste achtergrondkleur */
footer,
.site-footer,
.footer {
  background: #f2cacb; !important; /* vervang door gewenste kleur */
  background-image: none !important;
}

.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
color: #800020;
}

/* Hoofddropdown achtergrondkleur */
.navbar .dropdown-menu {
  background-color: #f2cacb; /* gewenste kleur */
  border: none; /* optioneel: verwijder rand */
}

/* Links in dropdown */
.navbar .dropdown-menu a {
  color: #800020; /* tekstkleur */
}

/* Hover staat voor items */
.navbar .dropdown-menu a:hover {
  background-color: #f2cacb; /* hover-kleur */
  color: #000;
}