:root {
    --cp-font-family       : 'Source Sans 3';
    --cp-dark-text-color   : #222222;
    --cp-light-text-color  : white;
    --cp-toolbar-background: white;
    --cp-body-background   : #ededed;
    --b2c-body-background  : #cbcbcb;
    --b2c-panel-background : #ededed;

    --cp-primary-50 : #ffbba9;
    --cp-primary-100: #ffa086;
    --cp-primary-200: #ff8364;
    --cp-primary-300: #ff6342;
    --cp-primary-400: #ff6342;
    --cp-primary-500: #d60002;
    --cp-primary-600: #bf2e1d;
    --cp-primary-700: #832418;
    --cp-primary-800: #4a1811;
    --cp-primary-900: #180601;

    --cp-primary-contrast-50 : var(--cp-dark-text-color);
    --cp-primary-contrast-100: var(--cp-dark-text-color);
    --cp-primary-contrast-200: var(--cp-dark-text-color);
    --cp-primary-contrast-300: var(--cp-dark-text-color);
    --cp-primary-contrast-400: var(--cp-dark-text-color);
    --cp-primary-contrast-500: var(--cp-light-text-color);
    --cp-primary-contrast-600: var(--cp-light-text-color);
    --cp-primary-contrast-700: var(--cp-light-text-color);
    --cp-primary-contrast-800: var(--cp-light-text-color);
    --cp-primary-contrast-900: var(--cp-light-text-color);

    --cp-accent-50 : #b5b5b5;
    --cp-accent-100: #8e8e8e;
    --cp-accent-200: #686868;
    --cp-accent-300: #454545;
    --cp-accent-400: #252525;
    --cp-accent-500: #000000;
    --cp-accent-600: #000000;
    --cp-accent-700: #000000;
    --cp-accent-800: #000000;
    --cp-accent-900: #000000;

    --cp-accent-contrast-50 : var(--cp-dark-text-color);
    --cp-accent-contrast-100: var(--cp-dark-text-color);
    --cp-accent-contrast-200: var(--cp-light-text-color);
    --cp-accent-contrast-300: var(--cp-light-text-color);
    --cp-accent-contrast-400: var(--cp-light-text-color);
    --cp-accent-contrast-500: var(--cp-light-text-color);
    --cp-accent-contrast-600: var(--cp-light-text-color);
    --cp-accent-contrast-700: var(--cp-light-text-color);
    --cp-accent-contrast-800: var(--cp-light-text-color);
    --cp-accent-contrast-900: var(--cp-light-text-color);
}

.mat-toolbar.mat-primary {
    .mdc-button {
        color: var(--cp-dark-text-color) !important;

        &:hover {
            --cp-primary-contrast-500: var(--cp-primary-500);
        }
    }
}

.navbar-header-item-selected {
    --cp-primary-contrast-500: var(--cp-primary-500);
}