:root {

    /* Algemene kleuren (Geoptimaliseerd voor Optie 2) */
    --white: #FFFFFF;
    --grey: #b5b5b5;
    --darkgrey: #616161;
    --grey-border: #E5E5E5;
    --lightgrey: #f6f8f6;                     /* Zacht grijs/groene achtergrond */
    --font-color: #16261b;                    /* Zeer donkergroen/zwart voor perfecte leesbaarheid */
    --hyperlink-color: #f37530;               /* Jouw oranje knalt er nu mooi uit als link */
    --hyperlink-hover-color: #22472d;         /* Hover link kleurt terug naar donkergroen */

    /* Diversen (De basis paletkleuren) */
    --primary-darkblue: #22472d;              /* Vervangen door diep bosgroen */
    --primary-lightblue: #61b878;             /* Vervangen door fris lichtgroen */
    --primary-yellow: #E6A100;
    --primary-red: #9C000A;
    --primary-purple: #61b878;
    --primary-pink: #E87A90;
    --primary-contrast: #f37530;              /* Jouw oranje */
    --primary-green: #61b878;                 /* Nieuw lichtgroen */
    --primary-gold: rgb(251, 184, 0);
    --sec-lightblue: #a2d9b1;                 /* Zachte variant van lichtgroen */
    --sec-purple: #22472d;
    --sec-red: #9C000A;
    --sec-green: #22472d;                     /* Nieuw donkergroen */
    --sec-pink: #C55A72;
    --sec-yellow: #C48800;


    /* Gradients (Vloeiend verloop tussen de nieuwe groen- en oranje tinten) */
    --gradient-purple: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --gradient-blue: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --gradient-blue-reverse: linear-gradient(0deg, var(--primary-green) 0%, var(--sec-green) 100%);
    --gradient-green: linear-gradient(0deg, var(--primary-green) 0%, var(--sec-green) 100%);
    --gradient-green-reverse: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --gradient-red: linear-gradient(0deg, var(--sec-red) 0%, #610005 100%);
    --gradient-yellow: linear-gradient(0deg, var(--sec-yellow) 0%, var(--primary-yellow) 100%);
    --gradient-gold: linear-gradient(0deg, #FFD000 0%, var(--primary-gold) 100%);
    --gradient-silver: linear-gradient(to bottom right, #edeff1 50%, #c4cace 50%);
    --gradient-yellow-reverse: linear-gradient(0deg, var(--primary-yellow) 0%, var(--sec-yellow) 100%);
    --gradient-pink: linear-gradient(0deg, var(--sec-pink) 0%, var(--primary-pink) 100%);
    --gradient-pink-reverse: linear-gradient(0deg, var(--primary-pink) 0%, var(--sec-pink) 100%);


    /* Methode specifieke variabelen */

    /* Top menu */
    --top-menu-icon-text: var(--sec-green);
    --top-menu-icon-text-hover: var(--primary-contrast);       /* Highlight met oranje bij hover */
    --top-menu-icon-background: none;
    --top-menu-icon-background-hover: none;
    --top-menu-icon-width: 48px;
    --top-menu-icon-height: 48px;
    --top-menu-icon-font-size: 28px !important;

    --top-menu-dropdown-background: var(--sec-green);
    --top-menu-dropdown-text: var(--white);
    --top-menu-dropdown-item-hover: var(--primary-contrast);   /* Oranje selectie in dropdown */
    --top-menu-dropdown-item-disabled: var(--darkgrey);

    --top-menu-blip-border: #dda239;
    --top-menu-blip-background: #eeb140;

    /* Wave (Met iets meer body en diepte, perfect voor witte tekst) */
    --welcome-text: var(--white);
    --wave-gradient1: #244d31;                /* Krachtig, dieper bosgroen */
    --wave-gradient2: #3f7d4e;                /* Comfortabel, medium-donker groen */

    /* Startpagina */
    --box-ga-verder-not-started-background: var(--primary-green);

    --box-gamification-level-gradient1: var(--primary-green);
    --box-gamification-level-gradient2: var(--sec-green);
    --box-gamification-level-progress-bar: var(--primary-contrast); /* Oranje progress bar valt lekker op */
    --box-gamification-level-progress-bar-text: var(--font-color);

    --box-gamification-badge-gradient1: rgba(255, 238, 0, 1);
    --box-gamification-badge-gradient2: var(--primary-green);

    --dropdown-background: rgba(255, 255, 255, 0.5);


    /* Algemeen */
    --background-divs: var(--white);
    --background-blok-docenten-materiaal: var(--primary-gold);
    --content-blok-background: var(--background-divs);
    --content-blok-voortgang-bar-background: #ECECEC;
    --content-blok-voortgang-bar-fill: var(--primary-green);

    --list-group-active-item: var(--primary-green);

    --footer-text: #6C757D;
    --footer-text-icon: #FFC0C2;

    --other-nav-h4-text: var(--white);

    --gamification-badge-background: linear-gradient(0deg, rgba(255, 208, 0, 1) 0%, var(--primary-gold) 100%);
    --gamification-badge-border: #f5de5f;
    --gamification-badge-easter-egg-background: linear-gradient(to bottom right, #edeff1 50%, #c4cace 50%);
    --gamification-badge-easter-egg-border: #edeff1;


    /* Content pagina */
    --dots-dot-current-background: var(--primary-contrast);   /* Huidige stap is belangrijk -> Oranje */
    --dots-dot-current-text: var(--white);
    --dots-dot-done-background: var(--primary-darkblue);             /* Klaar -> Rustig donkergroen */
    --dots-dot-done-text: var(--white);
    --dots-dot-open-background: var(--background-divs);
    --dots-dot-open-text: var(--font-color);
    --dots-dot-results: var(--primary-gold);
    --dots-dot-background-line: #cecece;
    --dots-dot-mousehover-background: var(--primary-lightblue);
    --dots-dot-mousehover-text: var(--white);

    --left-menu-icon-page-current: var(--primary-contrast);
    --left-menu-icon-page-done: var(--sec-green);
    --left-menu-icon-page-remark: var(--primary-contrast);
    --left-menu-icon-page-results: var(--primary-gold);

    --content-table-background: var(--lightgrey);
    --content-table-border: var(--grey-border);

    --content-iframe-border: var(--lightgrey);

    --content-em-kleur2: var(--sec-green);
    --content-antwoord-background: #e2f3e7;   /* Heel zacht groen voor antwoordvlak */
    --content-antwoord-border: var(--primary-green);

    --content-tabel-x1-background: var(--lightgrey);
    --content-tabel-x1-text: var(--sec-green);

    --content-tabel-tabel2-td-background: var(--white);
    --content-tabel-tabel2-td-border: var(--lightgrey);
    --content-tabel-tabel2-th-background: var(--lightgrey);
    --content-tabel-tabel2-th-border: var(--lightgrey);
    --content-tabel-tabel2-th-text: var(--sec-green);

    --content-tabel-tabel3-td-background: #e2f3e7;
    --content-tabel-tabel3-td-border: var(--primary-green);
    --content-tabel-tabel3-th-background: var(--sec-green);
    --content-tabel-tabel3-th-border: var(--font-color);
    --content-tabel-tabel3-th-text: var(--white);

    --content-ct_tblstyle1-border: #d35400;
    --content-ct_tblstyle1-th-background: var(--primary-contrast); /* Oranje tabelaccenten */
    --content-ct_tblstyle1-th-border: #d35400;
    --content-ct_tblstyle1-th-text: var(--white);
    --content-ct_tblstyle1-td-background: #fdf2eb;
    --content-ct_tblstyle1-td-border: #d35400;
    --content-ct_tblstyle1-td-text: var(--font-color);


    --content-em-text: var(--primary-contrast);                /* Belangrijke text-accenten nu in jouw oranje */
    --content-b-strong-text: var(--primary-contrast);         /* Sterke tekst ook in oranje */
    --content-kantlijn-text: var(--primary-green);
    --content-code-text: #00A3E0;
    --content-code-background: inherit;

    --content-voorbeeld-background: var(--lightgrey);
    --content-voorbeeld-let-op: #ffbe00;

    --content-blockquote-background: #EDEDED;
    --content-blockquote-border-left: #216d43;
    --content-blockquote-text: #555555;
    --content-blockquote-before: #35ad69;


    --right-margin-icon-badge-background: linear-gradient(0deg, rgba(255, 208, 0, 1) 0%, var(--primary-gold) 100%);
    --right-margin-icon-badge-text: var(--white);
    --right-margin-icon-badge-overlay-background: var(--white);
    --right-margin-icon-badge-overlay-border: #e0e0e0;

    --right-margin-icon-kantlijn-background: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --right-margin-icon-kantlijn-text: var(--white);
    --right-margin-kantlijn-overlay-background: var(--white);

    --right-margin-icon-teacher-background: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --right-margin-icon-teacher-background-hover: linear-gradient(0deg, var(--primary-green) 0%, var(--sec-green) 100%);
    --right-margin-icon-teacher-text: var(--white);
    --right-margin-icon-teacher-text-hover: var(--white);

    --right-margin-icon-correctie-background: linear-gradient(0deg, var(--sec-green) 0%, var(--primary-green) 100%);
    --right-margin-icon-correctie-background-hover: linear-gradient(0deg, var(--primary-green) 0%, var(--sec-green) 100%);
    --right-margin-icon-correctie-background-text: var(--white);

    --post-it-background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    --post-it-text-header: black;
    --post-it-text-content: #333;

    --docent-admin-opties-menu-background: var(--sec-green);
    --docent-admin-opties-menu-background-divider: var(--primary-green);
    --docent-admin-opties-menu-item-text: var(--white);
    --docent-admin-opties-menu-item-hover-background: var(--primary-green);
    --docent-admin-opties-menu-item-hover-text: var(--white);

    --readspeaker-background: var(--white);
    --readspeaker-text: var(--sec-green);


    /* Resultaten pagina */
    --resultaten-voortgang-bar: var(--primary-green);
    --resultaten-tabel-a: var(--font-color);
    --resultaten-tabel-a-hover: var(--sec-green);


    /* Zoeken */
    --search-page-table-border: #ccc;
    --search-page-table-th-background: var(--grey);
    --search-page-result-button-background: var(--sec-green);
    --search-page-result-button-border: var(--sec-green);
    --search-page-result-button-text: var(--white);
    --search-page-result-button-background-hover: var(--primary-contrast); /* Oranje hover bij zoeken */
    --search-page-result-button-border-hover: var(--primary-contrast);
    --search-page-result-button-text-hover: var(--white);

    /* Berichten */
    --unread-message-datum-background: var(--primary-green);  /* Ongelezen valt nu direct op door oranje */
    --unread-message-datum-text: var(--white);
    --active-message-datum-background: var(--primary-contrast);
    --active-message-datum-text: #212529;
    --read-message-datum-background: var(--grey);
    --read-message-datum-text: #212529;


    /* Werkvormen */
    --werkvorm-titel: var(--sec-green);
    --werkvorm-background: var(--lightgrey);
    --werkvorm-feedback-background: var(--sec-green);
    --werkvorm-feedback-text: var(--white);
    --werkvorm-feedback-hyperlink-text: #FF9E66;
    --werkvorm-feedback-docent-background: var(--primary-contrast);
    --werkvorm-feedback-docent-text: black;

    --optionbox-checkbox-checked-color: var(--primary-green);

    --werkvorm-type0-optionbox-background: var(--white);
    --werkvorm-type0-optionbox-border: var(--grey-border);
    --werkvorm-type0-optionbox-text: var(--font-color);
    --werkvorm-type0-optionbox-border-hover: var(--primary-green);
    --werkvorm-type0-optionbox-background-answered: var(--lightgrey);
    --werkvorm-type0-optionbox-border-correct: var(--primary-green);
    --werkvorm-type0-optionbox-border-wrong: #E30613;/*var(--sec-red);*/
    --werkvorm-type0-optionbox-mark-correct: green;
    --werkvorm-type0-optionbox-mark-wrong: red;
    --werkvorm-type0-optionbox-shadow-correct: 0 2px 10px 1px rgba(0, 0, 0, 0.22);

    --werkvorm-type6-optionbox-background: var(--white);
    --werkvorm-type6-optionbox-border: var(--grey-border);
    --werkvorm-type6-optionbox-text: var(--font-color);
    --werkvorm-type6-optionbox-border-hover: var(--primary-green);
    --werkvorm-type6-optionbox-background-answered: var(--lightgrey);
    --werkvorm-type6-optionbox-border-correct: var(--primary-green);
    --werkvorm-type6-optionbox-border-wrong: #E30613;/*var(--sec-red);*/
    --werkvorm-type6-optionbox-mark-correct: green;/*var(--primary-green);*/
    --werkvorm-type6-optionbox-mark-wrong: red;/*var(--primary-red);*/
    --werkvorm-type6-optionbox-shadow-correct: 0 2px 10px 1px rgba(0, 0, 0, 0.22);
    --werkvorm-type6-optionbox-text-muted: var(--grey);

    --werkvorm-type7-optionbox-background: var(--white);
    --werkvorm-type7-optionbox-border: var(--grey-border);
    --werkvorm-type7-optionbox-text: var(--font-color);
    --werkvorm-type7-button-background: var(--white);
    --werkvorm-type7-button-background-selected: var(--sec-green);
    --werkvorm-type7-button-background-right: #2d5c39;
    --werkvorm-type7-button-background-wrong: var(--sec-red);

    --werkvorm-type8-optionbox-background: var(--white);
    --werkvorm-type8-optionbox-border: var(--grey-border);
    --werkvorm-type8-optionbox-text: var(--font-color);
    --werkvorm-type8-optionbox-border-hover: var(--primary-green);

    --werkvorm-type12-drag-button-background: var(--primary-green);
    --werkvorm-type12-drag-button-text: #1b3a52;
    --werkvorm-type12-drag-button-delete-background: var(--sec-red);
    --werkvorm-type12-drag-button-delete-text: var(--white);

    --werkvorm-type17-info-background: var(--primary-green);
    --werkvorm-type17-info-text: var(--white);

    --werkvorm-type30-correct-answer: #2d5c39;

    --werkvorm-type31-correct-answer: #2d5c39;

    --werkvorm-type50-optionbox-background: var(--white);
    --werkvorm-type50-optionbox-border: var(--grey-border);
    --werkvorm-type50-optionbox-text: var(--font-color);
    --werkvorm-type50-optionbox-border-hover: var(--primary-green);
    --werkvorm-type-50-progressbar: var(--primary-green);


    /* Code voor btn-blue enz. EN ook de badges (bootstrap) */

    --btn-blue-background: var(--sec-green);           /* Nu een rustige, breed inzetbare diepgroene knop */
    --btn-blue-background-hover: #366b44;     /* Iets lichter groen bij hover */
    --btn-blue-text: var(--white);
    --btn-blue-text-hover: var(--white);

    --btn-outline-blue-background: rgba(34, 71, 45, 0);
    --btn-outline-blue-background-hover: var(--sec-green);
    --btn-outline-blue-border: var(--sec-green);
    --btn-outline-blue-text: var(--sec-green);
    --btn-outline-blue-text-hover: var(--white);

    --btn-pink-background: var(--primary-pink);           /* Elegant oudroze, matcht prachtig met groen */
    --btn-pink-background-hover: var(--sec-pink);
    --btn-pink-text: #212529;
    --btn-pink-text-hover: #212529;

    --btn-yellow-background: var(--primary-contrast);         /* TIP: Maak van 'yellow' je unieke, felle ORANJE actieknop! */
    --btn-yelllow-background-hover: #d35400;
    --btn-yellow-text: #212529;
    --btn-yellow-text-hover: #212529;

    --btn-grey-background: var(--grey);
    --btn-grey-background-hover: var(--darkgrey);
    --btn-grey-text: var(--white);
    --btn-grey-text-hover: var(--white);

    --btn-green-background: var(--sec-green);          /* Groene knop krijgt de diepe bosgroene kleur */
    --btn-green-background-hover: var(--primary-green);    /* Lichtgroene hover */
    --btn-green-text: var(--white);
    --btn-green-text-hover: var(--white);

    --btn-outline-green-background: rgba(34, 71, 45, 0);
    --btn-outline-green-background-hover: var(--sec-green);
    --btn-outline-green-border: var(--sec-green);
    --btn-outline-green-text: var(--sec-green);
    --btn-outline-green-text-hover: var(--white);

    --btn-outline-white-background: rgba(255, 255, 255, 0);
    --btn-outline-white-background-hover: rgba(255, 255, 255, 1);
    --btn-outline-white-border: var(--white);
    --btn-outline-white-text: var(--white);
    --btn-outline-white-text-hover: var(--sec-green);


    --badge-orange-background: #f2aa50;
    --badge-orange-text: var(--white);

    --badge-danger-background: darkred;
    --badge-danger-text: var(--white);

    --badge-success-background: green;
    --badge-success-text: var(--white);

    --alert-info-background: #D2EEFC;
    --alert-info-border: #D2EEFC;
    --alert-info-text: #000000;

    --text-bg-primary-background: var(--sec-green);
    --text-bg-primary-text: var(--white);
}

/* Donkere weergave (darkmode). Alleen de kleuren die anders zijn dan hierboven; de rest blijft gelijk. */
[data-bs-theme="dark"] {

    /* Vlakken, van donker naar licht: pagina, blok, vlak in een blok, vlak onder de muis */
    --thema-pagina: #141614;
    --thema-blok: #1e201e;
    --thema-vlak: #282a28;
    --thema-vlak-hover: #333633;
    --thema-tekst-zacht: #a6aba7;
    --thema-accent-tekst: #88be96;          /* Lichtgroen dat leesbaar is op de donkere vlakken */

    /* Algemene kleuren */
    --grey: #6d7a72;
    --darkgrey: #a3b3a8;
    --grey-border: #35433a;
    --lightgrey: var(--thema-vlak);
    --font-color: #e4ebe6;
    --hyperlink-color: #ff8d4f;
    --hyperlink-hover-color: var(--thema-accent-tekst);

    /* Diversen */
    --primary-red: #e5484d;                   /* Helderder rood, voor randen en kruisjes op donker */

    /* Bootstrap */
    --bs-body-bg: var(--thema-pagina);
    --bs-body-bg-rgb: 17, 24, 19;
    --bs-body-color: var(--font-color);
    --bs-body-color-rgb: 228, 235, 230;
    --bs-secondary-bg: var(--thema-vlak);
    --bs-secondary-bg-rgb: 35, 46, 39;
    --bs-tertiary-bg: var(--thema-blok);
    --bs-tertiary-bg-rgb: 26, 35, 29;
    --bs-secondary-color: rgba(228, 235, 230, 0.75);
    --bs-tertiary-color: rgba(228, 235, 230, 0.5);
    --bs-border-color: var(--grey-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

    /* Top menu */
    --top-menu-icon-text: var(--font-color);
    --top-menu-dropdown-background: #22372a;
    --top-menu-dropdown-item-disabled: #3a463f;

    /* Wave */
    --wave-gradient1: #16301f;
    --wave-gradient2: #2a5837;

    /* Startpagina */
    --box-gamification-level-progress-bar-text: #16261b;
    --dropdown-background: rgba(26, 35, 29, 0.6);
    --content-blok-background: var(--lightgrey);

    /* Algemeen */
    --background-divs: var(--thema-blok);
    --content-blok-voortgang-bar-background: #35433a;
    --footer-text: #6d7a72;

    /* Content pagina */
    --dots-dot-done-background: #2d5c39;
    --dots-dot-background-line: #35433a;
    --dots-dot-open-background: var(--thema-vlak-hover);
    --dots-dot-open-text: var(--font-color);
    --left-menu-icon-page-done: var(--primary-green);

    --content-em-kleur2: var(--thema-accent-tekst);
    --content-antwoord-background: #1f3a28;

    --content-tabel-x1-text: var(--thema-accent-tekst);
    --content-tabel-tabel2-td-background: var(--thema-blok);
    --content-tabel-tabel2-th-text: var(--thema-accent-tekst);
    --content-tabel-tabel3-td-background: #1f3a28;
    --content-tabel-tabel3-th-border: var(--grey-border);
    --content-ct_tblstyle1-td-background: #33261c;

    --content-code-text: #4fc3f7;

    --content-blockquote-background: var(--thema-vlak);
    --content-blockquote-border-left: #35ad69;
    --content-blockquote-text: #c3cec7;

    --right-margin-icon-badge-overlay-background: var(--thema-vlak);
    --right-margin-icon-badge-overlay-border: var(--grey-border);
    --right-margin-kantlijn-overlay-background: var(--thema-vlak);

    --readspeaker-background: var(--thema-vlak);
    --readspeaker-text: var(--thema-accent-tekst);

    /* Resultaten pagina */
    --resultaten-tabel-a-hover: var(--thema-accent-tekst);

    /* Zoeken */
    --search-page-table-border: var(--grey-border);
    --search-page-table-th-background: var(--thema-vlak);

    /* Berichten */
    --read-message-datum-background: #55625a;

    /* Werkvormen */
    --werkvorm-titel: var(--thema-accent-tekst);
    --werkvorm-feedback-background: #24432d;

    --werkvorm-type0-optionbox-background: var(--thema-vlak-hover);
    --werkvorm-type6-optionbox-background: var(--thema-vlak-hover);
    --werkvorm-type7-optionbox-background: var(--thema-vlak-hover);
    --werkvorm-type7-button-background: var(--thema-blok);
    --werkvorm-type8-optionbox-background: var(--thema-vlak-hover);
    --werkvorm-type50-optionbox-background: var(--thema-vlak-hover);

    /* Knoppen en badges */
    --btn-outline-blue-border: var(--thema-accent-tekst);
    --btn-outline-blue-text: var(--thema-accent-tekst);
    --btn-outline-green-border: var(--thema-accent-tekst);
    --btn-outline-green-text: var(--thema-accent-tekst);
    --btn-grey-background: #55625a;
    --btn-grey-background-hover: #6d7a72;

    --alert-info-background: #12303f;
    --alert-info-border: #1d4f68;
    --alert-info-text: #d6efff;

    /* Code met syntaxkleuring */
    --code-tekst: #e4ebe6;
    --code-commentaar: #8b9a90;
    --code-tekenreeks: #ff9d8a;
    --code-sleutelwoord: #5fd0c5;
    --code-naam: #7fcf95;
    --code-titel: #ffb86b;
    --code-type: #9ecbff;
    --code-meta: #b9b5ff;
}