:root {
    /* primary */
    --color_primary_100: #F1EFF6;
    --color_primary_light: var(--color_primary_100);
    --color_primary_200: #E4DFED;
    --color_primary_300: #C9BEDB;
    --color_primary_400: #AD9ECA;
    --color_primary_hover: var(--color_primary_500);
    --color_primary_500: #927DB8;
    --color_primary: var(--color_primary_600);
    --color_primary_600: #775DA6;
    --color_primary_active: var(--color_primary_700);
    --color_primary_700: #5F4A85;
    --color_primary_800: #473864;
    --color_primary_dark: var(--color_primary_900);
    --color_primary_900: #302542;
    --color_primary_1000: #181321;
    /* secondary */
    --color_secondary_100: #F7FBFF;
    --color_secondary_light: var(--color_secondary_200);
    --color_secondary_200: #EFF6FE;
    --color_secondary_300: #DFEDFD;
    --color_secondary_400: #CEE4FC;
    --color_secondary_hover: var(--color_secondary_500);
    --color_secondary_500: #BEDBFB;
    --color_secondary: var(--color_secondary_600);
    --color_secondary_600: #AED2FA;
    --color_secondary_active: var(--color_secondary_700);
    --color_secondary_700: #8BA8C8;
    --color_secondary_800: #687E96;
    --color_secondary_dark: var(--color_secondary_900);
    --color_secondary_900: #465464;
    --color_secondary_1000: #232A32;
    /* success */
    --color_success_100: #E9F9EE;
    --color_success_light: var(--color_success_200);
    --color_success_200: #DDF3E4;
    --color_success_300: #CCEBD7;
    --color_success_400: #B4DFC4;
    --color_success_hover: var(--color_success_500);
    --color_success_500: #92CEAC;
    --color_success_600: #5BB98C;
    --color_success: var(--color_success_700);
    --color_success_700: #30A46C;
    --color_success_800: #299764;
    --color_success_dark: var(--color_success_900);
    --color_success_active: var(--color_success_900);
    --color_success_900: #18794E;
    --color_success_1000: #193B2D;
    /* error */
    --color_error_100: #FFEFEF;
    --color_error_light: var(--color_error_200);
    --color_error_200: #FFE5E5;
    --color_error_300: #FDD8D8;
    --color_error_400: #F9C6C6;
    --color_error_hover: var(--color_error_500);
    --color_error_500: #F3AEAF;
    --color_error_600: #EB9091;
    --color_error: var(--color_error_700);
    --color_error_700: #E5484D;
    --color_error_800: #D93D42;
    --color_error_dark: var(--color_error_900);
    --color_error_active: var(--color_error_900);
    --color_error_900: #C62A2F;
    --color_error_1000: #641723;
    /* warning */
    --color_warning_100: #FFF3D0;
    --color_warning_light: var(--color_warning_200);
    --color_warning_200: #FFECB7;
    --color_warning_300: #FFEA01;
    --color_warning_400: #F5D08C;
    --color_warning_hover: var(--color_warning_500);
    --color_warning_500: #E4BB78;
    --color_warning: var(--color_warning_600);
    --color_warning_600: #D6A35C;
    --color_warning_active: var(--color_warning_700);
    --color_warning_700: #FFC53D;
    --color_warning_800: #FFBA1A;
    --color_warning_dark: var(--color_warning_900);
    --color_warning_900: #915930;
    --color_warning_1000: #4F3422;
    /* info */
    --color_info_100: #E2F9FF;
    --color_info_light: var(--color_info_200);
    --color_info_200: #D2F4FD;
    --color_info_300: #BFE8F8;
    --color_info_400: #A5DCED;
    --color_info_hover: var(--color_info_500);
    --color_info_500: #82CAE0;
    --color_info: var(--color_info_600);
    --color_info_600: #46B8D8;
    --color_info_active: var(--color_info_700);
    --color_info_700: #7CE2FE;
    --color_info_800: #72DBF8;
    --color_info_dark: var(--color_info_900);
    --color_info_900: #256E93;
    --color_info_1000: #19404D;
    /*custom gray */
    --color_gray_100: #F2F2F5;
    --color_gray_200: #EBEBEF;
    --color_gray_300: #E4E4E9;
    --color_gray_400: #DDDDE3;
    --color_gray_500: #D3D4DB;
    --color_gray_600: #B9BBC6;
    --color_gray_700: #8B8D98;
    --color_gray_800: #7E808A;
    --color_gray_900: #60646C;
    --color_gray_1000: #1C2024;
}