:root, html, * {
    /* color schema */
    --primary-color-300: #774726;
    --primary-color: #95572B;
    --primary-color-100: #A96B3F;
    --primary-desert-sand: #D9CEBD;

    --secondary-color-300: #000000;
    --secondary-color: #1B1B1B;
    --secondary-color-100: #404040;

    --neutral-color-500: #444444;
    --neutral-color-400: #A4A4A4;
    --neutral-color-300: #DDDDDD;
    --neutral-color-200: #F3F3F3;
    --neutral-color-100: #FFFFFF;

    --brand-red: #D10000;
    --brand-black: #000000;
    --brand-white: #FFFFFF;
    --brand-font-color: #030303;
    --color-disabled: #949494;
    --input-label-color: #474747;
    --border-color: #E8E8E8;

    --dark-background-color: #242221;

    /* font styling */
    --font-family: 'CupraBook', Helvetica, Arial, sans-serif;

    /* special effects styling */
    --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);
    --lwc-colorTextDefault: var(--brand-font-color) !important;

    /* 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 );
    --alert-danger-color: var( --brand-red );
}