:root {

    /* APP COLOR VARIABLES

    (if possible, only use these in the styles, no hardcoded colors or direct usage of other variables,
    if you need more, add it here) */

    --color-primary: rgba(0, 46, 98, 1);
    --color-primary-rgb: 0, 46, 98;
    --color-primary-text: white;
    --color-primary-dark: rgba(1, 30, 65, 1);
    --color-primary-light: rgba(0, 63, 159, 1);
    --color-primary-hover: rgba(0, 46, 98, 0.1);
    --color-primary-selected: rgba(0, 46, 98, 0.2);

    --color-secondary: rgba(0, 117, 201, 1);
    --color-secondary-rgb: 0, 117, 201;
    --color-secondary-text: white;
    --color-secondary-dark: rgba(0, 80, 173, 1);
    --color-secondary-light: rgba(50, 168, 253, 1);
    --color-secondary-hover: rgba(0, 117, 201, 0.1);
    --color-secondary-selected: rgba(0, 117, 201, 0.2);

    --color-highlight: rgba(245, 168, 0, 1);
    --color-highlight-rgb: 245, 168, 0;
    --color-highlight-text: white;
    --color-highlight-dark: rgba(215, 118, 29, 1);
    --color-highlight-light: rgba(255, 210, 49, 1);
    --color-highlight-hover: rgba(245, 168, 0, 0.1);
    --color-highlight-selected: rgba(245, 168, 0, 0.2);

    --color-warning: rgba(245, 168, 0, 1);
    --color-warning-rgb: 245, 168, 0;
    --color-warning-text: white;
    --color-warning-dark: rgba(215, 118, 29, 1);
    --color-warning-light: rgba(255, 210, 49, 1);
    --color-warning-hover: rgba(245, 168, 0, 0.1);
    --color-warning-selected: rgba(245, 168, 0, 0.2);

    --color-special: rgba(177, 79, 197, 1);
    --color-special-rgb: 177, 79, 197, 1;
    --color-special-text: white;
    --color-special-dark: rgba(97, 32, 128, 1);
    --color-special-light: rgba(234, 128, 255, 1);
    --color-special-hover: rgba(177, 79, 197, 0.1);
    --color-special-selected: rgba(177, 79, 197, 0.2);

    --color-info: rgba(84, 192, 232, 1);
    --color-info-rgb: 84, 192, 232, 1;
    --color-info-text: white;
    --color-info-dark: rgba(0, 125, 163, 1);
    --color-info-light: rgba(143, 225, 255, 1);
    --color-info-hover: rgba(84, 192, 232, 0.1);
    --color-info-selected: rgba(84, 192, 232, 0.2);

    --color-success: rgba(5, 171, 140, 1);
    --color-success-rgb: 5, 171, 140;
    --color-success-text: white;
    --color-success-dark: rgba(12, 120, 118, 1);
    --color-success-light: rgba(22, 217, 188, 1);
    --color-success-hover: rgba(5, 171, 140, 0.1);
    --color-success-selected: rgba(5, 171, 140, 0.2);

    --color-error: rgba(229, 55, 107, 1);
    --color-error-rgb: 229, 55, 107;
    --color-error-text: white;
    --color-error-dark: rgba(153, 42, 92, 1);
    --color-error-light: rgba(255, 82, 111, 1);
    --color-error-hover: rgba(229, 55, 107, 0.1);
    --color-error-selected: rgba(229, 55, 107, 0.2);

    --color-dark: rgba(1, 30, 65, 1);
    --color-dark-rgb: 1, 30, 65;
    --color-dark-text: white;
    --color-dark-dark: rgba(1, 21, 46, 1);
    --color-dark-light: rgba(77, 98, 122, 1);
    --color-dark-hover: rgba(1, 30, 65, 0.1);
    --color-dark-selected: rgba(1, 30, 65, 0.2);

    --color-neutral: rgba(189, 189, 189, 1);
    --color-neutral-rgb: 189, 189, 189;
    --color-neutral-text: rgba(1, 30, 65, 1);
    --color-neutral-dark: rgba(130, 130, 130, 1);
    --color-neutral-light: rgb(237, 237, 237);
    --color-neutral-very-light: rgba(248, 248, 248, 1);
    --color-neutral-hover: rgba(189, 189, 189, 0.1);
    --color-neutral-selected: rgba(189, 189, 189, 0.2);

    --color-text-default: rgba(1, 30, 65, 1);
    --color-text-secondary: rgba(1, 30, 65, 0.5372549019607843);
    --color-text-disabled: rgba(1, 30, 65, 0.3764705882352941);

    /* CROWE OFFICIAL COLORS

    (if possible, DO NOT use directly in styles, use other variables instead,
    since these shouldn't change even if there is a need to change the overall color scheme of the app) */

    --crowe-amber-bright: rgba(255, 210, 49, 1);
    --crowe-amber: rgba(245, 168, 0, 1);
    --crowe-amber-dark: rgba(215, 118, 29, 1);
    --crowe-amber-rgb: 245, 168, 0;
    --crowe-amber-translucent-1: rgba(245, 168, 0, 0.06);
    --crowe-amber-translucent-2: rgba(245, 168, 0, 0.12);

    --crowe-indigo-bright: rgba(0, 63, 159, 1);
    --crowe-indigo: rgb(0, 43, 87);
    --crowe-indigo-dark: rgba(1, 30, 65, 1);
    --crowe-indigo-rgb: 0, 46, 98;
    --crowe-indigo-translucent-1: rgba(0, 46, 98, 0.06);
    --crowe-indigo-translucent-2: rgba(0, 46, 98, 0.12);

    --crowe-teal-bright: rgba(22, 217, 188, 1);
    --crowe-teal: rgba(5, 171, 140, 1);
    --crowe-teal-dark: rgba(12, 120, 118, 1);
    --crowe-teal-rgb: 5, 171, 140;
    --crowe-teal-translucent-1: rgba(5, 171, 140, 0.06);
    --crowe-teal-translucent-2: rgba(5, 171, 140, 0.12);

    --crowe-cyan-light: rgba(143, 225, 255, 1);
    --crowe-cyan: rgba(84, 192, 232, 1);
    --crowe-cyan-dark: rgba(0, 125, 163, 1);
    --crowe-cyan-rgb: 84, 192, 232;
    --crowe-cyan-translucent-1: rgba(84, 192, 232, 0.06);
    --crowe-cyan-translucent-2: rgba(84, 192, 232, 0.12);

    --crowe-blue-light: rgba(50, 168, 253, 1);
    --crowe-blue: rgba(0, 117, 201, 1);
    --crowe-blue-dark: rgba(0, 80, 173, 1);
    --crowe-blue-rgb: 0, 117, 201;
    --crowe-blue-translucent-1: rgba(0, 117, 201, 0.06);
    --crowe-blue-translucent-2: rgba(0, 117, 201, 0.12);

    --crowe-violet-bright: rgba(234, 128, 255, 1);
    --crowe-violet: rgba(177, 79, 197, 1);
    --crowe-violet-dark: rgba(97, 32, 128, 1);
    --crowe-violet-rgb: 177, 79, 197;
    --crowe-violet-translucent-1: rgba(177, 79, 197, 0.06);
    --crowe-violet-translucent-2: rgba(177, 79, 197, 0.12);

    --crowe-coral-bright: rgba(255, 82, 111, 1);
    --crowe-coral: rgba(229, 55, 107, 1);
    --crowe-coral-dark: rgba(153, 42, 92, 1);
    --crowe-coral-rgb: 229, 55, 107;
    --crowe-coral-translucent-1: rgba(229, 55, 107, 0.06);
    --crowe-coral-translucent-2: rgba(229, 55, 107, 0.12);

    --crowe-grey-tint-1: rgba(51, 51, 51, 1);
    --crowe-grey-tint-2: rgba(79, 79, 79, 1);
    --crowe-grey-tint-3: rgba(130, 130, 130, 1);
    --crowe-grey-tint-4: rgba(189, 189, 189, 1);
    --crowe-grey-tint-5: rgba(224, 224, 224, 0.34);

    /* OVERWRITING MUDBLAZOR COLORS */

    --mud-palette-primary: var(--color-secondary) !important;
    --mud-palette-primary-rgb: var(--color-secondary-rgb) !important;
    --mud-palette-primary-text: var(--color-secondary-text) !important;
    --mud-palette-primary-darken: var(--color-secondary-dark) !important;
    --mud-palette-primary-lighten: var(--color-secondary-light) !important;
    --mud-palette-primary-hover: var(--color-secondary-hover) !important;
    --mud-palette-primary-selected: var(--color-secondary-selected) !important;

    --mud-palette-secondary: var(--color-special) !important;
    --mud-palette-secondary-rgb: var(--color-special-rgb) !important;
    --mud-palette-secondary-text: var(--color-special-text) !important;
    --mud-palette-secondary-darken: var(--color-special-dark) !important;
    --mud-palette-secondary-lighten: var(--color-special-light) !important;
    --mud-palette-secondary-hover: var(--color-special-hover) !important;
    --mud-palette-secondary-selected: var(--color-special-selected) !important;

    --mud-palette-tertiary: var(--color-info) !important;
    --mud-palette-tertiary-rgb: var(--color-info-rgb) !important;
    --mud-palette-tertiary-text: var(--color-info-text) !important;
    --mud-palette-tertiary-darken: var(--color-info-dark) !important;
    --mud-palette-tertiary-lighten: var(--color-info-light) !important;
    --mud-palette-tertiary-hover: var(--color-info-hover) !important;
    --mud-palette-tertiary-selected: var(--color-info-selected) !important;

    --mud-palette-info: var(--color-info) !important;
    --mud-palette-info-rgb: var(--color-info-rgb) !important;
    --mud-palette-info-text: var(--color-info-text) !important;
    --mud-palette-info-darken: var(--color-info-dark) !important;
    --mud-palette-info-lighten: var(--color-info-light) !important;
    --mud-palette-info-hover: var(--color-info-hover) !important;
    --mud-palette-info-selected: var(--color-info-selected) !important;

    --mud-palette-warning: var(--color-warning) !important;
    --mud-palette-warning-rgb: var(--color-warning-rgb) !important;
    --mud-palette-warning-text: var(--color-warning-text) !important;
    --mud-palette-warning-darken: var(--color-warning-dark) !important;
    --mud-palette-warning-lighten: var(--color-warning-light) !important;
    --mud-palette-warning-hover: var(--color-warning-hover) !important;
    --mud-palette-warning-selected: var(--color-warning-selected) !important;

    --mud-palette-success: var(--color-success) !important;
    --mud-palette-success-rgb: var(--color-success-rgb) !important;
    --mud-palette-success-text: var(--color-success-text) !important;
    --mud-palette-success-darken: var(--color-success-dark) !important;
    --mud-palette-success-lighten: var(--color-success-light) !important;
    --mud-palette-success-hover: var(--color-success-hover) !important;
    --mud-palette-success-selected: var(--color-success-selected) !important;

    --mud-palette-error: var(--color-error) !important;
    --mud-palette-error-rgb: var(--color-error-rgb) !important;
    --mud-palette-error-text: var(--color-error-text) !important;
    --mud-palette-error-darken: var(--color-error-dark) !important;
    --mud-palette-error-lighten: var(--color-error-light) !important;
    --mud-palette-error-hover: var(--color-error-hover) !important;
    --mud-palette-error-selected: var(--color-error-selected) !important;

    --mud-palette-dark: var(--color-dark) !important;
    --mud-palette-dark-rgb: var(--color-dark-rgb) !important;
    --mud-palette-dark-text: var(--color-dark-text) !important;
    --mud-palette-dark-darken: var(--color-dark-dark) !important;
    --mud-palette-dark-lighten: var(--color-dark-light) !important;
    --mud-palette-dark-hover: var(--color-dark-hover) !important;
    --mud-palette-dark-selected: var(--color-dark-selected) !important;

    --mud-palette-text-primary: var(--color-text-default) !important;

    /* OLD VARIABLES (to remove) */

    --crowe-indigo-lighten: rgba(77, 97, 122, 1);
    --crowe-indigo-light: rgb(153, 165, 179);
    --crowe-indigo-light-2: rgba(239, 240, 241, 1);
    --crowe-indigo-light-1: rgba(249, 250, 251, 1);
    --crowe-indigo-hover: rgba(1, 30, 65, 0.058823529411764705);

    --mud-palette-text-secondary: rgba(1, 30, 65, 0.5372549019607843) !important;
    --mud-palette-text-disabled: rgba(1, 30, 65, 0.3764705882352941) !important;
}