:root {
    --color-primary: #3437A2;
    --color-secondary: #A6B4BF;
    --color-background: #F5F5F5;

    /* color page Login sauf vitivinicole */
    --color-login-background: #3437A2;
    --color-login-input-text: white;

    /* global */
    /* --color-text: #535353; */
    --color-text-clair: #A4A4A4;
    --color-white: #FFFFFF;

    /* Dark Gray */
    --color-dark-gray-1: #1A2024;
    --color-dark-gray-2: #252C32;
    --color-dark-gray-3: #303940;
    --color-dark-gray-4: #3C464E;

    /* Mid Gray */
    --color-mid-gray-1: #5B6871;
    --color-mid-gray-2: #6E7C87;
    --color-mid-gray-3: #84919A;
    --color-mid-gray-5: #B0BABF;

    /* Light Gray */
    --color-light-gray-1: #D5DADD;
    --color-light-gray-2: #DDE2E4;
    --color-light-gray-3: #E5E9EB;
    --color-light-gray-4: #EEF0F2;
    --color-light-gray-5: #F6F8F9;

    /* Color dashboard */
    --color-project-open: rgba(54, 162, 235, 0.9);
    --color-project-close: rgba(54, 162, 235, 0.6);
    --color-project-ratio: rgba(54, 162, 235, 0.4);

    --color-problem-open: rgba(75, 192, 192, 0.9);
    --color-problem-close: rgba(75, 192, 192, 0.6);
    --color-problem-ratio: rgba(75, 192, 192, 0.4);
    --color-problem-background: rgba(75, 192, 192, 0.2);

    --color-action-open: rgba(255, 99, 132, 0.9);
    --color-action-close: rgba(255, 99, 132, 0.6);
    --color-action-ratio: rgba(255, 99, 132, 0.4);

    --color-project-open-border: rgba(54, 162, 235, 1);
    --color-project-close-border: rgba(54, 162, 235, 1);
    --color-project-ratio-border: rgba(54, 162, 235, 1);

    --color-problem-open-border: rgba(75, 192, 192, 1);
    --color-problem-close-border: rgba(75, 192, 192, 1);
    --color-problem-ratio-border: rgba(75, 192, 192, 1);

    --color-action-open-border: rgba(255, 99, 132, 1);
    --color-action-close-border: rgba(255, 99, 132, 1);
    --color-action-ratio-border: rgba(255, 99, 132, 1);

    --color-generic: #05A9BB;
    --color-text: #141515;
    --color-info: #5b6871;
    --color-mute: #C7CED9;
    --color-mute-light: #C7CED91A;
    --color-closed: #7A8699;
    --color-closed-medium: #7A869940;
    --color-closed-light: #7A86991A;
    --color-highlight: #0070f8;
    --color-highlight-light: #0070f81A;
    --color-success: #E4A945;
    --color-great: #26B503;
    --color-great-light: #26B5031A;
    --color-project: #3437A2;
    --color-event: #5DDADB;
    --color-action: #F57036;
    --color-action-light: #F570361A;
    --color-contribution: #0452C8;
    --color-tool: #119C2B;
    --color-file: #A855F7;
    --color-file-light: #A855F71A;
    --color-product: #4CD7F6;
    --color-nc: #8A1021;
    --color-people: #E13D78;
    --color-people-light: #FFA9C8;
    --color-customer: #F2994A;
    --color-supplier: #145DA0;
    --color-alert: #FF0000;
    --color-alert-light: #FF00001A;
    --color-calendar: #CA8A04;
    --color-calendar-light: #CA8A041A;

    --color-background-star-1: #FEECEB;
    --color-background-star-2: #FEF4E6;
    --color-background-star-3: #E8F1FD;
    --color-background-star-4: #E7F8F0;

    --color-file-icon: #A855F7;
    --color-message-icon: #0452C8;
    --color-action-icon: #F57036;
    --color-tool-icon: #0C9200;
}

.color-action {
    color: var(--color-action);
}

.background-color-action {
    background-color: var(--color-action);
}

.background-color-action--light {
    background-color: var(--color-action-light);
}

.color-alert {
    color: var(--color-alert);
}

.background-color-alert-light {
    background-color: var(--color-alert-light);
}

.color-great {
    color: var(--color-great);
}

.background-color-great-light {
    background-color: var(--color-great-light);
}

.color-highlight {
    color: var(--color-highlight);
}

.color-highlight-nc {
    color: var(--color-highlight);
}

.background-color-highlight-light {
    background-color: var(--color-highlight-light);
}

.color-info {
    color: var(--color-info);
}

.color-info-nc {
    color: var(--color-info);
}

.color-mute {
    color: var(--color-mute);
}

.background-color-mute-light {
    background-color: var(--color-mute-light);
}

.color-mid-gray-1 {
    color: var(--color-mid-gray-1);
}

.background-color-light-gray-3 {
    background-color: var(--color-light-gray-3);
}