// colors
:root {
    --color-primary: #43CDC0;
    --color-light-primary: rgba(0, 180, 146, 0.10);
    --color-lighter-primary: rgba(143, 215, 203, 0.16);
    --color-secondary: #0F204D;
    --color-grey: #4C5F6A;
    --color-light-grey: #8A9499;
    --color-lighter-grey: #EEEFF0;
    --color-lighter-grey-hover: #C6C6CCFF;
    --color-table-grey: #FAFAFB;
    --color-red: #DD4D01;
    --color-light-red: rgba(221, 77, 1, 0.16);
    --color-yellow: #EFBB2E;
    --color-light-yellow: rgba(239, 187, 46, 0.16);

    // theme
    --color-background: #e4ecec;
    --border-radius : 0.7rem;
    --input-radius : 0.3rem;
    --effect: all ease-out 0.18s;
    --color-text: #0F204D;
    --color-light-text: #8C97B8;
    --color-lighter-text : rgba(51, 76, 90, 0.6);
    --shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 30px 80px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

    // table
    --color-table-bg: rgba(51, 76, 90, 0.04);
    --color-lighter-table-bg: rgba(51, 76, 90, 0.02);
    --color-focus: rgba(106, 183, 178, 0.08);

    // toast
    --color-success: #00B492;
    --color-success-bg: rgba(0, 180, 146, 0.20);
    --color-error: #DD4D01;
    --color-error-bg: rgba(221, 77, 1, 0.2);
    --color-alert: #EFBB2E;

    // modal
    --color-modal-bg: rgba(41, 61, 72, 0.5);

    // responsive
    --sm : 500px;
    --md : 720px;
    --l : 960px;
    --xl : 1200px;
    --full: 1400px;
}
