:root {
--primary-color: #212997; /* op te geven in admin */
--primary-color-hover: #1e2588; /* te berekenen, 10% donkerder */
--primary-color-active: #1a2179; /* te berekenen, 20% donkerder */
--primary-contrast-color: #f50f0f; /* op te geven in admin */
--secondary-color: #949184; /* op te geven in admin */
--secondary-color-hover: #858377; /* te berekenen, 10% donkerder */
--secondary-color-active: #76746a; /* te berekenen, 20% donkerder */
--secondary-contrast-color: #07e921; /* op te geven in admin */
--tertiary-color: #33a2c7; /* op te geven in admin */
--tertiary-color-hover: #2e92b3; /* te berekenen, 10% donkerder */
--tertiary-color-active: #29829f; /* te berekenen, 20% donkerder */
--tertiary-contrast-color: #df0c0c; /* op te geven in admin */
--text-color: var(--primary-color); /* op te geven in admin */
--brand-color: var(--tertiary-color); /* op te geven in admin */
--link-color: var(--primary-color); /* op te geven in admin */
--link-color-hover: var(--primary-color-hover); /* te berekenen, 10% donkerder */
--line-color: var(--tertiary-color); /* op te geven in admin, kunnen altijd terugvallen op  */
--table-head-bg: var(--tertiary-color);
--input-color: #c8cbd8;
--table-color: #c8c8c8;
--bs-body-font-family: "Roboto", sans-serif;
--font-weight-base: 400;
--font-size-base: 1.25rem;
--headings-font-family: var(--bs-body-font-family);
}

/* function shadeColor(hexColor, weight) {
// Zorg ervoor dat het een geldig hex is
if (hexColor[0] === '#') {
hexColor = hexColor.slice(1);
}

// Parse de hex in RGB
const r = parseInt(hexColor.substr(0, 2), 16);
const g = parseInt(hexColor.substr(2, 2), 16);
const b = parseInt(hexColor.substr(4, 2), 16);

const w = weight / 100;

// Meng met zwart (0,0,0)
const newR = Math.round((1 - w) * r);
const newG = Math.round((1 - w) * g);
const newB = Math.round((1 - w) * b);

// Zet terug naar hex
const toHex = (c) => c.toString(16).padStart(2, '0');

return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
} */