/**
* Color variables
*/
:root{
    --pk-page-bg-color: #ffffff;
    --pk-heading-color: #201e48;
    --pk-text-color: #4d4b6d;

    --page-bg: #ffffff;

    --brand-primary-purple: #201E48;
    --brand-primary-beige: #FEFEF7;

    --brand-secondary-orange: #EA4A00;

    --brand-tertiary-green: #3BC48B;
    --brand-tertiary-error: #EB4845;
    --brand-tertiary-white: #FFFFFF;

    --text-color-1: var(--brand-purple-4);
    --text-color-2: var(--brand-primary-purple);

    --brand-purple-1: #E9E8ED;
    --brand-purple-2: #D2D2DA;
    --brand-purple-3: #a6a5b6;
    --brand-purple-4: #797891;
    --brand-purple-5: #4D4B6D;
    --brand-purple-6: #1A183A;
    --brand-purple-7: #13122B;
    --brand-purple-8: #0D0C1D;

    --brand-yellow-beige-1: #FFFFFD;
    --brand-yellow-beige-2: #FFFFFC;
    --brand-yellow-beige-3: #FEFEFA;
    --brand-yellow-beige-4: #FEFEF9;
    --brand-yellow-beige-5: #CBCBC6;
    --brand-yellow-beige-6: #989894;
    --brand-yellow-beige-7: #666663;
    --brand-yellow-beige-8: #494847;

    --brand-orange-1: #FCDBCC;
    --brand-orange-2: #F8B799;
    --brand-orange-3: #F59467;
    --brand-orange-4: #F17034;
    --brand-orange-5: #BE3D01;
    --brand-orange-6: #A73501;
    --brand-orange-7: #5F1E00;

    --brand-green-1: #D8F3E8;
    --brand-green-2: #B1E7D1;
    --brand-green-3: #89DCB9;
    --brand-green-4: #62D0A2;
    --brand-green-5: #2F9D6F;
    --brand-green-6: #237653;
    --brand-green-7: #184E38;

    --brand-red-1: #FBDADA;
    --brand-red-2: #F7B6B5;
    --brand-red-3: #F3918F;
    --brand-red-4: #EF6D6A;
    --brand-red-5: #BC3A37;
    --brand-red-6: #8D2B29;
    --brand-red-7: #5E1D1C;
}

/**
* Grid variables
*/
:root{
    --container-width: 1216px;
    --site-gutter: 24px;
    --column-gap: 32px;
    --row-spacing: 32px;
}

/**
* Font variables
*/
:root{
    --pk-heading-font-family: 'Helvena';
    --pk-heading-font-weight: 600;
    --pk-heading-line-height: 1.2;

    --heading-3xl: 72px;
    --heading-2xl: 48px;
    --heading-xl: 40px;
    --heading-lg: 32px;
    --heading-md: 24px;
    --heading-sm: 20px;
    --heading-xs: 16px;

    --body-xl: 24px;
    --body-lg: 20px;
    --body-md: 18px;
    --body-sm: 14px;
    --body-xs: 12px;

    --pk-text-line-height: 1.5;
    --pk-text-font-family: 'Helvena';
    --pk-text-font-weight: 400;

    --text-desktop-font-size: 18px;
    --text-tablet-font-size: 16px;
    --text-mobile-font-size: 16px;
}

/**
* Button variables
*/
:root{
    --button-font-size: 16px;
    --pk-button-font-family: 'Helvena';
    --pk-button-font-weight: 700;
}




/**
* Relative scaling
*/
:root{
    --pk-container-width: var(--container-width);
    --pk-site-gutter: var(--site-gutter);
    --pk-column-gap: var(--column-gap);
    --pk-row-spacing: var(--row-spacing);

    --pk-button-font-size: var(--button-font-size);
}

body.relative-scaling{
    --pk-column-gap: calc((var(--column-gap) / 16px) * var(--su));
    --pk-row-spacing: calc((var(--row-spacing) / 16px) * var(--su));
    --pk-site-gutter: calc((var(--site-gutter) / 16px) * var(--su));

    --pk-button-font-size: calc((var(--button-font-size) / 16px) * var(--su));
    --pk-text-font-size: max(var(--text-mobile-font-size), calc((var(--text-desktop-font-size) / 16px) * var(--su)));
}

body {
    --pk-text-desktop-font-size: var(--body-md);
}

body.doelgroep-grootzakelijk {
    --page-bg: var(--brand-purple-1);
}

body .pk-page .pk-heading .pk-heading-text b {
    color: var(--brand-secondary-orange); font-weight: inherit;
}

body .pk-page h1 {
    font-size: var(--heading-3xl);
    font-weight: 700;
    line-height: 1.1;
}
body .pk-page h2 {
    font-size: var(--heading-2xl);
    font-weight: 600;
    line-height: 1.25;
}
body .pk-page h3 {
    font-size: var(--heading-lg);
    font-weight: 600;
    line-height: 1.25;
}
body .pk-page h4 {
    font-size: var(--heading-sm);
    font-weight: 600;
    line-height: 1.3;
}

@media only screen and (min-width: 993px){
    :root{
        --pk-text-font-size: var(--text-desktop-font-size);
    }
}

@media only screen and (max-width: 992px){
    :root{
        --pk-text-font-size: var(--text-tablet-font-size);
    }
}

@media only screen and (max-width: 767px){
    :root{
        --pk-text-font-size: var(--text-mobile-font-size);
    }

    body {
        --pk-column-gap: 24px;
    }

    body .pk-page h1 {
        font-size: var(--heading-xl);
    }
    body .pk-page h2 {
        font-size: var(--heading-lg);
    }
    body .pk-page h3 {
        font-size: var(--heading-md);
    }
    body .pk-page h4 {
        font-size: var(--heading-xs);
    }
}

@media only screen and (min-width: 993px) and (max-width: 1407px){
    body .pk-page h1 {
        font-size: var(--heading-2xl);
    }
    body .pk-page h2 {
        font-size: var(--heading-xl);
    }
    body .pk-page h3 {
        font-size: var(--heading-md);
    }
    body .pk-page h4 {
        font-size: var(--heading-xs);
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px){
    body .pk-page h1 {
        font-size: var(--heading-2xl);
    }
    body .pk-page h2 {
        font-size: var(--heading-xl);
    }
    body .pk-page h3 {
        font-size: var(--heading-md);
    }
    body .pk-page h4 {
        font-size: var(--heading-xs);
    }
}