:root {
    --cp-font-family       : "Source Sans 3";
    --cp-dark-text-color   : rgba(0, 0, 0, 0.87);
    --cp-light-text-color  : white;
    --cp-toolbar-text-color: var(--cp-primary-500);
    --cp-toolbar-background: white;
    --cp-body-background   : rgba(29, 29, 27, 0.05);
    --b2c-body-background  : var(--cp-primary-500);
    --b2c-panel-background : rgba(29, 29, 27, 0.05);

    --cp-primary-50 : #fcfcff;
    --cp-primary-100: #f7f9ff;
    --cp-primary-200: #cce5ff;
    --cp-primary-300: #91cdff;
    --cp-primary-400: #56b3f5;
    --cp-primary-500: #28357e;
    --cp-primary-600: #03283a;
    --cp-primary-700: #021a25;
    --cp-primary-800: #01111a;
    --cp-primary-900: #001e31;

    --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 : #fffbff;
    --cp-accent-100: #fff8ef;
    --cp-accent-200: #fff0c7;
    --cp-accent-300: #ffe17c;
    --cp-accent-400: #ecc300;
    --cp-accent-500: #fed02a;
    --cp-accent-600: #cca800;
    --cp-accent-700: #8e7500;
    --cp-accent-800: #483a00;
    --cp-accent-900: #231b00;

    --cp-accent-contrast-50 : var(--cp-dark-text-color);
    --cp-accent-contrast-100: var(--cp-dark-text-color);
    --cp-accent-contrast-200: var(--cp-dark-text-color);
    --cp-accent-contrast-300: var(--cp-dark-text-color);
    --cp-accent-contrast-400: var(--cp-dark-text-color);
    --cp-accent-contrast-500: var(--cp-dark-text-color);
    --cp-accent-contrast-600: var(--cp-dark-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 {
    color: var(--cp-dark-text-color) !important;

    .mdc-button {
        --cp-primary-contrast-500: var(--cp-primary-400);
    }

    .mdc-button.navbar-header-item-selected,
    .navbar-header-item-selected {
        --cp-primary-contrast-500: var(--cp-primary-400);
        background-color         : var(--cp-primary-100) !important;
    }
}