:root {
  /* == A. GLOBALE VARIABELEN == */
  --bs-body-color: #212529;
  --bs-body-bg: #ffffff;
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-bg: #f8f9fa;

  /* Tekst & Links */
  --bs-body-color-rgb: 33, 37, 41;
  --bs-link-color: #06487F;
  --bs-link-color-rgb: 6, 72, 127;
  --bs-link-hover-color: color-mix(in srgb, #06487F 80%, black);

  /* Borders */
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  /* == B. THEME KLEUREN (PRIMAIR & SECUNDAIR) == */
  /* Primaire kleur */
  --bs-primary: #06487F;
  --bs-primary-rgb: 6, 72, 127;
  --bs-primary-text-emphasis: color-mix(in srgb, #06487F 85%, black);
  --bs-primary-bg-subtle: color-mix(in srgb, #06487F 15%, white);
  --bs-primary-border-subtle: color-mix(in srgb, #06487F 25%, white);

  /* Secundaire kleur */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-secondary-text-emphasis: color-mix(in srgb, #6c757d 85%, black);
  --bs-secondary-bg-subtle: color-mix(in srgb, #6c757d 15%, white);
  --bs-secondary-border-subtle: color-mix(in srgb, #6c757d 25%, white);

  /* == C. COMPONENTEN OVERSCHRIJVEN MET CONTRASTKLEUREN == */
  /* We definiëren hier onze eigen custom properties voor contrast voor hergebruik. */
  --shiva-primary-contrast: #f8f9fa;
  --shiva-primary-contrast-rgb: 248, 249, 250;
  --shiva-secondary-contrast: #f8f9fa;
  --shiva-secondary-contrast-rgb: 248, 249, 250;
  --shiva-dark-text: #212529;
  --shiva-dark-text-rgb: 33, 37, 41;
  --shiva-light-text: #f8f9fa;
  --shiva-light-text-rgb: 248, 249, 250;

  /* == D. TABELLEN == */
  --bs-table-color: var(--shiva-dark-text);
  --bs-table-bg: #ffffff;
  --bs-table-striped-color: var(--shiva-dark-text);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-hover-color: var(--shiva-dark-text);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);

  --bs-body-font-family: "'Montserrat', sans-serif", sans-serif;
}

/* Knoppen */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
  --bs-btn-color: var(--shiva-primary-contrast);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 70%, black);
  --bs-btn-color: var(--shiva-secondary-contrast);
}

/* Tabellen */
.table-primary {
  --bs-table-color: var(--shiva-primary-contrast);
  --bs-table-bg: var(--bs-primary);
  --bs-table-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
}

.table-secondary {
  --bs-table-color: var(--shiva-secondary-contrast);
  --bs-table-bg: var(--bs-secondary);
  --bs-table-border-color: color-mix(in srgb, var(--bs-secondary) 70%, black);
}

.navbar-light {
  --bs-navbar-color: rgba(248, 249, 250, 0.75);
  --bs-navbar-hover-color: #f8f9fa;
  --bs-navbar-active-color: #f8f9fa;
  --bs-navbar-disabled-color: rgba(248, 249, 250, 0.25);
  --bs-navbar-brand-color: #f8f9fa;
  --bs-navbar-brand-hover-color: #f8f9fa;
  --bs-navbar-toggler-border-color: rgba(248, 249, 250, 0.1);
  /* De kleur van het hamburger icoon zelf */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(248, 249, 250, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark {
  --bs-navbar-color: rgba(33, 37, 41, 0.65);
  --bs-navbar-hover-color: #212529;
  --bs-navbar-active-color: #212529;
  --bs-navbar-disabled-color: rgba(33, 37, 41, 0.3);
  --bs-navbar-brand-color: #212529;
  --bs-navbar-brand-hover-color: #212529;
  --bs-navbar-toggler-border-color: rgba(33, 37, 41, 0.1);
  /* De kleur van het hamburger icoon zelf */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.65)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bg-primary,
.bg-primary a {
  color: var(--shiva-primary-contrast) !important;
}
.bg-primary .nav {
  --bs-nav-link-color: var(--shiva-primary-contrast);
  --bs-nav-link-hover-color: color-mix(in srgb, var(--shiva-primary-contrast) 60%, black);
  /* Specifiek voor .nav-pills */
  --bs-nav-pills-link-active-color: var(--bs-primary);
  --bs-nav-pills-link-active-bg: var(--shiva-primary-contrast);
}
/* underline alleen voor active link */
.bg-primary .nav-link.active {
  position: relative;
  font-weight: 600;
}
.bg-primary .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* afstand onder tekst */
  width: 100%;
  height: 2px;
  background-color: var(--shiva-primary-contrast); /* gebruikt tekstkleur */
}
.bg-primary .btn-link {
  --bs-btn-color: var(--shiva-primary-contrast) !important;
  --bs-btn-hover-color: color-mix(in srgb, var(--shiva-primary-contrast) 60%, black) !important;
}

.bg-secondary,
.bg-secondary a {
  color: var(--shiva-secondary-contrast) !important;
}
.bg-secondary .nav {
  --bs-nav-link-color: var(--shiva-secondary-contrast);
  --bs-nav-link-hover-color: color-mix(in srgb, var(--shiva-secondary-contrast) 90%, black);
  /* Specifiek voor .nav-pills */
  --bs-nav-pills-link-active-color: var(--bs-secondary);
  --bs-nav-pills-link-active-bg: var(--shiva-secondary-contrast);
}
/* underline alleen voor active link */
.bg-secondary .nav-link.active {
  position: relative;
  font-weight: 600;
}
.bg-secondary .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* afstand onder tekst */
  width: 100%;
  height: 2px;
  background-color: var(--shiva-secondary-contrast); /* gebruikt tekstkleur */
}

.bg-secondary .btn-link {
  --bs-btn-color: var(--shiva-secondary-contrast) !important;
  --bs-btn-hover-color: color-mix(in srgb, var(--shiva-secondary-contrast) 60%, black) !important;
}

.bg-dark,
.bg-dark a {
  color: var(--shiva-light-text) !important;
}
.bg-dark .nav {
  --bs-nav-link-color: var(--shiva-light-text);
  --bs-nav-link-hover-color: color-mix(in srgb, var(--shiva-light-text) 90%, black);
}
.bg-dark .nav-link.active {
  position: relative;
  font-weight: 600;
}
.bg-dark .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* afstand onder tekst */
  width: 100%;
  height: 2px;
  background-color: var(--shiva-light-text); /* gebruikt tekstkleur */
}
.bg-dark .btn-link {
  --bs-btn-color: var(--shiva-light-text) !important;
  --bs-btn-hover-color: color-mix(in srgb, var(--shiva-light-text) 60%, black) !important;
}

.bg-light,
.bg-light-subtle,
.bg-dark-subtle,
.bg-light a,
.bg-light-subtle a,
.bg-dark-subtle a {
  color: var(--shiva-dark-text) !important;
}
.bg-light .nav,
.bg-light-subtle .nav,
.bg-dark-subtle .nav {
  --bs-nav-link-color: var(--shiva-dark-text);
  --bs-nav-link-hover-color: color-mix(in srgb, var(--shiva-dark-text) 90%, black);
}
.bg-dark-subtle .nav-link.active {
  position: relative;
  font-weight: 600;
}
.bg-dark-subtle .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* afstand onder tekst */
  width: 100%;
  height: 2px;
  background-color: var(--shiva-dark-text); /* gebruikt tekstkleur */
}
.bg-light .btn-link,
.bg-light-subtle .btn-link,
.bg-dark-subtle .btn-link {
  --bs-btn-color: var(--shiva-dark-text) !important;
  --bs-btn-hover-color: color-mix(in srgb, var(--shiva-dark-text) 60%, black) !important;
}

.btn-outline-dark {
  --bs-btn-color: var(--shiva-dark-text);
  --bs-btn-border-color: var(--shiva-dark-text);
  --bs-btn-hover-color: var(--shiva-light-text);
  --bs-btn-hover-bg: var(--shiva-light-text);
  --bs-btn-hover-border-color: var(--shiva-dark-text);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--shiva-dark-text);
  --bs-btn-active-border-color: var(--shiva-dark-text);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--shiva-dark-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--shiva-dark-text);
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: var(--shiva-light-text);
  --bs-btn-border-color: var(--shiva-light-text);
  --bs-btn-hover-color: var(--shiva-dark-text);
  --bs-btn-hover-bg: var(--shiva-dark-text);
  --bs-btn-hover-border-color: var(--shiva-light-text);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--shiva-light-text);
  --bs-btn-active-border-color: var(--shiva-light-text);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--shiva-light-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--shiva-light-text);
  --bs-gradient: none;
}