:root {
    --gray-base: #202430;
    --gray-shade-60: #13161D;
    --gray-tint-30: #63666E;
    --gray-tint-50: #909298;
    --gray-tint-80: #D2D3D6;
    --gray-alpha-80: rgb(32 36 48 / .8);
    --gray-tint-90: #E9E9EA;
    --white-base: #fff;
    --primary-base: #358FE6;
    --extras-sun: #FFD371;
    --extras-moon: #7190FF;
    --extras-black-alpha-64: rgb(0 0 0 / .64);
    --extras-white-alpha-64: rgb(255 255 255 / .64);


    --primary-tone: #283583;
    --primary-tone-n1: #27316A;
    --primary-tone-n2: #242855;
    --primary-tone-n3: #1D1F40;
    --primary-tone-n4: #16172D;
    --primary-tone-n5: #100D19;
    --primary-tone-1: #515498;
    --primary-tone-2: #7673AC;
    --primary-tone-3: #9692C0;
    --primary-tone-4: #B9B5D4;
    --primary-tone-5: #DBD9E9;
    --primary-tone-5_5: #E9E8F2;
    --primary-tone-6: #F1F0F6;
    --primary-tone-7: #F8F7FB;

    --secondary-tone: #EDE9E3;
    --secondary-tone-n1: #D2CCC3;
    --secondary-tone-n2: #B7AFA3;
    --secondary-tone-n3: #9C9282;
    --secondary-tone-n4: #8F8472;
    --secondary-tone-n5: #817562;
    --secondary-tone-n6: #746752;
    --secondary-tone-n7: #665842;
    --secondary-tone-1: #F1EDE9;
    --secondary-tone-2: #F4F2EE;
    --secondary-tone-3: #F8F6F4;
    --secondary-tone-4: #FAF8F7;
    --secondary-tone-5: #FBFBF9;
    --secondary-tone-6: #FDFDFC;
    --secondary-tone-7: #FDFDFD;

    --tertiary-tone: #F7AE00;
    --tertiary-tone-n1: #CB9821;
    --tertiary-tone-n2: #A0781D;
    --tertiary-tone-n3: #78591C;
    --tertiary-tone-n4: #4E3C18;
    --tertiary-tone-n5: #282114;
    --tertiary-tone-1: #FCC452;
    --tertiary-tone-2: #FDCF78;
    --tertiary-tone-3: #FFDA97;
    --tertiary-tone-4: #FFE7B9;
    --tertiary-tone-5: #FFF2DC;

    --dark-tone: #000000;
    --light-tone: #ffffff;
    --danger-tone: #FF0000;
    --success-tone: #40BF6A;
    --light-blue: #58C2EA;
}

.bg-white {
    background-color: #ffffff;
}

.bg-secondary-3 {
    background-color: var(--secondary-tone-3);
}

.bg-secondary-4 {
    background-color: var(--secondary-tone-4);
}

.bg-secondary-6 {
    background-color: var(--secondary-tone-6);
}

.bg-secondary-7 {
    background-color: var(--secondary-tone-7);
}

.text-primary {
    color: var(--primary-tone) !important;
}

.text-primary-1 {
    color: var(--primary-tone-1) !important;
}

.text-primary-5 {
    color: var(--primary-tone-5);
}

.text-danger {
    color: var(--danger-tone) !important;
}

.text-secondary-n7 {
    color: var(--secondary-tone-n7);
}

.text-tertiary-n3 {
    color: var(--tertiary-tone-n3);
}

.text-orange {

}

