//
// Variables
// --------------------------------------------------


// Import Bootstrap functions to use inside variables values
@import '../../../node_modules/bootstrap/scss/functions';


//== Colors
//
// Gray and brand colors to use across the Theme.

// Grayscale
$white:                 #fff !default;
$gray-100:              #f8fafc !default;
$gray-200:              #f8f9fa !default;
$gray-300:              #e2e8f0 !default;
$gray-400:              #c0c0c5 !default;
$gray-500:              #94a3b8 !default;
$gray-600:              #575757 !default;
$gray-700:            	#071c4d !default;
$gray-800:              #0b163f !default;
$gray-900:              #010e2b !default;
$black:                 #0c0800 !default;

// Brand colors
$primary:               #175cff !default;
$accent:                #077765 !default;
$secondary:             $gray-400 !default;
$info:		            #50b5ff !default;
$success:               #5cc9a7 !default;
$warning:               #ffb116 !default;
$danger:                #f25767 !default;
$light:                 $white !default;
$dark:                  $gray-800 !default;

// Adding new color to default Bootstrap's $theme-colors map
$theme-colors: (
        'primary':    $primary,
        'accent':     $accent,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
) !default;

// Faded colors map
$theme-faded-colors: (
        'primary':    rgba($primary, .09),
        'accent':     rgba($accent, .09),
        "success":    rgba($success, .09),
        "info":       rgba($info, .09),
        "warning":    rgba($warning, .09),
        "danger":     rgba($danger, .09),
        "light":      rgba($light, .09),
        "dark":       rgba($dark, .09)
) !default;

// Social brand colors
$facebook:      #3b5999;
$twitter:       #1da1f2;
$google:        #dd4b39;
$instagram:     #e4405f;
$pinterest:     #bd081c;
$youtube:       #cd201f;
$slack:         #3aaf85;
$dribbble:      #ea4c89;
$github:        #222222;
$dropbox:       #1E90FF;
$twitch:        #4B367C;
$paypal:        #ecb32c;
$behance:       #0057ff;
$reddit:        #E84422;

$brand-colors: ();
$brand-colors: map-merge((
        "facebook":     $facebook,
        "twitter":      $twitter,
        "google":       $google,
        "instagram":    $instagram,
        "pinterest":    $pinterest,
        "youtube":      $youtube,
        "slack":        $slack,
        "dribbble":     $dribbble,
        "dropbox":      $dropbox,
        "twitch":       $twitch,
        "paypal":       $paypal,
        "behance":      $behance,
        "reddit" :      $reddit,
        "github":       $github
), $brand-colors);

// Options
//
// Modifying Bootstrap global options

$enable-shadows:          false !default;
$enable-negative-margins: true !default;
$enable-smooth-scroll:    false !default;


// Spacing

$spacer: 1rem !default;
$grid-gutter-width: 1.5rem !default;

// Modifying default Bootstrap's $spacers map
$spacers: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        10: ($spacer * 10),
        'grid-gutter': $grid-gutter-width
) !default;


// Body

$body-color:            $gray-600 !default;


// Lists

$list-style-color:      $accent !default;


// Links

$link-color:              $primary !default;
$link-decoration:         none !default;
$link-hover-color:        darken($link-color, 10%) !default;
$link-hover-decoration:   none !default;
$link-transition:         color .25s ease-in-out !default;
$link-shade-percentage:   0% !default;

//transition
$transition-base:          all .3s ease-in-out !default;


// Components
//
// Define common padding and border radius sizes and more.

$border-width:                1px !default;
$border-color:                rgba($dark, .12) !default;
$border-light-color:          rgba($white, .12) !default;

// Border colors map
$border-colors: (
        'primary':    rgba($primary, .35),
        'accent':     rgba($accent, .35),
        "success":    rgba($success, .35),
        "info":       rgba($info, .35),
        "warning":    rgba($warning, .35),
        "danger":     rgba($danger, .35),
        "light":      $border-light-color,
        "dark":       rgba($dark, .35)
) !default;

$border-radius:               .3125rem !default;
$border-radius-lg:            .4375rem !default;
$border-radius-sm:            .25rem !default;

$box-shadow:                  0 .25rem 0.5625rem -.0625rem rgba($black, .03), 0 .275rem 1.25rem -.0625rem rgba($black, .05) !default;
$box-shadow-lg:               0 .3rem 1.525rem -.375rem rgba($black, .1) !default;
$box-shadow-sm:               0 .125rem 0.3rem -.0625rem rgba($black, .03), 0 .275rem .75rem -.0625rem rgba($black, .06) !default;
$box-shadow-inset:            inset 0 1px 2px transparent !default;


$caret-width:                 .275rem !default;

$component-active-bg:         $primary !default;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$path-to-fonts:               'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@400;500;600;700;800&display=swap' !default;

$font-family-sans-serif:      'Open Sans', sans-serif !default;
$font-family-monospace:       'Poppins', sans-serif !default;


$headings-color:              $gray-800 !default;

$font-size-base:              1rem !default;
$font-size-xl:                ($font-size-base * 1.625) !default;
$font-size-lg:                ($font-size-base * 1.125) !default;
$font-size-md:                ($font-size-base * .9375) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$font-size-ms:                ($font-size-base * .8125) !default;
$font-size-xs:                ($font-size-base * .75) !default;

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base * 1.0625 !default;

// Modifying default Bootstrap's $font-sizes map
$font-sizes: (
        1: $h1-font-size,
        2: $h2-font-size,
        3: $h3-font-size,
        4: $h4-font-size,
        5: $h5-font-size,
        6: $h6-font-size,
        'xl':   $font-size-xl,
        'lg':   $font-size-lg,
        'base': $font-size-base,
        'md':   $font-size-md,
        'sm':   $font-size-sm,
        'ms':   $font-size-ms,
        'xs':   $font-size-xs
) !default;

//lead
$lead-font-weight:            400 !default;


$font-weight-medium-light:    500 !default;
$font-weight-medium:          600 !default;
$font-weight-semibold:        700 !default;
$font-weight-bold:            800 !default;

$headings-font-family:        $font-family-monospace !default;
$headings-margin-bottom:      ($spacer * .625) !default;
$headings-font-weight:        $font-weight-medium !default;

$line-height-base:            1.75 !default;
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$display-font-sizes: (
        1: 5rem,
        2: 4.5rem,
        3: 4rem,
        4: 3.5rem,
        5: 3rem,
        6: 2.5rem,
        404: 10rem
) !default;

$display-font-weight:         $headings-font-weight !default;

$small-font-size:             .8em !default;


$hr-margin-y:                 0 !default;
$hr-color:                    $border-color !default;
$hr-opacity:                  1 !default;

$text-shadow:                 0 .0625rem rgba($black, .5) !default;
$text-muted:                  $gray-500 !default;


$blockquote-font-size:        $font-size-base !default;
$blockquote-footer-font-size: $font-size-sm !default;


// Buttons + Forms

$input-btn-padding-y:               .625rem !default;
$input-btn-padding-x:               1rem !default;
$input-btn-padding-y-sm:            .425rem !default;
$input-btn-padding-x-sm:            .75rem !default;
$input-btn-padding-y-lg:            .75rem !default;
$input-btn-padding-x-lg:            1.25rem !default;
$input-btn-focus-width:             0 !default;

$input-btn-font-size:               ($font-size-base * .9375) !default;
$input-btn-font-size-sm:            ($font-size-base * .8125) !default;
$input-btn-font-size-lg:            ($font-size-base * 1.0625) !default;


$input-border-color:                $border-color !default;
$input-focus-border-color:          $primary !default;
$input-border-radius:               0.375rem !default;
$input-padding-y:                   0.65rem !default;
$form-select-padding-y:             $input-padding-y !default;

// Buttons
$btn-font-family:                   $font-family-monospace !default;
$btn-padding-x:                     1.75rem !default;
$btn-padding-y:                     .65rem !default;
$btn-padding-x-sm:                  1rem !default;
$btn-padding-x-lg:                  1.5rem !default;
$btn-white-space:                   nowrap !default;
$btn-border-radius:                 .375rem !default;

$btn-dark-color:                    $white !default;
$btn-light-color:                   $gray-700 !default;
$btn-font-weight:                   $font-weight-medium-light !default;
$btn-box-shadow:                    unset !default;

$btn-icon-size:                     2.75rem !default;
$btn-icon-sm-size:                  2.25rem !default;
$btn-icon-lg-size:                  3.25rem !default;
$btn-icon-xl-size:                  4.55rem !default;

$btn-transition:                    color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out !default;

$btn-focus-box-shadow:              unset !default;
$btn-active-box-shadow:             unset !default;

$btn-pill-border-radius:            ($font-size-base * $line-height-base + $input-btn-padding-y * 2 + .125) !default;
$btn-pill-border-radius-sm:         ($font-size-sm * $line-height-sm + $input-btn-padding-y-sm * 2 + .125) !default;
$btn-pill-border-radius-lg:         ($font-size-lg * $line-height-lg + $input-btn-padding-y-lg * 2 + .125) !default;

// Social buttons
$btn-social-border-width:             $border-width !default;
$btn-social-transition:               border-color .25s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out !default;

$btn-social-size:                     2.25rem !default;
$btn-social-size-sm:                  1.75rem !default;
$btn-social-size-lg:                  2.75rem !default;

$btn-social-font-size:                $font-size-sm !default;
$btn-social-font-size-sm:             $font-size-xs !default;
$btn-social-font-size-lg:             $font-size-base !default;

$btn-social-border-radius:            $border-radius !default;
$btn-social-border-radius-sm:         $border-radius-sm !default;
$btn-social-border-radius-lg:         $border-radius !default;

$btn-social-dark-color:               $gray-700 !default;
$btn-social-dark-hover-color:         $white !default;
$btn-social-dark-border-color:        $border-color !default;
$btn-social-dark-bg:                  $gray-200 !default;

$btn-social-light-color:              $white !default;
$btn-social-light-border-color:       $border-light-color !default;
$btn-social-light-bg:                 rgba($white, .08) !default;
$btn-social-light-hover-bg:           $white !default;

