// Colors of project

// Brand-colors
$primary-normal: #E42B2F;
$primary-dark: #AB0E12;
$primary-light: #FA3C41;

$secondary-normal: #1850E1;
$secondary-dark: #1141BD;
$secondary-light: #4271EB;

// Neutral-colors
$black-normal: #0B1425;
$black-dark: #040C1B;
$black-light: #111929;

$black-lighten: #293140;
$black-darken: #090F1D;

$white-normal: #EBEEF2;
$white-dark: #DCE1E8;
$white-light: #F8FBFF;

// Gray Scale
$gray-1: #252626;
$gray-2: #353536;
$gray-3: #4C4C4D;
$gray-4: #646465;
$gray-5: #7C7C7D;
$gray-6: #949494;
$gray-7: #9EA0A3;

// Auxiliary colors
$red-normal: #F03D3D;
$red-dark: #d03333;
$red-light: #f05454;

$green-normal: #0BB07B;
$green-dark: #28bb49;
$green-light: #50e170;

$yellow-normal: #FFCE52;
$yellow-dark: #d9b043;
$yellow-light: #ffd76b;

.color-white{
    color: $white-normal;
}

.color-primary{
    color: $primary-normal;
}

.color-gradient{
    display: inline-block;
    background: linear-gradient(224.78deg, $primary-normal 8.12%, $secondary-dark 92.21%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.label{
    background: linear-gradient(224.78deg, $primary-normal 8.12%, $secondary-dark 92.21%); 
    display: inline-block;
    padding: 3px 8px;
    border-radius: 2px;

    color: $black-dark;
}

.color-gray{
    color: $gray-5;
}

.color-red{
    color: $red-normal;
}

.color-green{
    color: $green-normal;
}

.color-yellow{
    color: $yellow-normal;
}

.bg-red{
    background-color: $red-normal;
}

.bg-green{
    background-color: $green-normal;
}

.bg-yellow{
    background-color: $yellow-normal;
}


