:root, html, * {
    /* color schema */
    --primary-color: #030303;
    --primary-color-light: #75787B;
    --secondary-color: #003E51;
    --tertiary-color: #95572B;
    --brand-white: #FFFFFF;
    --brand-black: #030303;
    --light-black: #211E1E;
    --light-grey: #A4A4A4;
    --color-adjusted-peacock: #016072;
    --color-desert-sand: #D9CEBD;
    --border-color: #D6D6D6;
    --text-color: #030303;
    --brand-light-grey: #707070;
    --background-color: #F5F5F5;
    --color-grey-70: #4c4c4c;
    --color-grey-30: #f2f2f2;
    --brand-red: #FF4907;
    --color-disabled: #949494;
    --link-color: #0A6173;
    --footer-background: var(--background-color);
    /* alert/error info */
    --alert-danger-color: #a94442;
    --alert-danger-background: #f2dede;
    --alert-danger-border-color: #f2dede;

    /* font styling */
    --font-family: 'CupraType', Helvetica, Arial, sans-serif;
    --font-family-headlines: 'CupraType', Helvetica, Arial, sans-serif;
    --font-color: #030303;
    --font-family-text: 'CupraType', Helvetica, Arial, sans-serif;
    --h1-size: 2.667rem;
    --h1-line-height: 3.333rem;
    --h2-size: 2.333rem;
    --h2-line-height: 3rem;
    --h3-size: 1.778rem;
    --h3-line-height: 2.444rem;
    --h4-size: 1.333rem;
    --h4-line-height: 1.889rem;
    --text-size-s: 14px;

    /* special effects styling */
    --transition-duration: 0.2s;
    --border-radius: 0rem;

    /* margin, padding, widths */
    --content-width: 100%;
    --grid-gutter: 32px;

    /* LWC overrule variables */
    --overrule-profiel-menu-primary-color: var(--secondary-color);
    --lwc-navigationMaxWidth: var(--content-width);

    /* Button Variables */
    --primaryBtnHoverBackground: var( --secondary-color );
    --primaryBtnHoverColor: var( --brand-white );
    --secondaryBtnHoverBorder: var(--secondary-color);
    --secondaryBtnHoverBackground: var( --brand-black );
    --secondaryBtnHoverColor: var( --secondary-color );
    --primaryBtnDisabledBorder: var( --color-disabled );
}

@media screen and ( min-width: 1024px ) {
    :root, html, * {
        --content-width: 1680px;
    }
}

@media ( max-width: 767px ) {
    :root, html, * {
        --content-width: 94%;
    }
}