:root {
    /* Color ramp bc-red */
    --bc-red-100: #FAE6E8;
    --bc-red-200: #F1BFC6;
    --bc-red-300: #E4808C;
    --bc-red-400: #D64053;
    --bc-red-500: #C80019; --bc-red-500-30: #C800194D; --bc-red-500-20: #C8001933; --bc-red-500-00: #C8001900;
    --bc-red-600: #960013; --bc-red-600-20: #96001333;
    --bc-red-700: #64000D; --bc-red-700-20: #64000D33;
    --bc-red-800: #320006;
    /* Color ramp slate-grey */
    --slate-grey-100: #F5F7F9;
    --slate-grey-200: #E6E9ED;
    --slate-grey-300: #D8DCE1;
    --slate-grey-400: #BDC3C9;
    --slate-grey-500: #A2A9B0;
    --slate-grey-600: #7F878F;
    --slate-grey-700: #5C656E; --slate-grey-700-30: #5C656E4D; --slate-grey-700-20: #5C656E33; --slate-grey-700-00: #5C656E00;
    --slate-grey-800: #394147;
    
    /* Color ramp bc-blue */
    --bc-blue-100: #EBECF0; --bc-blue-100-20: #EBECF033;
    --bc-blue-200: #CECED9;
    --bc-blue-300: #9C9EB2;
    --bc-blue-400: #6B6D8C;
    --bc-blue-500: #393C65;
    --bc-blue-600: #2B2D4C;
    --bc-blue-700: #1D1E33;
    --bc-blue-800: #0E0F19;
    /* Color ramp bc-grey */
    --bc-grey-100: #FEFEFE; --bc-grey-100-85: #FEFEFED9;
    --bc-grey-200: #F9F9F9;
    --bc-grey-300: #E6E6E6;
    --bc-grey-400: #C6C6C6;
    --bc-grey-500: #999999; --bc-grey-500-60: #99999999;
    --bc-grey-600: #565656;
    --bc-grey-700: #262626;
    --bc-grey-800: #090909;
    
    --black: #000000;
    --white: #FFFFFF;
    --yellow: #ffd900;
    --yellow-subtle: #fffadb;
    --yellow-emphasis: #665700;
    --orange: #ff8000;
    --orange-subtle: #FAF5E3;
    --orange-emphasis: #944306;
    --red: #990000;
    --red-subtle: #FFF1F2;
    --red-emphasis: #830423;
    --purple: #5200cc;
    --purple-subtle: #eadbff;
    --purple-emphasis: #290066;
    --blue: #000099;
    --blue-subtle: #dfe0fc;
    --blue-emphasis: #212831;   
    --green: #009900;
    --green-subtle: #DEF3E9;
    --green-emphasis: #035941;
    
    /* charts palettes */
    --bc-chart-palette-1: var(--bc-blue-700);
    --bc-chart-palette-2: var(--bc-blue-500);
    --bc-chart-palette-3: var(--bc-blue-300);
    --bc-chart-palette-4: var(--bc-blue-200);
    --bc-chart-palette-5: var(--bc-blue-100);
    
    /* metric colors */
    --bc-metric-1-foreground: #830423;
    --bc-metric-1-background: #FFF1F2;
    --bc-metric-2-foreground: #212831;
    --bc-metric-2-background: #E0E2FC;
    --bc-metric-3-foreground: #212831;
    --bc-metric-3-background: #E2E8F0;
    --bc-metric-4-foreground: #944306;
    --bc-metric-4-background: #FAF5E3;

    /* badge colors */
    --bc-badge-green-foreground: #035941;
    --bc-badge-green-background: #DEF3E9;
    --bc-badge-yellow-foreground: #944306;
    --bc-badge-yellow-background: #FAF5E3;
    --bc-badge-red-foreground: #830423;
    --bc-badge-red-background: #FFF1F2;
    --bc-badge-blue-foreground: #212831;
    --bc-badge-blue-background: #E0E2FC;

    
    /* Default Color Theme */
    /* Primary colors */
    --theme-primary-emphasis: var(--bc-red-600);
    --theme-primary-default: var(--bc-red-500);
    --theme-primary-muted: var(--bc-red-300);
    --theme-primary-subtle: var(--bc-red-100);
    --theme-secondary-emphasis: var(--slate-grey-800);
    --theme-secondary-default: var(--slate-grey-700);
    --theme-secondary-muted: var(--slate-grey-400);
    --theme-secondary-subtle: var(--slate-grey-100);
    --theme-grey-emphasis: var(--bc-grey-700);
    --theme-grey-default: var(--bc-grey-500);
    --theme-grey-muted: var(--bc-grey-300);
    --theme-grey-subtle: var(--bc-grey-100);
    
    --theme-default-foreground: var(--theme-grey-emphasis);
    
    --theme-default-background: var(--theme-grey-subtle);
    --theme-hover-background: var(--bc-grey-200);
    --theme-active-background: var(--bc-grey-400);
    --theme-selected-background: var(--theme-primary-subtle);
    /* top logo */
    /*--bcnav-logo-path: url("/media/images/bcNAV-logo-sidemenu-color.svg");*/
    /* Menu colors */
    --theme-menu-background: var(--theme-grey-muted);
    --theme-menu-scrollbar-background: var(--theme-grey-muted);
    --theme-menu-scrollbar-thumb: var(--bc-grey-500-60);
    --theme-menu-interactive-foreground: var(--theme-grey-emphasis);
    --theme-menu-interactive-hover-background: var(--bc-red-500-20);
    --theme-menu-interactive-active-border: var(--theme-grey-muted);
    --theme-menu-interactive-active-background: var(--bc-red-500-30);
    --theme-menu-interactive-focus-border: var(--theme-grey-muted);
    --theme-menu-interactive-focus-background: var(--bc-red-500-20);
    --theme-menu-interactive-selected-background: var(--theme-primary-default);
    --theme-menu-interactive-selected-foreground: var(--theme-primary-subtle);
    --theme-menu-interactive-selected-module-background: var(--bc-red-500-00);
    --theme-menu-interactive-selected-module-foreground: var(--theme-primary-default);
    --theme-menu-disabled-background: var(--theme-grey-muted);
    --theme-menu-disabled-foreground: var(--theme-grey-default);
    --theme-menu-badge-background: var(--theme-primary-default);
    --theme-menu-badge-foreground: var(--theme-primary-subtle);
    --theme-menu-badge-selected-background: var(--theme-primary-subtle);
    --theme-menu-badge-selected-foreground: var(--theme-primary-default);
    --theme-menu-accents-border: var(--theme-grey-default);
    --theme-menu-foreground: var(--theme-grey-emphasis);
    /* Page colors */
    --theme-page-background: var(--theme-grey-subtle);
    --theme-page-background-85: var(--bc-grey-100-85);
    
    /*#region Button colors */
    /* Filled Primary buttons */
    --theme-button-primary-filled-background: var(--theme-primary-default);
    --theme-button-primary-filled-foreground: var(--theme-primary-subtle);
    
    --theme-button-primary-filled-hover-background: var(--theme-primary-emphasis);
    --theme-button-primary-filled-hover-foreground: var(--theme-primary-subtle);
    
    --theme-button-primary-filled-active-background: var(--theme-primary-default);
    --theme-button-primary-filled-active-foreground: var(--theme-primary-subtle);
    
    --theme-button-primary-filled-focus-background: var(--theme-primary-default);
    --theme-button-primary-filled-focus-foreground: var(--theme-primary-subtle);
    --theme-button-primary-filled-focus-shadow: var(--theme-primary-default);
    --theme-button-primary-filled-focus-outline: var(--theme-primary-subtle);
    
    --theme-button-primary-filled-disabled-background: var(--theme-primary-default);
    --theme-button-primary-filled-disabled-foreground: var(--theme-primary-subtle);
    
    /* Filled Secondary buttons */
    --theme-button-secondary-filled-background: var(--theme-secondary-default);
    --theme-button-secondary-filled-foreground: var(--theme-secondary-subtle);
    
    --theme-button-secondary-filled-hover-background: var(--theme-secondary-emphasis);
    --theme-button-secondary-filled-hover-foreground: var(--theme-secondary-subtle);
    
    --theme-button-secondary-filled-active-background: var(--theme-secondary-emphasis);
    --theme-button-secondary-filled-active-foreground: var(--theme-secondary-subtle);
    
    --theme-button-secondary-filled-focus-background: var(--theme-secondary-default);
    --theme-button-secondary-filled-focus-foreground: var(--theme-secondary-subtle);
    --theme-button-secondary-filled-focus-shadow: var(--theme-secondary-default);
    --theme-button-secondary-filled-focus-outline: var(--theme-secondary-subtle);
    
    --theme-button-secondary-filled-disabled-background: var(--theme-secondary-default);
    --theme-button-secondary-filled-disabled-foreground: var(--theme-secondary-subtle);
    /* Primary outline buttons */
    --theme-button-primary-outline-background: var(--theme-default-background);
    --theme-button-primary-outline-foreground: var(--theme-primary-default);
    --theme-button-primary-outline-border: var(--theme-primary-default);
    
    --theme-button-primary-outline-hover-background: var(--bc-red-500-20);
    --theme-button-primary-outline-hover-foreground: var(--theme-primary-emphasis);
    --theme-button-primary-outline-hover-border: var(--theme-primary-default);
    
    --theme-button-primary-outline-active-background: var(--bc-red-500-30);
    --theme-button-primary-outline-active-foreground: var(--theme-primary-emphasis);
    --theme-button-primary-outline-active-border: var(--theme-primary-default);
    
    --theme-button-primary-outline-focus-background: var(--bc-red-500-20);
    --theme-button-primary-outline-focus-foreground: var(--theme-primary-emphasis);
    --theme-button-primary-outline-focus-border: var(--theme-primary-default);
    
    --theme-button-primary-outline-disabled-background: var(--theme-default-background);
    --theme-button-primary-outline-disabled-foreground: var(--theme-primary-default);
    --theme-button-primary-outline-disabled-border: var(--theme-primary-default);
    /* Secondary outline buttons */
    --theme-button-secondary-outline-background: var(--theme-default-background);
    --theme-button-secondary-outline-foreground: var(--theme-secondary-default);
    --theme-button-secondary-outline-border: var(--theme-secondary-default);
    
    --theme-button-secondary-outline-hover-background: var(--slate-grey-700-20);
    --theme-button-secondary-outline-hover-foreground: var(--theme-secondary-emphasis);
    --theme-button-secondary-outline-hover-border: var(--theme-secondary-default);
    
    --theme-button-secondary-outline-active-background: var(--slate-grey-700-30);
    --theme-button-secondary-outline-active-foreground: var(--theme-secondary-emphasis);
    --theme-button-secondary-outline-active-border: var(--theme-secondary-default);
    
    --theme-button-secondary-outline-focus-background: var(--slate-grey-700-20);
    --theme-button-secondary-outline-focus-foreground: var(--theme-secondary-emphasis);
    --theme-button-secondary-outline-focus-border: var(--theme-secondary-default);
    
    --theme-button-secondary-outline-disabled-background: var(--theme-default-background);
    --theme-button-secondary-outline-disabled-foreground: var(--theme-secondary-default);
    --theme-button-secondary-outline-disabled-border: var(--theme-secondary-default);
    
    /* Primary tinted buttons */
    --theme-button-primary-tinted-background: var(--bc-red-500-20);
    --theme-button-primary-tinted-foreground: var(--theme-primary-emphasis);
    
    --theme-button-primary-tinted-hover-background: var(--bc-red-500-30);
    --theme-button-primary-tinted-hover-foreground: var(--theme-primary-emphasis);
    
    --theme-button-primary-tinted-active-background: var(--bc-red-500-20);
    --theme-button-primary-tinted-active-foreground: var(--theme-primary-emphasis);
    
    --theme-button-primary-tinted-focus-background: var(--bc-red-500-20);
    --theme-button-primary-tinted-focus-foreground: var(--theme-primary-emphasis);
    --theme-button-primary-tinted-focus-outline: var(--theme-primary-default);
    
    --theme-button-primary-tinted-disabled-background: var(--bc-red-500-20);
    --theme-button-primary-tinted-disabled-foreground: var(--theme-primary-emphasis);
    
    /* Secondary tinted buttons */
    --theme-button-secondary-tinted-background: var(--slate-grey-700-20);
    --theme-button-secondary-tinted-foreground: var(--theme-secondary-emphasis);
    
    --theme-button-secondary-tinted-hover-background: var(--slate-grey-700-30);
    --theme-button-secondary-tinted-hover-foreground: var(--theme-secondary-emphasis);
    
    --theme-button-secondary-tinted-active-background: var(--slate-grey-700-20);
    --theme-button-secondary-tinted-active-foreground: var(--theme-secondary-emphasis);
    
    --theme-button-secondary-tinted-focus-background: var(--slate-grey-700-20);
    --theme-button-secondary-tinted-focus-foreground: var(--theme-secondary-emphasis);
    --theme-button-secondary-tinted-focus-outline: var(--theme-secondary-default);
    
    --theme-button-secondary-tinted-disabled-background: var(--slate-grey-700-20);
    --theme-button-secondary-tinted-disabled-foreground: var(--theme-secondary-emphasis);
    
    /* Primary plain buttons */
    --theme-button-primary-plain-foreground: var(--theme-primary-default);
    
    --theme-button-primary-plain-hover-background: var(--bc-red-500-20);
    --theme-button-primary-plain-hover-foreground: var(--theme-primary-emphasis);
    
    --theme-button-primary-plain-active-background: var(--bc-red-500-30);
    --theme-button-primary-plain-active-foreground: var(--theme-primary-emphasis);
    
    --theme-button-primary-plain-focus-background: var(--bc-red-500-20);
    --theme-button-primary-plain-focus-foreground: var(--theme-primary-emphasis);
    --theme-button-primary-plain-focus-outline: var(--theme-primary-default);
    
    --theme-button-primary-plain-disabled-foreground: var(--theme-primary-default);
    
    /* Secondary plain buttons */
    --theme-button-secondary-plain-foreground: var(--theme-secondary-default);
    
    --theme-button-secondary-plain-hover-background: var(--slate-grey-700-20);
    --theme-button-secondary-plain-hover-foreground: var(--theme-secondary-emphasis);
    
    --theme-button-secondary-plain-active-background: var(--slate-grey-700-30);
    --theme-button-secondary-plain-active-foreground: var(--theme-secondary-emphasis);
    
    --theme-button-secondary-plain-focus-background: var(--slate-grey-700-20);
    --theme-button-secondary-plain-focus-foreground: var(--theme-secondary-emphasis);
    --theme-button-secondary-plain-focus-outline: var(--theme-secondary-default);
    
    --theme-button-secondary-plain-disabled-foreground: var(--theme-secondary-default);
    
    /* Dropdown buttons */
    --theme-dropdownbutton-menu-background: var(--theme-default-background);
    --theme-dropdownbutton-menu-foreground: var(--theme-default-foreground);
    --theme-dropdownbutton-menu-border: var(--theme-grey-default);
    
    --theme-dropdownbutton-menu-hover-background: var(--theme-hover-background);
    --theme-dropdownbutton-menu-hover-foreground: var(--theme-default-foreground);
    
    --theme-dropdownbutton-menu-active-background: var(--theme-active-background);
    --theme-dropdownbutton-menu-active-foreground: var(--theme-default-foreground);
    
    --theme-dropdownbutton-menu-focus-background: var(--theme-hover-background);
    --theme-dropdownbutton-menu-focus-foreground: var(--theme-default-foreground);
    
    /*#endregion Button colors */
    
    /*#region Input colors */
    --theme-input-background: var(--theme-default-background);
    --theme-input-foreground: var(--theme-default-foreground);
    --theme-input-border: var(--theme-grey-default);
    
    /* Text colors */
    --theme-text-default: #000000;
    --theme-text-title: #000000;
    --theme-text-subtitle: var(--theme-grey-emphasis);
    
    /* Dashboard cards */
    --theme-card-default-background: var(--theme-grey-subtle);
    --theme-card-default-foreground: var(--theme-grey-emphasis);
    --theme-card-default-border: var(--theme-grey-default);
    --theme-card-default-title: var(--theme-grey-emphasis);
    --theme-card-default-subtitle: var(--theme-grey-default);
    --theme-card-hover-background: var(--theme-grey-muted);
    --theme-card-hover-foreground: var(--theme-grey-emphasis);
    --theme-card-hover-border: var(--theme-primary-emphasis);
    --theme-card-active-background: var(--theme-grey-default);
    --theme-card-active-foreground: var(--theme-grey-emphasis);
    --theme-card-active-border: var(--theme-grey-default);
    --theme-card-focus-background: var(--theme-grey-subtle);
    --theme-card-focus-foreground: var(--theme-grey-emphasis);
    --theme-card-focus-border: var(--theme-grey-default);
    --theme-card-disabled-background: var(--theme-grey-muted);
    --theme-card-disabled-foreground: var(--theme-grey-default);
    --theme-card-disabled-border: var(--theme-grey-default);
    
    /* Tabs */
    --theme-tab-default-background: var(--theme-grey-subtle);
    --theme-tab-default-foreground: var(--theme-grey-emphasis);
    --theme-tab-default-border: var(--theme-grey-default);
    --theme-tab-hover-background: var(--theme-grey-muted);
    --theme-tab-hover-foreground: var(--theme-grey-emphasis);
    --theme-tab-hover-border: var(--theme-grey-default);
    --theme-tab-active-background: var(--bc-grey-400);
    --theme-tab-active-foreground: var(--theme-grey-emphasis);
    --theme-tab-active-border: var(--theme-primary-default);
    --theme-tab-focus-background: var(--theme-grey-muted);
    --theme-tab-focus-foreground: var(--theme-grey-emphasis);
    --theme-tab-focus-border: var(--theme-grey-default);
    --theme-tab-selected-background: var(--theme-grey-subtle);
    --theme-tab-selected-foreground: var(--theme-primary-default);
    --theme-tab-selected-border: var(--theme-primary-default);
    --theme-tab-disabled-background: var(--theme-grey-subtle);
    --theme-tab-disabled-foreground: var(--theme-grey-default);
    --theme-tab-disabled-border: var(--theme-grey-default);
    
    /* Grid */
    --theme-grid-default-border: var(--theme-grey-default);
    
    --theme-grid-header-default-background: var(--theme-grey-muted);
    --theme-grid-footer-default-background: var(--theme-grey-muted);
    
    --theme-grid-content-hover-background: var(--theme-hover-background);
    
    --theme-grid-content-selected-background: var(--theme-selected-background);
    
    /* Badges */
    --theme-badge-default-background: var(--theme-grey-muted);
    --theme-badge-default-foreground: var(--theme-grey-emphasis);
    
    --theme-badge-green-background: var(--bc-badge-green-background);
    --theme-badge-green-foreground: var(--bc-badge-green-foreground);
    --theme-badge-yellow-background: var(--bc-badge-yellow-background);
    --theme-badge-yellow-foreground: var(--bc-badge-yellow-foreground);
    --theme-badge-red-background: var(--bc-badge-red-background);
    --theme-badge-red-foreground: var(--bc-badge-red-foreground);
    --theme-badge-blue-background: var(--bc-badge-blue-background);
    --theme-badge-blue-foreground: var(--bc-badge-blue-foreground);
}

/* Other Color Themes */
[data-theme-mode="blue"] {
    /* Primary colors */
    --theme-primary-emphasis: var(--bc-blue-600);
    --theme-primary-default: var(--bc-blue-500);
    --theme-primary-muted: var(--bc-blue-300);
    --theme-primary-subtle: var(--bc-blue-100);
    --theme-secondary-emphasis: var(--bc-red-700);
    --theme-secondary-default: var(--bc-red-500);
    --theme-secondary-muted: var(--bc-red-300);
    --theme-secondary-subtle: var(--bc-red-100);
    --theme-grey-emphasis: var(--bc-grey-700);
    --theme-grey-default: var(--bc-grey-500);
    --theme-grey-muted: var(--bc-grey-300);
    --theme-grey-subtle: var(--bc-grey-100);
    /* top logo */
    /* --bcnav-logo-path: url("/media/images/bcNAV-logo-sidemenu.svg"); */
    /* Menu colors */
    --theme-menu-background: var(--theme-primary-emphasis);
    --theme-menu-interactive-foreground: var(--theme-primary-subtle);
    --theme-menu-interactive-hover-background: var(--bc-blue-100-20);
    --theme-menu-interactive-active-border: var(--theme-primary-emphasis);
    --theme-menu-interactive-active-background: var(--bc-blue-100-20);
    --theme-menu-interactive-selected-background: var(--theme-primary-subtle);
    --theme-menu-interactive-selected-foreground: var(--theme-primary-emphasis);
    --theme-menu-disabled-background: var(--theme-primary-default);
    --theme-menu-disabled-foreground: var(--theme-primary-muted);
    --theme-menu-badge-background: var(--theme-primary-subtle);
    --theme-menu-badge-foreground: var(--theme-primary-emphasis);
    --theme-menu-accents-border: var(--theme-primary-default);
    --theme-menu-foreground: var(--theme-primary-subtle);
    /* Page colors */
    --theme-page-background: var(--theme-grey-subtle);
}