@import url('https://fonts.googleapis.com/css2?family=Righteous');

:root {
    
    /* -----------------
        Kleuren
    ----------------- */
    --primary-color: #002781;
    --secondary-color: #63acef;
    --cta-color: #5EB833;
    --error-color: #cd565b;
    --white: #ffffff;
    --black: #5c5d5c;

    /* -----------------
        Huisstijl
    ----------------- */
   
    --body-font-color: var(--black);
        /* Globale achtergrondkleur */
    --body-background: var(--white);
        /* Globaal lettertype */
    --body-font-family: 'Quicksand', sans-serif;
        /* Koptekst lettertype */
    --header-font-family: var(--body-font-family);
        /* Globale link kleur */
    --anchor: #012780;
        /* Koptekst kleur */
    --header-color: var(--primary-color);
        /* Globale afgeronde randen grootte */
    --global-border-radius: 40px;


    /*================================================ 
        Waar nodig onderstaande stijl aanpassen.
    ================================================*/

    /* -----------------
        Typografie
    ----------------- */

         /* Globale tekst grootte */
    --global-font-size: 16px;
        /* Standaard tekst dikte */
    --global-weight-light: 500;
        /* Dikke tekst dikte */
    --global-weight-normal: 600;
        /* Dikste tekst dikte */
    --global-weight-bold: 700;
        /* Knop lettertype */
    --button-font-family: var(--header-font-family);
        /* Primaire knop achtergrondkleur */
    --button-bg-primary-color: var(--primary-color);
        /* Secundaire knop achtergrondkleur */
    --button-bg-secondary-color: var(--secondary-color);
        /* CTA knop achtergrondkleur */
    --button-bg-cta-color: var(--cta-color);
        /* Knop afgeronde randen grootte */
    --button-border-radius: var(--global-border-radius);

    
    /* -----------------
        Header
    ----------------- */

        /* Header link kleur */
    --header-link-color: var(--body-font-color);
        /* Header icoon kleur */
    --header-icon-color: var(--primary-color);
        /* Header bijtekst kleur */
    --header-subtitle-color: var(--primary-color);

    
    
    /* -----------------
        Banner
    ----------------- */

        /* Banner tekstkleur */
    --hero-color: var(--white);
        /* Banner koptekst kleur */
    --hero-header-color: var(--white);
        /* Banner link kleur */
    --hero-link-color: var(--hero-header-color);
        /* Banner icoon kleur */
    --hero-icon-color: var(--secondary-color);
        /* Banner afgeronde randen grootte */
    --hero-bg-border-radius: var(--global-border-radius);
        /* Banner achtergrondkleur */
    --hero-bg-color: var(--primary-color);
        /* Banner plaatje afgeronde randen groote */
    --hero-image-border-radius: var(--global-border-radius);

    
    /* -----------------
        Icon block
    ----------------- */

        /* Icoon blokken koptekst kleur */
    --usp-header-color: var(--primary-color);
        /* Icoon blokken icoon kleur */
    --usp-icon-color: var(--secondary-color);

    /* ---Tekst blok met afbeelding links--- */
        /* Tekst blok koptekst kleur */
    --text-image-header-color: var(--primary-color);
        /* Tekst afgeronde randen grootte */
    --text-image-border-radius: var(--global-border-radius);

    
    /* --------------------
        Button block
    -------------------- */

        /* Knoppen blok achtergrondkleur */
        /* Zet als transparent om standaard kleur te behouden */
    --cta-bg-color: #ECF3F6;
        /* Formulier input kleur */
    --cta-form-color: var(--header-color);
        /* Formulier icoon kleur */
    --cta-form-icon-color: var(--secondary-color);
        /* Formulier input achtergrondkleur */
    --cta-form-bg-color: var(--white);
        /* Formulier radioknop kleur */
    --cta-radio-color: #dde7ee;

    
    /* ----------------------
        Downloads block
    ---------------------- */

        /* Downloads blok tekst kleur */
    --download-color: var(--body-font-color);
        /* Downloads blok koptekst kleur */
    --download-header-color: var(--primary-color);
        /* Downloads blok icoon kleur */
    --download-icon-color: var(--primary-color);
        /* Downloads blok subtekst kleur */
    --download-sub-color: var(--dark-gray);
        /* Downloads afgeronde randen grootte */
    --download-border-radius: calc(var(--global-border-radius) / 2);

    
    /* -----------------
        Footer
    ----------------- */

        /* Footer achtergrondkleur */
    --footer-bg-color: var(--primary-color);
        /* Footer tekstkleur */
    --footer-color: var(--white);

    
    /* -----------------
        Popup
    ----------------- */

        /* Pop-up tekstkleur */
    --pop-up-color: var(--white);
        /* Pop-up linkkleur */
    --pop-up-anchor-color: var(--white);
        /* Pop-up achtergrondkleur */
    --pop-up-bg-color: var(--primary-color);
        /* Pop-up afgeronde randen grootte */
    --pop-up-border-radius: var(--global-border-radius);

    
    /* -----------------
        Verificatie
    ----------------- */

        /* Verificatie pagina tekstkleur */
    --verification-page-color: var(--primary-color);
        /* Verificatie pagina linkkleur */
    --verification-page-anchor-color: var(--white);
        /* Verificatie pagina koptekst kleur */
    --verification-page-header-color: var(--primary-color);
        /* Verificatie pagina icoon kleur */
    --verification-page-icon-color: var(--secondary-color);
        /* Verificatie pagina afgeronde randen grootte */
    --verification-page-border-radius: var(--global-border-radius);
        /* Verificatie pagina achtergrond kleur */
    --verification-page-bg-color: var(--primary-color);
        /* Verificatie pagina blok achtergrond kleur */
    --verification-page-block-bg-color: var(--white);
        /* Verificatie pagina logo kleur inverteren */
        /* Zet als 0 om het uit te zetten */
    --verification-page-logo-invert;

}