$primary: #1E1E1E
$primary-dark: darken($primary, 20%)
$primary-light: lighten($primary, 20%)
$secondary: #636363
$secondary-dark: darken($secondary, 20%)
$secondary-light: lighten($secondary, 20%)
$tertiary: #A8A8A8
$tertiary-dark: darken($tertiary, 20%)
$tertiary-light: lighten($tertiary, 20%)

$white: #F9F9FA
$black: #0F0F0F
$grey: #858585
$grey-light: lighten($grey, 20%)
$red: #8B0000
$purple: #4B0082
$midnight-black: #0F0F0F
$darkgrey: #202020
$grey2: #2D2D2D
$dark-grey: #202020

$button-color: $white
$button-background-color: $black
:root
    --primary: #{$primary}
    --primary-light: #{$primary-light}
    --primary-dark: #{$primary-dark}
    --secondary: #{$secondary}
    --secondary-light: #{$secondary-light}
    --secondary-dark: #{$secondary-dark}
    --tertiary: #{$tertiary}
    --tertiary-light: #{$tertiary-light}
    --tertiary-dark: #{$tertiary-dark}
    --white: #{#F9F9FA}
    --grey: #{$grey}
    --grey-light: #{$grey-light}
    --grey2: #{$grey2}
    --dark-grey: #{$dark-grey}
    --purple: #{$purple}
    --blood-color: #{$red}
    --midnight-black: #{$midnight-black}
    --black: #{$midnight-black}
    --darkgrey: #{$darkgrey}

//fonts
.low-mid-text
    font-family: Inter
    font-size: 16px
    font-style: normal
    font-weight: 400
    line-height: normal
    @media (min-width: 992px)
        font-size: 24px
.mid-mid-text
    font-family: Inter
    font-size: 18px
    font-style: normal
    font-weight: 400
    line-height: normal
    @media (min-width: 992px)
        font-size: 24px
.mid-text
    font-family: Inter
    font-size: 24px
    font-style: normal
    font-weight: 400
    line-height: normal
.small-text
    font-family: Inter
    font-size: 14px
    font-style: normal
    font-weight: 400
    line-height: normal
    @media (min-width: 992px)
        font-size: 18px
.number-mobile
    font-family: Inter
    font-size: 24px
    font-style: normal
    font-weight: 400
    line-height: normal
    letter-spacing: 4.32px
.sub-header
    font-family: Inter
    font-style: normal
    font-weight: 400
    line-height: normal
    font-size: 24px
    @media (min-width: 992px)
        font-size: 32px
.header
    font-family: Inter
    font-size: 32px
    font-style: normal
    font-weight: 400
    line-height: normal
    @media (min-width: 992px)
        font-size: 40px

// :root
//     --font-size-text: 16px
//     --font-size-title: 32px
//     @media (min-width: 992px)
//         --font-size-text: 24px
//         --font-size-title: 36px

.text-center
    text-align: center

.transparent
    background-color: transparent

.card
    border-radius: 16px
    @media (min-width: 992px)
        padding: 48px 32px
    &.card--glow
        box-shadow: 0px 12px 150px 0px rgba(75, 0, 130, 0.35)