@import "./variables/colors.scss";
/*will put this in updated colors.scss*/

.starship-v2 {
    * {
        /*static primitives all colors*/
        /*All Blue*/
        --blue-0: #1e417b;
        --blue-100: #43677b;
        --blue-200: #295bac;
        --blue-300: #5a8aa4;
        --blue-400: #659bb9;
        --blue-500: #70accd;
        /*new blue*/
        --blue-500a: #3b82f6;
        --blue-400a: #3575dd;
        /*new blue*/
        --blue-600: #7eb4d2;
        --blue-700: #8dbdd7;
        --blue-800: #9bc5dc;
        --blue-900: #a9cde1;
        --blue-1000: #b8d6e6;
        /*All Blue*/
        /*ALL Teal*/
        --teal-0: #1c252b;
        --teal-100: #212c33;
        --teal-200: #27333b;
        --teal-300: #2c3a44;
        --teal-400: #32424d;
        --teal-500: #374955;
        --teal-600: #4b5b66;
        --teal-700: #5f6d77;
        --teal-800: #738088;
        --teal-900: #879299;
        --teal-1000: #9ba4aa;
        /*ALL Teal*/
        /*ALL GRAY*/
        --gray-0: #2e3b44;
        --gray-100: #374651;
        --gray-200: #40525f;
        --gray-300: #495e6c;
        --gray-400: #52697a;
        --gray-500: #5b7587;
        --gray-600: #6b8393;
        --gray-700: #7c919f;
        --gray-800: #8c9eab;
        --gray-900: #9dacb7;
        --gray-1000: #adbac3;
        /*ALL GRAY*/
        /*ALL GREEN*/
        --green-0: #386753;
        --green-100: #437b64;
        --green-200: #4e9074;
        --green-300: #5aa485;
        --green-400: #65b995;
        --green-500: #70cda6;
        --green-600: #7ed2af;
        --green-700: #8dd7b8;
        --green-800: #9bdcc1;
        --green-900: #a9e1ca;
        --green-1000: #b8e6d3;
        /*ALL GREEN*/
        /*ALL RED*/
        --red-0: #673838;
        --red-100: #7b4343;
        --red-200: #904e4e;
        --red-300: #a45a5a;
        --red-400: #b96565;
        --red-500: #cd7070;
        --red-600: #d27e7e;
        --red-700: #d78d8d;
        --red-800: #dc9b9b;
        --red-900: #e1a9a9;
        --red-1000: #e6b8b8;
        /*ALL RED*/
        /*ALL YELLOW*/
        --yellow-0: #675a38;
        --yellow-100: #7b6b43;
        --yellow-200: #907d4e;
        --yellow-300: #a48f5a;
        --yellow-400: #b9a165;
        --yellow-500: #cdb370;
        --yellow-600: #d2bb7e;
        --yellow-700: #d7c28d;
        --yellow-800: #dcca9b;
        --yellow-900: #e1d1a9;
        --yellow-1000: #e6d9b8;
        /*ALL YELLOW*/
        /*ALL DARK*/
        --dark-0: #131318;
        --dark-100: #17191d;
        --dark-200: #1d1b20;
        --dark-300: #242228;
        --dark-400: #2b2930;
        --dark-500: #36343b;
        --dark-600: #49454f;
        --dark-700: #938f99;
        --dark-800: #cac4d0;
        --dark-900: #e6e0e9;
        --dark-1000: #fef7ff;
        --dark-tr-0: rgba(36, 34, 40, 0.8);
        /*ALL DARK*/
        /*ALL Light*/
        --light-0: #e7f1f6;
        --light-100: #f8fafc;
        --light-200: #d8e6ed;
        --light-300: #d5e4eb;
        --light-400: #e3ecf1;
        --light-500: #e5e6ed;
        --light-600: #585f71;
        --light-700: #525c76;
        --light-800: #434865;
        --light-900: #282a33;
        --light-1000: #212327;
        --light-tr-100: rgba(248, 250, 252, 0.8);
        /*ALL Light*/
        /*static primitives all colors*/

        /* ==> all dynamic colors*/
        /*==> coreColors */
        --brandPrimary: var(--blue-400a);
        /*new color*/
        --brandPrimaryactive: #76a8f9;
        /*new color*/

        --brandSecondary: var(--teal-600);
        --brandTertiary: var(--gray-400);
        --colorNegative: var(--red-400);
        --colorPositive: var(--green-300);
        --colorWarning: var(--yellow-500);
        --brandPrimaryHover: var(--blue-500);
        --brandPrimaryLight: var(--blue-500);
        --brandPrimaryDark: var(--blue-300);
        --colorPositiveLight: var(--green-400);
        --colorPositiveDark: var(--green-200);
        --colorNegativeLight: var(--red-500);
        --colorNegativeDark: var(--red-300);
        --brandSecondaryLight: var(--teal-700);
        --brandSecondaryDark: var(--teal-500);
        --brandTertiaryLight: var(--gray-500);
        --brandTertiaryDark: var(--gray-300);
        --colorStaticLight: var(--light-100);
        --colorStaticDark: var(--light-1000);
        /*==> coreColors */
        /* ==> baseColors */
        --base-0: var(--light-0);
        --base-100: var(--light-100);
        --base-200: var(--light-200);
        --base-300: var(--light-300);
        --base-400: var(--light-400);
        --base-500: var(--light-500);
        --base-600: var(--light-600);
        --base-700: var(--light-700);
        --base-800: var(--light-800);
        --base-900: var(--light-900);
        --base-1000: var(--light-1000);
        --base-translucent: var(--light-tr-100);
        /* ==> baseColors */
        /* ==> all dynamic colors*/
    }
}

.dark-theme.starship-v2 {
    * {
        /*==> coreColors */
        --brandPrimary: var(--blue-500a);
        --brandSecondary: var(--teal-500);
        --brandTertiary: var(--gray-500);
        --colorNegative: var(--red-500);
        --colorPositive: var(--green-500);
        --colorWarning: var(--yellow-500);
        --brandPrimaryHover: var(--blue-700);
        --brandPrimaryLight: var(--blue-700);
        --brandPrimaryDark: var(--blue-400a);
        --colorPositiveLight: var(--green-600);
        --colorPositiveDark: var(--green-400);
        --colorNegativeLight: var(--red-600);
        --colorNegativeDark: var(--red-400);
        --brandSecondaryLight: var(--teal-600);
        --brandSecondaryDark: var(--teal-400);
        --brandTertiaryLight: var(--gray-600);
        --brandTertiaryDark: var(--gray-400);
        --colorStaticLight: var(--dark-1000);
        --colorStaticDark: var(--dark-100);
        /*==> coreColors */
        /* ==> baseColors */
        --base-0: var(--dark-0);
        --base-100: var(--dark-100);
        --base-200: var(--dark-200);
        --base-300: var(--dark-300);
        --base-400: var(--dark-400);
        --base-500: var(--dark-500);
        --base-600: var(--dark-600);
        --base-700: var(--dark-700);
        --base-800: var(--dark-800);
        --base-900: var(--dark-900);
        --base-1000: var(--dark-1000);
        --base-translucent: var(--dark-tr-0);
        /* ==> baseColors */
    }
}

.starship-v2 {
    .base-0 {
        color: var(--base-0);
    }
    .base-0-bg {
        background-color: var(--base-0);
    }

    .base-100 {
        color: var(--base-100);
    }
    .base-100-bg {
        background-color: var(--base-100);
    }

    .base-200 {
        color: var(--base-200);
    }
    .base-200-bg {
        background-color: var(--base-200);
    }

    .base-300 {
        color: var(--base-300);
    }
    .base-300-bg {
        background-color: var(--base-300);
    }

    .base-400 {
        color: var(--base-400);
    }
    .base-400-bg {
        background-color: var(--base-400);
    }

    .base-500 {
        color: var(--base-500);
    }
    .base-500-bg {
        background-color: var(--base-500);
    }

    .base-600 {
        color: var(--base-600);
    }
    .base-600-bg {
        background-color: var(--base-600);
    }

    .base-700 {
        color: var(--base-700);
    }
    .base-700-bg {
        background-color: var(--base-700);
    }

    .base-800 {
        color: var(--base-800);
    }
    .base-800-bg {
        background-color: var(--base-800);
    }

    .base-900 {
        color: var(--base-900);
    }
    .base-900-bg {
        background-color: var(--base-900);
    }

    .base-1000 {
        color: var(--base-1000);
    }
    .base-1000-bg {
        background-color: var(--base-1000);
    }

    .base-translucent {
        color: var(--base-translucent);
    }
    .base-translucent-bg {
        background-color: var(--base-translucent);
    }

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

    .brandPrimary-bg {
        background-color: var(--brandPrimary);
    }

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

    .brandSecondary-bg {
        background-color: var(--brandSecondary);
    }

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

    .brandTertiary-bg {
        background-color: var(--brandTertiary);
    }

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

    .colorNegative-bg {
        background-color: var(--colorNegative);
    }

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

    .colorPositive-bg {
        background-color: var(--colorPositive);
    }

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

    .colorWarning-bg {
        background-color: var(--colorWarning);
    }

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

    .brandPrimaryHover-bg {
        background-color: var(--brandPrimaryHover);
    }
    .brandPrimaryLight {
        color: var(--brandPrimaryLight);
    }

    .brandPrimaryLight-bg {
        background-color: var(--brandPrimaryLight);
    }
    .brandPrimaryDark {
        color: var(--brandPrimaryDark);
    }
    .brandPrimaryDark-bg {
        background-color: var(--brandPrimaryDark);
    }
    .colorPositiveLight {
        color: var(--colorPositiveLight);
    }

    .colorPositiveLight-bg {
        background-color: var(--colorPositiveLight);
    }
    .colorPositiveDark {
        color: var(--colorPositiveDark);
    }

    .colorPositiveDark-bg {
        background-color: var(--colorPositiveDark);
    }
    .colorNegativeLight {
        color: var(--colorNegativeLight);
    }

    .colorNegativeLight-bg {
        background-color: var(--colorNegativeLight);
    }
    .colorNegativeDark {
        color: var(--colorNegativeDark);
    }
    .colorNegativeDark-bg {
        background-color: var(--colorNegativeDark);
    }
    .brandSecondaryLight {
        color: var(--brandSecondaryLight);
    }
    .brandSecondaryLight-bg {
        background-color: var(--brandSecondaryLight);
    }
    .brandSecondaryDark {
        color: var(--brandSecondaryDark);
    }
    .brandSecondaryDark-bg {
        background-color: var(--brandSecondaryDark);
    }
    .brandTertiaryLight {
        color: var(--brandTertiaryLight);
    }

    .brandTertiaryLight-bg {
        background-color: var(--brandTertiaryLight);
    }
    .brandTertiaryDark {
        color: var(--brandTertiaryDark);
    }

    .brandTertiaryDark-bg {
        background-color: var(--brandTertiaryDark);
    }
    .colorStaticLight {
        color: var(--colorStaticLight);
    }
    .colorStaticLight-bg {
        background-color: var(--colorStaticLight);
    }
    .colorStaticDark {
        color: var(--colorStaticDark);
    }

    .colorStaticDark-bg {
        background-color: var(--colorStaticDark);
    }
    /*all colors shades*/
    /*Blue Colors*/
    .blue-0 {
        color: var(--blue-0);
    }
    .blue-0-bg {
        background-color: var(--blue-0);
    }

    .blue-100 {
        color: var(--blue-100);
    }
    .blue-100-bg {
        background-color: var(--blue-100);
    }

    .blue-200 {
        color: var(--blue-200);
    }
    .blue-200-bg {
        background-color: var(--blue-200);
    }

    .blue-300 {
        color: var(--blue-300);
    }
    .blue-300-bg {
        background-color: var(--blue-300);
    }

    .blue-400 {
        color: var(--blue-400);
    }
    .blue-400-bg {
        background-color: var(--blue-400);
    }

    .blue-500 {
        color: var(--blue-500);
    }
    .blue-500-bg {
        background-color: var(--blue-500);
    }

    .blue-600 {
        color: var(--blue-600);
    }
    .blue-600-bg {
        background-color: var(--blue-600);
    }

    .blue-700 {
        color: var(--blue-700);
    }
    .blue-700-bg {
        background-color: var(--blue-700);
    }

    .blue-800 {
        color: var(--blue-800);
    }
    .blue-800-bg {
        background-color: var(--blue-800);
    }

    .blue-900 {
        color: var(--blue-900);
    }
    .blue-900-bg {
        background-color: var(--blue-900);
    }

    .blue-1000 {
        color: var(--blue-1000);
    }
    .blue-1000-bg {
        background-color: var(--blue-1000);
    }

    .base-translucent {
        color: var(--base-translucent);
    }
    .base-translucent-bg {
        background-color: var(--base-translucent);
    }
    /*Blue Colors*/
    /*Teal Colors*/
    .teal-0 {
        color: var(--teal-0);
    }
    .teal-0-bg {
        background-color: var(--);
    }

    .teal-100 {
        color: var(--teal-100);
    }
    .teal-100-bg {
        background-color: var(--teal-100);
    }

    .teal-200 {
        color: var(--teal-200);
    }
    .teal-200-bg {
        background-color: var(--teal-200);
    }

    .teal-300 {
        color: var(--teal-300);
    }
    .teal-300-bg {
        background-color: var(--teal-300);
    }

    .teal-400 {
        color: var(--teal-400);
    }
    .teal-400-bg {
        background-color: var(--teal-400);
    }

    .teal-500 {
        color: var(--teal-500);
    }
    .teal-500-bg {
        background-color: var(--teal-500);
    }

    .teal-600 {
        color: var(--teal-600);
    }
    .teal-600-bg {
        background-color: var(--teal-600);
    }

    .teal-700 {
        color: var(--teal-700);
    }
    .teal-700-bg {
        background-color: var(--teal-700);
    }

    .teal-800 {
        color: var(--teal-800);
    }
    .teal-800-bg {
        background-color: var(--teal-800);
    }

    .teal-900 {
        color: var(--teal-900);
    }
    .teal-900-bg {
        background-color: var(--teal-900);
    }

    .teal-1000 {
        color: var(--teal-1000);
    }
    .teal-1000-bg {
        background-color: var(--teal-1000);
    }
    /*Teal Colors*/

    /*Gray Colors*/
    .gray-0 {
        color: var(--gray-0);
    }
    .gray-0-bg {
        background-color: var(gray-0);
    }

    .gray-100 {
        color: var(--gray-100);
    }
    .gray-100-bg {
        background-color: var(--gray-100);
    }

    .gray-200 {
        color: var(--gray-200);
    }
    .gray-200-bg {
        background-color: var(--gray-200);
    }

    .gray-300 {
        color: var(--gray-300);
    }
    .gray-300-bg {
        background-color: var(--gray-300);
    }

    .gray-400 {
        color: var(--gray-400);
    }
    .gray-400-bg {
        background-color: var(--gray-400);
    }

    .gray-500 {
        color: var(--gray-500);
    }
    .gray-500-bg {
        background-color: var(--gray-500);
    }

    .gray-600 {
        color: var(--gray-600);
    }
    .gray-600-bg {
        background-color: var(--gray-600);
    }

    .gray-700 {
        color: var(--gray-700);
    }
    .gray-700-bg {
        background-color: var(--gray-700);
    }

    .gray-800 {
        color: var(--gray-800);
    }
    .gray-800-bg {
        background-color: var(--gray-800);
    }

    .gray-900 {
        color: var(--gray-900);
    }
    .gray-900-bg {
        background-color: var(--gray-900);
    }

    .gray-1000 {
        color: var(--gray-1000);
    }
    .gray-1000-bg {
        background-color: var(--gray-1000);
    }
    /*Gray Colors*/
    /*Green Colors*/
    .green-0 {
        color: var(--green-0);
    }
    .green-0-bg {
        background-color: var(--green-0);
    }
    .green-100 {
        color: var(--green-100);
    }
    .green-100-bg {
        background-color: var(--green-100);
    }
    .green-200 {
        color: var(--green-200);
    }
    .green-200-bg {
        background-color: var(--green-200);
    }
    .green-300 {
        color: var(--green-300);
    }
    .green-300-bg {
        background-color: var(--green-300);
    }
    .green-400 {
        color: var(--green-400);
    }
    .green-400-bg {
        background-color: var(--green-400);
    }
    .green-500 {
        color: var(--green-500);
    }
    .green-500-bg {
        background-color: var(--green-500);
    }
    .green-600 {
        color: var(--green-600);
    }
    .green-600-bg {
        background-color: var(--green-600);
    }
    .green-700 {
        color: var(--green-700);
    }
    .green-700-bg {
        background-color: var(--green-700);
    }
    .green-800 {
        color: var(--green-800);
    }
    .green-800-bg {
        background-color: var(--green-800);
    }
    .green-900 {
        color: var(--green-900);
    }
    .green-900-bg {
        background-color: var(--green-900);
    }
    .green-1000 {
        color: var(--green-1000);
    }
    .green-1000-bg {
        background-color: var(--green-1000);
    }
    /*Green Colors*/
    /*Red Colors*/
    .red-0 {
        color: var(--red-0);
    }
    .red-0-bg {
        background-color: var(--red-0);
    }
    .red-100 {
        color: var(--red-100);
    }
    .red-100-bg {
        background-color: var(--red-100);
    }
    .red-200 {
        color: var(--red-200);
    }
    .red-200-bg {
        background-color: var(--red-200);
    }
    .red-300 {
        color: var(--red-300);
    }
    .red-300-bg {
        background-color: var(--red-300);
    }
    .red-400 {
        color: var(--red-400);
    }
    .red-400-bg {
        background-color: var(--red-400);
    }
    .red-500 {
        color: var(--red-500);
    }
    .red-500-bg {
        background-color: var(--red-500);
    }
    .red-600 {
        color: var(--red-600);
    }
    .red-600-bg {
        background-color: var(--red-600);
    }
    .red-700 {
        color: var(--red-700);
    }
    .red-700-bg {
        background-color: var(--red-700);
    }
    .red-800 {
        color: var(--red-800);
    }
    .red-800-bg {
        background-color: var(--red-800);
    }
    .red-900 {
        color: var(--red-900);
    }
    .red-900-bg {
        background-color: var(--red-900);
    }
    .red-1000 {
        color: var(--red-1000);
    }
    .red-1000-bg {
        background-color: var(--red-1000);
    }
    /*Red Colors*/
    /*Yellow Colors*/
    .yellow-0 {
        color: var(--yellow-0);
    }
    .yellow-0-bg {
        background-color: var(--yellow-0);
    }
    .yellow-100 {
        color: var(--yellow-100);
    }
    .yellow-100-bg {
        background-color: var(--yellow-100);
    }
    .yellow-200 {
        color: var(--yellow-200);
    }
    .yellow-200-bg {
        background-color: var(--yellow-200);
    }
    .yellow-300 {
        color: var(--yellow-300);
    }
    .yellow-300-bg {
        background-color: var(--yellow-300);
    }
    .yellow-400 {
        color: var(--yellow-400);
    }
    .yellow-400-bg {
        background-color: var(--yellow-400);
    }
    .yellow-500 {
        color: var(--yellow-500);
    }
    .yellow-500-bg {
        background-color: var(--yellow-500);
    }
    .yellow-600 {
        color: var(--yellow-600);
    }
    .yellow-600-bg {
        background-color: var(--yellow-600);
    }
    .yellow-700 {
        color: var(--yellow-700);
    }
    .yellow-700-bg {
        background-color: var(--yellow-700);
    }
    .yellow-800 {
        color: var(--yellow-800);
    }
    .yellow-800-bg {
        background-color: var(--yellow-800);
    }
    .yellow-900 {
        color: var(--yellow-900);
    }
    .yellow-900-bg {
        background-color: var(--yellow-900);
    }
    .yellow-1000 {
        color: var(--yellow-1000);
    }
    .yellow-1000-bg {
        background-color: var(--yellow-1000);
    }
    /*Yellow Colors*/
    /*Dark Colors*/
    .dark-tr-0 {
        color: var(--dark-tr-0);
    }
    .dark-tr-0-bg {
        background-color: var(--dark-tr-0);
    }
    .dark-0 {
        color: var(--dark-0);
    }
    .dark-0-bg {
        background-color: var(--dark-0);
    }
    .dark-100 {
        color: var(--dark-100);
    }
    .dark-100-bg {
        background-color: var(--dark-100);
    }
    .dark-200 {
        color: var(--dark-200);
    }
    .dark-200-bg {
        background-color: var(--dark-200);
    }
    .dark-300 {
        color: var(--dark-300);
    }
    .dark-300-bg {
        background-color: var(--dark-300);
    }
    .dark-400 {
        color: var(--dark-400);
    }
    .dark-400-bg {
        background-color: var(--dark-400);
    }
    .dark-500 {
        color: var(--dark-500);
    }
    .dark-500-bg {
        background-color: var(--dark-500);
    }
    .dark-600 {
        color: var(--dark-600);
    }
    .dark-600-bg {
        background-color: var(--dark-600);
    }
    .dark-700 {
        color: var(--dark-700);
    }
    .dark-700-bg {
        background-color: var(--dark-700);
    }
    .dark-800 {
        color: var(--dark-800);
    }
    .dark-800-bg {
        background-color: var(--dark-800);
    }
    .dark-900 {
        color: var(--dark-900);
    }
    .dark-900-bg {
        background-color: var(--dark-900);
    }
    .dark-1000 {
        color: var(--dark-1000);
    }
    .dark-1000-bg {
        background-color: var(--dark-1000);
    }
    /*Dark Colors*/
    /*Light Colors*/
    .light-tr-100 {
        color: var(--light-tr-100);
    }
    .light-tr-100-bg {
        background-color: var(--light-tr-100);
    }
    .light-0 {
        color: var(--light-0);
    }
    .light-0-bg {
        background-color: var(--light-0);
    }
    .light-100 {
        color: var(--light-100);
    }
    .light-100-bg {
        background-color: var(--light-100);
    }
    .light-200 {
        color: var(--light-200);
    }
    .light-200-bg {
        background-color: var(--light-200);
    }
    .light-300 {
        color: var(--light-300);
    }
    .light-300-bg {
        background-color: var(--light-300);
    }
    .light-400 {
        color: var(--light-400);
    }
    .light-400-bg {
        background-color: var(--light-400);
    }
    .light-500 {
        color: var(--light-500);
    }
    .light-500-bg {
        background-color: var(--light-500);
    }
    .light-600 {
        color: var(--light-600);
    }
    .light-600-bg {
        background-color: var(--light-600);
    }
    .light-700 {
        color: var(--light-700);
    }
    .light-700-bg {
        background-color: var(--light-700);
    }
    .light-800 {
        color: var(--light-800);
    }
    .light-800-bg {
        background-color: var(--light-800);
    }
    .light-900 {
        color: var(--light-900);
    }
    .light-900-bg {
        background-color: var(--light-900);
    }
    .light-1000 {
        color: var(--light-1000);
    }
    .light-1000-bg {
        background-color: var(--light-1000);
    }
    /*Dark Colors*/
    /*all colors shades*/
    /*will put this in updated colors.scss*/
    /*all general classes*/

    /*all general classes*/

    .dark-theme.starship-v2 {
        background: var(--base-0);
        &,
        h1,
        h2,
        h3 {
            color: var(--base-800);
        }
    }
    .light-theme {
        /* add light theme styles here */
    }
}