: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   : var(--cp-primary-50);
    --b2c-panel-background : white;
    --b2c-body-background  : var(--cp-primary-50);

    --cp-primary-50 : #e0f0ff;
    --cp-primary-100: #7fcff5;
    --cp-primary-200: #27afee;
    --cp-primary-300: #0193dc;
    --cp-primary-400: #0170b4;
    --cp-primary-500: #005192;
    --cp-primary-600: #00447a;
    --cp-primary-700: #003662;
    --cp-primary-800: #00294b;
    --cp-primary-900: #001d35;

    --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-light-text-color);
    --cp-primary-contrast-400: var(--cp-light-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 : #fef9e4;
    --cp-accent-100: #fef4cb;
    --cp-accent-200: #feeeb1;
    --cp-accent-300: #fee998;
    --cp-accent-400: #fee37e;
    --cp-accent-500: #fedd62;
    --cp-accent-600: #d6b94d;
    --cp-accent-700: #ae9639;
    --cp-accent-800: #655512;
    --cp-accent-900: #433700;

    --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-dark-text-color);
    --cp-accent-contrast-800: var(--cp-light-text-color);
    --cp-accent-contrast-900: var(--cp-light-text-color);
}

mat-toolbar.mat-toolbar.mat-primary a.mdc-button.navbar-header-item-selected,
mat-toolbar.mat-toolbar.mat-primary button.mdc-button.navbar-header-item-selected {
    color     : var(--cp-primary-500) !important;
    background: var(--cp-primary-50) !important;
}

mat-toolbar.mat-toolbar.mat-primary a.mdc-button:hover,
mat-toolbar.mat-toolbar.mat-primary button.mdc-button:hover {
    color: var(--cp-primary-500) !important;
}