:root {

    /* color */

    /* ---------- Primitives color ---------- */

        /* ---------- Base ---------- */

        --vs__color_primitives_base_white: #FFFFFF;
        --vs__color_primitives_base_white_alpha: rgba(255, 255, 255, .3);
        --vs__color_primitives_base_black: #000000;
        --vs__color_primitives_base_black_alpha: rgba(0, 0, 0, .4);

        /* ---------- Overlay ---------- */
        --vs__color_primitives_overlay_white_alpha_2: rgba(255, 255, 255, .02);
        --vs__color_primitives_overlay_white_alpha_4: rgba(255, 255, 255, .04);
        --vs__color_primitives_overlay_white_alpha_7: rgba(255, 255, 255, .07);
        --vs__color_primitives_overlay_white_alpha_9: rgba(255, 255, 255, .09);
        --vs__color_primitives_overlay_white_alpha_11: rgba(255, 255, 255, .11);
        --vs__color_primitives_overlay_white_alpha_14: rgba(255, 255, 255, .14);
        --vs__color_primitives_overlay_white_alpha_22: rgba(255, 255, 255, .22);
        --vs__color_primitives_overlay_white_alpha_30: rgba(255, 255, 255, .3);
        --vs__color_primitives_overlay_white_alpha_40: rgba(255, 255, 255, .4);
        --vs__color_primitives_overlay_black_alpha_2: rgba(0, 0, 0, .02);
        --vs__color_primitives_overlay_black_alpha_4: rgba(0, 0, 0, .04);
        --vs__color_primitives_overlay_black_alpha_7: rgba(0, 0, 0, .07);
        --vs__color_primitives_overlay_black_alpha_9: rgba(0, 0, 0, .09);
        --vs__color_primitives_overlay_black_alpha_11: rgba(0, 0, 0, .11);
        --vs__color_primitives_overlay_black_alpha_14: rgba(0, 0, 0, .14);
        --vs__color_primitives_overlay_black_alpha_22: rgba(0, 0, 0, .22);
        --vs__color_primitives_overlay_black_alpha_30: rgba(0, 0, 0, .30);
        --vs__color_primitives_overlay_black_alpha_40: rgba(0, 0, 0, .40);

        /* ---------- Dark violet ---------- */

        --vs__color_primitives_dark_violet_100: #26293B;
        --vs__color_primitives_dark_violet_150: #2B2E42;
        --vs__color_primitives_dark_violet_200: #303347;
        --vs__color_primitives_dark_violet_300: #35394F;
        --vs__color_primitives_dark_violet_400: #3F445E;
        --vs__color_primitives_dark_violet_500: #4B5170;
        --vs__color_primitives_dark_violet_600: #596085;
        --vs__color_primitives_dark_violet_700: #666E99;
        --vs__color_primitives_dark_violet_800: #747DAD;

         /* ---------- Violet ---------- */

        --vs__color_primitives_violet_100: #2C2250;
        --vs__color_primitives_violet_200: #32275F;
        --vs__color_primitives_violet_300: #392C72;
        --vs__color_primitives_violet_350: #3D3D66;
        --vs__color_primitives_violet_400: #443592;
        --vs__color_primitives_violet_500: #5842C3;
        --vs__color_primitives_violet_600: #6E56CF;
        --vs__color_primitives_violet_700: #7C66DC;
        --vs__color_primitives_violet_800: #817AE8;
        --vs__color_primitives_violet_800_alpha: rgba(129, 122, 232, .25);
        --vs__color_primitives_violet_800_alpha_35: rgba(129, 122, 232, .35);
        --vs__color_primitives_violet_900: #AAB0F9;
        --vs__color_primitives_violet_950: #C8CCFA;

        /* ---------- Red ---------- */

        --vs__color_primitives_red_100: #96374A;
        --vs__color_primitives_red_200: #C3425C;
        --vs__color_primitives_red_300: #FA5C7C;
        --vs__color_primitives_red_300_alpha: rgba(250, 92, 124, .25);
        --vs__color_primitives_red_300_alpha_35: rgba(250, 92, 124, .35);
        --vs__color_primitives_red_400: #FF4269;
        --vs__color_primitives_red_500: #FC9DB0;

         /* ---------- Yellow ---------- */

        --vs__color_primitives_yellow_100: #997536;
        --vs__color_primitives_yellow_200: #C39E42;
        --vs__color_primitives_yellow_300: #FFC35A;
        --vs__color_primitives_yellow_300_alpha: rgba(255, 195, 90, .25);
        --vs__color_primitives_yellow_300_alpha_35: rgba(255, 195, 90, .35);
        --vs__color_primitives_yellow_400: #FFBA42;
        --vs__color_primitives_yellow_500: #FCD99D;

        /* ---------- Orange ---------- */

        --vs__color_primitives_orange_100: #995736;
        --vs__color_primitives_orange_200: #C36D42;
        --vs__color_primitives_orange_300: #FF915A;
        --vs__color_primitives_orange_300_alpha: rgba(255, 145, 90, .25);
        --vs__color_primitives_orange_300_alpha_35: rgba(255, 145, 90, .35);
        --vs__color_primitives_orange_400: #FF8142;
        --vs__color_primitives_orange_500: #FCBD9D;

        /* ---------- Green ---------- */

        --vs__color_primitives_green_100: #067C5B;
        --vs__color_primitives_green_200: #279E7D;
        --vs__color_primitives_green_300: #0ACF97;
        --vs__color_primitives_green_300_alpha: rgba(10, 207, 151, .25);
        --vs__color_primitives_green_300_alpha_35: rgba(10, 207, 151, .35);
        --vs__color_primitives_green_400: #15E5AA;
        --vs__color_primitives_green_500: #6CE2C1;

        /* ---------- Blue ---------- */

        --vs__color_primitives_blue_100: #22697D;
        --vs__color_primitives_blue_200: #27859E;
        --vs__color_primitives_blue_300: #39AFD1;
        --vs__color_primitives_blue_300_alpha: rgba(57, 175, 209, .25);
        --vs__color_primitives_blue_300_alpha_35: rgba(57, 175, 209, .35);
        --vs__color_primitives_blue_400: #3EC8F0;
        --vs__color_primitives_blue_500: #6CC8E2;

        /* ---------- Gray ---------- */

        --vs__color_primitives_gray_100: #464F5B;
        --vs__color_primitives_gray_200: #5F6975;
        --vs__color_primitives_gray_300: #6C757D;
        --vs__color_primitives_gray_300_alpha: rgba(108, 117, 125, .25);
        --vs__color_primitives_gray_300_alpha_15: rgba(108, 117, 125, .15);
        --vs__color_primitives_gray_400: #8391A2;
        --vs__color_primitives_gray_500: #AAB8C5;
        --vs__color_primitives_gray_600: #A7ACB1;
        --vs__color_primitives_gray_650: #BCC1C7;
        --vs__color_primitives_gray_700: #DEE2E6;
        --vs__color_primitives_gray_800: #F6F7FB;

        /* ---------- Blue Gray ---------- */

        --vs__color_primitives_blue_gray_100: #F5F7FA;
        --vs__color_primitives_blue_gray_150: #F0F2F5;
        --vs__color_primitives_blue_gray_200: #EBEFF2;
        --vs__color_primitives_blue_gray_300: #DDE4EB;
        --vs__color_primitives_blue_gray_400: #D1D7DE;
        --vs__color_primitives_blue_gray_500: #B0B9C2;
        --vs__color_primitives_blue_gray_600: #8B959E;
        --vs__color_primitives_blue_gray_700: #6F7882;
        --vs__color_primitives_blue_gray_800: #58616B;
        --vs__color_primitives_blue_gray_900: #323940;

        /* ---------- Dark Gray ---------- */

        --vs__color_primitives_dark_grey_100: #313A46;
        --vs__color_primitives_dark_grey_100_alpha: rgba(49, 58, 70, .25);

    /* ---------- end Primitives color ---------- */


    /* ---------- Tokens Color ---------- */

        /* Background */
        --vs_color_background_primary: var(--vs__color_primitives_dark_violet_100);
        --vs_color_background_secondary: var(--vs__color_primitives_dark_violet_200);
        --vs_color_background_secondary_dark: var(--vs__color_primitives_dark_violet_150);
        --vs_color_background_dark-heavy: var(--vs__color_primitives_dark_violet_300);
        --vs_color_background_heavy: var(--vs__color_primitives_dark_violet_400);
        --vs_color_background_soft: var(--vs__color_primitives_dark_violet_500);
        --vs_color_background_light: var(--vs__color_primitives_dark_violet_700);
        --vs_color_background_backdrop: var(--vs__color_primitives_base_black_alpha);
        --vs_color_background_neutral: var(--vs__color_primitives_gray_300_alpha);
        --vs_color_background_neutral-alpha: var(--vs__color_primitives_gray_300_alpha_15);
        --vs_color_background_neutral-heavy: var(--vs__color_primitives_gray_100);
        --vs_color_background_neutral-soft: var(--vs__color_primitives_gray_200);
        --vs_color_background_neutral-pure: var(--vs__color_primitives_blue_gray_700);
        --vs_color_background_neutral-dark: var(--vs__color_primitives_blue_gray_800);
        --vs_color_background_primary_inverse: var(--vs__color_primitives_gray_700);
        --vs_color_background_black: var(--vs__color_primitives_base_black);
        --vs_color_background_white: var(--vs__color_primitives_base_white);
        --vs_color_background_overlay_1: var(--vs__color_primitives_overlay_white_alpha_2);
        --vs_color_background_overlay_2: var(--vs__color_primitives_overlay_white_alpha_4);

        /* Background brand */
        --vs_color_brand: var(--vs__color_primitives_violet_800);
        --vs_color_brand_hovered: var(--vs__color_primitives_violet_600);
        --vs_color_brand_heavy: var(--vs__color_primitives_violet_350);
        --vs_color_brand_soft: var(--vs__color_primitives_violet_400);
        --vs_color_brand_light: var(--vs__color_primitives_violet_500);
        --vs_color_brand_alpha: var(--vs__color_primitives_violet_800_alpha);
        --vs_color_brand_alpha_35: var(--vs__color_primitives_violet_800_alpha_35);

        /* Background error */
        --vs_color_error: var(--vs__color_primitives_red_300);
        --vs_color_error_alpha: var(--vs__color_primitives_red_300_alpha);
        --vs_color_error_alpha_35: var(--vs__color_primitives_red_300_alpha_35);
        --vs_color_error_hovered: var(--vs__color_primitives_red_200);
        --vs_color_error_heavy: var(--vs__color_primitives_red_100);

        /* Background warning */
        --vs_color_warning: var(--vs__color_primitives_yellow_300);
        --vs_color_warning_alpha: var(--vs__color_primitives_yellow_300_alpha);
        --vs_color_warning_alpha_35: var(--vs__color_primitives_yellow_300_alpha_35);
        --vs_color_warning_hovered: var(--vs__color_primitives_yellow_200);
        --vs_color_warning_heavy: var(--vs__color_primitives_yellow_100);

        /* Background Orange */
        --vs_color_orange: var(--vs__color_primitives_orange_300);
        --vs_color_orange_alpha: var(--vs__color_primitives_orange_300_alpha);
        --vs_color_orange_alpha_35: var(--vs__color_primitives_orange_300_alpha_35);
        --vs_color_orange_hovered: var(--vs__color_primitives_orange_200);
        --vs_color_orange_heavy: var(--vs__color_primitives_orange_100);

        /* Background success */
        --vs_color_success: var(--vs__color_primitives_green_300);
        --vs_color_success_alpha: var(--vs__color_primitives_green_300_alpha);
        --vs_color_success_alpha_35: var(--vs__color_primitives_green_300_alpha_35);
        --vs_color_success_hovered: var(--vs__color_primitives_green_200);
        --vs_color_success_heavy: var(--vs__color_primitives_green_100);

        /* Background info */
        --vs_color_info: var(--vs__color_primitives_blue_300);
        --vs_color_info_alpha: var(--vs__color_primitives_blue_300_alpha);
        --vs_color_info_alpha_35: var(--vs__color_primitives_blue_300_alpha_35);
        --vs_color_info_hovered: var(--vs__color_primitives_blue_200);
        --vs_color_info_heavy: var(--vs__color_primitives_blue_100);

        /* Border */
        --vs_color_border_primary: var(--vs__color_primitives_dark_violet_400);
        --vs_color_border_secondary: var(--vs__color_primitives_dark_violet_600);
        --vs_color_border_heavy: var(--vs__color_primitives_dark_violet_200);
        --vs_color_border_brand: var(--vs__color_primitives_violet_800);
        --vs_color_border_brand-hovered: var(--vs__color_primitives_violet_600);
        --vs_color_border_error: var(--vs__color_primitives_red_300);
        --vs_color_border_error-hovered: var(--vs__color_primitives_red_100);
        --vs_color_border_warning: var(--vs__color_primitives_yellow_300);
        --vs_color_border_warning-hovered: var(--vs__color_primitives_yellow_100);
        --vs_color_border_success: var(--vs__color_primitives_green_300);
        --vs_color_border_success-hovered: var(--vs__color_primitives_green_100);
        --vs_color_border_info: var(--vs__color_primitives_blue_300);
        --vs_color_border_info-hovered: var(--vs__color_primitives_blue_100);
        --vs_color_border_light: var(--vs__color_primitives_gray_700);
        --vs_color_border_light-hovered: var(--vs__color_primitives_gray_400);

        /* Text */
        --vs_color_text_primary: var(--vs__color_primitives_gray_500);
        --vs_color_text_secondary: var(--vs__color_primitives_gray_400);
        --vs_color_text_heavy: var(--vs__color_primitives_gray_200);
        --vs_color_text_light: var(--vs__color_primitives_gray_700);
        --vs_color_text_white: var(--vs__color_primitives_base_white);
        --vs_color_text_brand: var(--vs__color_primitives_violet_800);
        --vs_color_text_brand-hovered: var(--vs__color_primitives_violet_600);
        --vs_color_text_error: var(--vs__color_primitives_red_300);
        --vs_color_text_error_light: var(--vs__color_primitives_red_500);
        --vs_color_text_warning: var(--vs__color_primitives_yellow_300);
        --vs_color_text_success: var(--vs__color_primitives_green_300);
        --vs_color_text_info: var(--vs__color_primitives_blue_300);
        --vs_color_text_orange: var(--vs__color_primitives_orange_300);

        /* Icon */
        --vs_color_icon_primary: var(--vs__color_primitives_gray_500);
        --vs_color_icon_heavy: var(--vs__color_primitives_gray_200);
        --vs_color_icon_light: var(--vs__color_primitives_gray_700);
        --vs_color_icon_brand: var(--vs__color_primitives_violet_800);
        --vs_color_icon_brand-hovered: var(--vs__color_primitives_violet_600);
        --vs_color_icon_error: var(--vs__color_primitives_red_300);
        --vs_color_icon_warning: var(--vs__color_primitives_yellow_300);
        --vs_color_icon_success: var(--vs__color_primitives_green_300);
        --vs_color_icon_info: var(--vs__color_primitives_blue_300);
        --vs_color_icon_white: var(--vs__color_primitives_base_white);

        /* Divider */
        --vs_color_divider_primary: var(--vs__color_primitives_dark_violet_400);
        --vs_color_divider_secondary: var(--vs__color_primitives_dark_violet_300);
        --vs_color_divider_brand: var(--vs__color_primitives_violet_800);

    /* ---------- Tokens Color ---------- */

    /* ---------- end color -----------*/

}

html[data-theme="light"] {
    /* color */

    /* Background */
    --vs_color_background_primary: var(--vs__color_primitives_blue_gray_100);
    --vs_color_background_secondary: var(--vs__color_primitives_blue_gray_200);
    --vs_color_background_secondary_dark: var(--vs__color_primitives_blue_gray_150);
    --vs_color_background_light: var(--vs__color_primitives_blue_gray_600);
    --vs_color_background_soft: var(--vs__color_primitives_blue_gray_500);
    --vs_color_background_heavy: var(--vs__color_primitives_blue_gray_400);
    --vs_color_background_dark-heavy: var(--vs__color_primitives_blue_gray_300);
    --vs_color_background_backdrop: var(--vs__color_primitives_base_black_alpha);
    --vs_color_background_black: var(--vs__color_primitives_base_black);
    --vs_color_background_neutral: var(--vs__color_primitives_gray_300_alpha);
    --vs_color_background_neutral-alpha: var(--vs__color_primitives_gray_300_alpha_15);
    --vs_color_background_neutral-heavy: var(--vs__color_primitives_gray_700);
    --vs_color_background_neutral-soft: var(--vs__color_primitives_gray_650);
    --vs_color_background_neutral-pure: var(--vs__color_primitives_blue_gray_700);
    --vs_color_background_neutral-dark: var(--vs__color_primitives_blue_gray_800);
    --vs_color_background_primary_inverse: var(--vs__color_primitives_blue_gray_800);
    --vs_color_background_white: var(--vs__color_primitives_base_white);
    --vs_color_background_overlay_1: var(--vs__color_primitives_overlay_black_alpha_2);
    --vs_color_background_overlay_2: var(--vs__color_primitives_overlay_black_alpha_4);

    /* Background brand */
    --vs_color_brand: var(--vs__color_primitives_violet_800);
    --vs_color_brand_hovered: var(--vs__color_primitives_violet_700);
    --vs_color_brand_heavy: var(--vs__color_primitives_violet_950);
    --vs_color_brand_soft: var(--vs__color_primitives_violet_400);
    --vs_color_brand_light: var(--vs__color_primitives_violet_500);
    --vs_color_brand_alpha: var(--vs__color_primitives_violet_800_alpha);
    --vs_color_brand_alpha_35: var(--vs__color_primitives_violet_800_alpha_35);

    /* Background error */
    --vs_color_error: var(--vs__color_primitives_red_400);
    --vs_color_error_alpha: var(--vs__color_primitives_red_300_alpha);
    --vs_color_error_alpha_35: var(--vs__color_primitives_red_300_alpha_35);
    --vs_color_error_hovered: var(--vs__color_primitives_red_300);
    --vs_color_error_heavy: var(--vs__color_primitives_red_200);

    /* Background warning */
    --vs_color_warning: var(--vs__color_primitives_yellow_400);
    --vs_color_warning_alpha: var(--vs__color_primitives_yellow_300_alpha);
    --vs_color_warning_alpha_35: var(--vs__color_primitives_yellow_300_alpha_35);
    --vs_color_warning_hovered: var(--vs__color_primitives_yellow_300);
    --vs_color_warning_heavy: var(--vs__color_primitives_yellow_200);

    /* Background Orange */
    --vs_color_orange: var(--vs__color_primitives_orange_400);
    --vs_color_orange_alpha: var(--vs__color_primitives_orange_300_alpha);
    --vs_color_orange_alpha_35: var(--vs__color_primitives_orange_300_alpha_35);
    --vs_color_orange_hovered: var(--vs__color_primitives_orange_300);
    --vs_color_orange_heavy: var(--vs__color_primitives_orange_200);

    /* Background success */
    --vs_color_success: var(--vs__color_primitives_green_400);
    --vs_color_success_alpha: var(--vs__color_primitives_green_300_alpha);
    --vs_color_success_alpha_35: var(--vs__color_primitives_green_300_alpha_35);
    --vs_color_success_hovered: var(--vs__color_primitives_green_300);
    --vs_color_success_heavy: var(--vs__color_primitives_green_200);

    /* Background info */
    --vs_color_info: var(--vs__color_primitives_blue_400);
    --vs_color_info_alpha: var(--vs__color_primitives_blue_300_alpha);
    --vs_color_info_alpha_35: var(--vs__color_primitives_blue_300_alpha_35);
    --vs_color_info_hovered: var(--vs__color_primitives_blue_300);
    --vs_color_info_heavy: var(--vs__color_primitives_blue_200);

    /* Border */
    --vs_color_border_primary: var(--vs__color_primitives_blue_gray_400);
    --vs_color_border_secondary: var(--vs__color_primitives_blue_gray_500);
    --vs_color_border_heavy: var(--vs__color_primitives_blue_gray_300);
    --vs_color_border_brand-hovered: var(--vs__color_primitives_violet_600);
    --vs_color_border_error: var(--vs__color_primitives_red_300);
    --vs_color_border_error-hovered: var(--vs__color_primitives_red_100);
    --vs_color_border_warning: var(--vs__color_primitives_yellow_300);
    --vs_color_border_warning-hovered: var(--vs__color_primitives_yellow_100);
    --vs_color_border_success: var(--vs__color_primitives_green_300);
    --vs_color_border_success-hovered: var(--vs__color_primitives_green_100);
    --vs_color_border_info: var(--vs__color_primitives_blue_300);
    --vs_color_border_info-hovered: var(--vs__color_primitives_blue_100);
    --vs_color_border_light: var(--vs__color_primitives_blue_gray_200);

    /* Text */
    --vs_color_text_primary: var(--vs__color_primitives_blue_gray_900);
    --vs_color_text_secondary: var(--vs__color_primitives_blue_gray_600);
    --vs_color_text_heavy: var(--vs__color_primitives_blue_gray_500);
    --vs_color_text_light: var(--vs__color_primitives_blue_gray_600);
    --vs_color_text_success: var(--vs__color_primitives_green_200);
    --vs_color_text_orange: var(--vs__color_primitives_orange_300);
    --vs_color_text_error_light: var(--vs__color_primitives_red_200);

    /* Icon */
    --vs_color_icon_primary: var(--vs__color_primitives_blue_gray_800);
    --vs_color_icon_heavy: var(--vs__color_primitives_blue_gray_500);
    --vs_color_icon_light: var(--vs__color_primitives_blue_gray_400);
    --vs_color_icon_brand: var(--vs__color_primitives_violet_800);
    --vs_color_icon_brand-hovered: var(--vs__color_primitives_violet_600);
    --vs_color_icon_error: var(--vs__color_primitives_red_300);
    --vs_color_icon_warning: var(--vs__color_primitives_yellow_300);
    --vs_color_icon_success: var(--vs__color_primitives_green_300);
    --vs_color_icon_info: var(--vs__color_primitives_blue_300);
    --vs_color_icon_white: var(--vs__color_primitives_base_white);

    /* Divider */
    --vs_color_divider_primary: var(--vs__color_primitives_blue_gray_300);
    --vs_color_divider_secondary: var(--vs__color_primitives_blue_gray_500);
    --vs_color_divider_brand: var(--vs__color_primitives_violet_800);

    /* ---------- end color -----------*/
}