/* This file contains the color styles for the application
    Naming pattern for colors: --color-<category>-<name>-<shade>

*/
:root {
    /* Cellgo palette */

    /* Brand colors */
    /* #region brand-colors */
    /* brand green nr 1 */
    /* #region brand-green-1 */
    --color-brand-green-1-25:#FAFFFE;
    --color-brand-green-1-50:#F2FFFC;
    --color-brand-green-1-100:#CBF5EC;
    --color-brand-green-1-200:#7ADEC8;
    --color-brand-green-1-300:#47CCAF;
    --color-brand-green-1-400:#3EB299;
    --color-brand-green-1-500:#359983;
    --color-brand-green-1-600:#2C806D;
    --color-brand-green-1-700:#236657;
    --color-brand-green-1-800:#1A4D42;
    --color-brand-green-1-900:#153D54;
    --color-brand-green-1-950:#091A16;
    /* #endregion brand-green-1 */

    /* brand green nr 2 */
    /* #region brand-green-2 */
    --color-brand-green-2-25:#F9FCF7;
    --color-brand-green-2-50:#F9FCF7;
    --color-brand-green-2-100:#F3FCED;
    --color-brand-green-2-200:#EDFCE3;
    --color-brand-green-2-300:#D7F5C5;
    --color-brand-green-2-400:#CBEBB7;
    --color-brand-green-2-500:#C5E0B4;
    --color-brand-green-2-600:#AFD498;
    --color-brand-green-2-700:#8ABD6A;
    --color-brand-green-2-800:#6EA34D;
    --color-brand-green-2-900:#548A33;
    --color-brand-green-2-950:#2B570F;
    /* #endregion brand-green-2 */

    /* brand warm gray */
    /* #region brand-gray */
    --color-brand-gray-25:#FCFCFC;
    --color-brand-gray-50:#FCFCFC;
    --color-brand-gray-100:#FAFAFA;
    --color-brand-gray-200:#F2F2F2;
    --color-brand-gray-300:#EDEDED;
    --color-brand-gray-400:#E3E3E3;
    --color-brand-gray-500:#D8D8D8;
    --color-brand-gray-600:#C4C1C1;
    --color-brand-gray-700:#AFAAAA;
    --color-brand-gray-800:#807B7B;
    --color-brand-gray-900:#4D4B4B;
    --color-brand-gray-950:#1A1919;
    /* #endregion brand-gray */

    /* #endregion brand-colors */

    /* Error colors */
    /* #region error-colors */
    --color-error-25:#FFFBFA;
    --color-error-50:#FEF3F2;
    --color-error-100:#FEE4E2;
    --color-error-200:#FECDCA;
    --color-error-300:#FDA29B;
    --color-error-400:#F97066;
    --color-error-500:#F04438;
    --color-error-600:#D92D20;
    --color-error-700:#B42318;
    --color-error-800:#912018;
    --color-error-900:#7A271A;
    --color-error-950:#55160C;
    /* #endregion error-colors */

    /* Warning colors */
    /* #region warning-colors */
    --color-warning-25:#FFFCF5;
    --color-warning-50:#FFFAEB;
    --color-warning-100:#FEF0C7;
    --color-warning-200:#FEDF89;
    --color-warning-300:#FEC84B;
    --color-warning-400: #FDB022;
    --color-warning-500: #F79009;
    --color-warning-600: #DC6803;
    --color-warning-700: #B54708;
    --color-warning-800: #93370D;
    --color-warning-900: #7A2E0E;
    --color-warning-950: #4E1D09;
    /* #endregion warning-colors */

    /* Success colors */
    /* #region success-colors */
    --color-success-25:#F6FEF9;
    --color-success-50:#ECFDF3;
    --color-success-100:#D1FADF;
    --color-success-200:#A6F4C5;
    --color-success-300:#6CE9A6;
    --color-success-400: #32D583;
    --color-success-500: #12B76A;
    --color-success-600: #039855;
    --color-success-700: #027A48;
    --color-success-800: #05603A;
    --color-success-900: #054F31;
    --color-success-950: #053321;
    /* #endregion success-colors */

    /* Gray colors */
    /* #region gray-colors */
    --color-gray-25:#FCFCFD;
    --color-gray-50:#F9FAFB;
    --color-gray-100:#F2F4F7;
    --color-gray-200:#E4E7EC;
    --color-gray-300:#D0D5DD;
    --color-gray-400:#98A2B3;
    --color-gray-500:#667085;
    --color-gray-600:#475467;
    --color-gray-700:#344054;
    --color-gray-800:#1D2939;
    --color-gray-900:#101828;
    --color-gray-950:#0C111D;
    /* #endregion gray-colors */

    /* Blue color */
    /* #region blue-color */
    --color-blue-25: #F5FAFF;
    --color-blue-50: #EFF8FF;
    --color-blue-100: #D1E9FF;
    --color-blue-200: #B2DDFF;
    --color-blue-300: #84CAFF;
    --color-blue-400: #53B1FD;
    --color-blue-500: #2E90FA;
    --color-blue-600: #1570EF;
    --color-blue-700: #175CD3;
    --color-blue-800: #1849A9;
    --color-blue-900: #194185;
    --color-blue-950: #102A56;

    --color-blue-000: #f5f9ff;
    --color-blue-001: #d7e6ff;
    /* #endregion blue-color */

    /* Primary colors */
    --brand-primary-dark: var(--color-brand-green-1-500); /* Cellgo dark green */
    --brand-primary-light: var(--color-brand-green-2-500); /* Cellgo light green */
    --brand-black: #100E0E; /* Cellgo black */
    --brand-gray-light: var(--color-brand-gray-500); /* Cellgo light gray */

    /* Secondary colors */
    --brand-secondary-light: #EEF6E9 ; /* Cellgo very light green */
    --brand-secondary-dark: #2C6E61; /* Cellgo dark teal */
    --brand-secondary-white: #FAFDFB; /* Cellgo off-white */

    /* Derived colors */
    --bg-green-light: #effde8; /* Light green background */
    --bg-dark-green: #215e51; /* Dark green background */
    --bg-dark-green-light: #2a7867; /* Lighter dark green for hover */

    --color-warning: var(--color-warning-500);
    --color-error: var(--color-error-500);
    --color-info: var(--color-gray-700);

    --color-white: #FFFFFF;
    --color-black: #000000;

    --brand-color-text-light: var(--color-white);
    --brand-color-text-dark: var(--color-black);

    /* Order related colors */
    --color-orders-container-bg: #DAECF0;
    --color-change-input-bg: #e8e8e8;
    --color-current-order-bg-retrieval: #d8e6f7;
    --color-current-order-bg-replenishment: var(--color-brand-green-2-300);
    --color-order-complete-bg-retrieval: #AAD5DF;
    --color-order-complete-bg-replenishment: #7AC6A1; /* TODO: update */

    /* Progress bar */
    --color-progress-bar-bg: #12602F;

    /* border-colors */
    --border-tertiary: var(--color-gray-300);
    --border-hover: #b9c4d8;

    --border-focused: #9cb9ff; /* TODO: update this */
    --brand-focus-border: var(--border-focused);

    /* Disabled */
    --color-bg-disabled: var(--color-gray-200);
    --color-border-disabled: var(--color-gray-100);
    --color-text-disabled: var(--color-gray-300);
    --color-text-disabled-dark: var(--color-gray-500);

    /* login form */
    --login-form-text: var(--color-gray-700);
    --login-heading-text: var(--color-gray-800);
    --login-input-focus-border: var(--border-focused);

    /* Badges */
    --color-badge-background: var(--color-blue-100);
    --color-badge-hover-background: var(--color-blue-300);

    /* Modal */
    --modal-bg-default: #EEEEEE;
}

.cg-success {
    color: var(--color-success-500);
}

.cg-warning {
    color: var(--color-warning-500);
}

.cg-error {
    color: var(--color-error-500);
}

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

.important {
    color: var(--color-error-600);
}