
// Fonts base
$fonts-base: "../../../../public/assets/fonts" !default;

$enable-caret:                false !default;
$enable-rounded:              true !default;
$enable-shadows:              false !default;
$enable-gradients:            false !default;
$enable-transitions:          true !default;
$enable-reduced-motion:       true !default;
$enable-grid-classes:         true !default;
$enable-button-pointers:      true !default;
$enable-rfs:                  true !default;
$enable-validation-icons:     true !default;
$enable-negative-margins:     true !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities:  true !default;

$grid-row-columns:            8 !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           2rem !default;
$grid-row-columns:            6 !default;
// Prefix for :root CSS variables

$variable-prefix:             bs- !default;

// Tab size for :root tab-size
$tab-size:  4 !default;

// Characters which are escaped by the escape-svg function
$escaped-characters: (
  ("<", "%3c"),
  (">", "%3e"),
  ("#", "%23"),
  ("(", "%28"),
  (")", "%29"),
) !default;


// Color system

// Bg Soft level

$bg-soft-level:           -80% !default;
$bg-shade-level:           15% !default;
$bg-tint-level:            15% !default;

// White/Grays/Black colors
$white:    #FFF !default; 
$gray-100:  #F5F8FA;
$gray-200:  #EFF2F5;
$gray-300:  #E4E6EF;
$gray-400:  #B5B5C3;
$gray-500:  #A1A5B7;
$gray-600:  #7E8299;
$gray-700:  #5E6278;
$gray-800: #81838A !default; // Text content old(44444e)
$gray-900: #1F2023 !default; // Text content
$black:    #000 !default;



// fusv-disable
$grays: ( 
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
) !default;
// fusv-enable

// Base colors
$blue:    #335dff !default;
$indigo:  #754ffe !default;
$purple:  #8957FF !default;
$pink:    #FF579A !default;
$magenta: #EE33FF !default;
$red:     #DF325C !default;
$orange:  #FF5630 !default;
$yellow:  #fa9e25 !default;
$green:   #1cbd64 !default;
$teal:    #22DDDD !default;
$cyan:    #00D4FF !default;


// Theme colors
$primary:       #624de3 !default;
$secondary:     $gray-300 !default;
$tertiary:      $pink !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-200 !default;
$dark:          $gray-900 !default;

// scss-docs-start theme-colors-map
$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "tertiary":   $tertiary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "white":      $white,
    "light":      $light,
    "dark":       $dark, 
    "gray-100": $gray-100,
    "gray-200": $gray-200,
    "gray-300": $gray-300,
    "gray-400": $gray-400,
    "gray-500": $gray-500,
    "gray-600": $gray-600,
    "gray-700": $gray-700,
    "gray-800": $gray-800,
    "gray-900": $gray-900
) !default;
// scss-docs-end theme-colors-map


$whatsapp:      #25d366 !default;
$telegram:      #0088cc !default;
$facebook:      #3b5999 !default;
$twitter:       #1da1f2 !default;
$instagram:     #e4405f !default;
$youtube:       #cd201f !default;
// scss-docs-start brand-colors-map
$brand-colors: (
    "telegram":    $telegram,
    "whatsapp":      $whatsapp,
    "facebook":     $facebook,
    "twitter":      $twitter,
    "instagram":    $instagram,
    "youtube":      $youtube
) !default;

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:   2 !default;

// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark:      $black !default;
$color-contrast-light:     $white !default;

// Spacing
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 2,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5,
  8: $spacer * 7,
  9: $spacer * 9,
  10: $spacer * 12,
  11: $spacer * 13,
  12: $spacer * 14,
  13: $spacer * 15,
  14: $spacer * 16,
  15: $spacer * 17,
) !default;

// Body
//
// Settings for the `<body>` element.

$body-bg:                   $white !default;
$body-color:                $gray-700 !default;
$body-text-align:           null !default;

// Typography
//
// Font, line-height, and color for body text, headings, and more.
 
// font-variables
$font-family-sans-serif:      "Inter" !default;

// Links
//
// Style anchor elements.

$link-color:                    $primary !default;
$link-decoration:               none !default;
$link-hover-color:              shade-color($link-color, 15%) !default;
$link-hover-decoration:         none !default;
$font-size-base:                1rem !default; // Assumes the browser default, typically `16px`


$font-size-xxs:                $font-size-base * .65 !default;
$font-size-xs:                $font-size-base * .75 !default;
$font-size-sm:                $font-size-base * .875 !default;
$font-size-md:                $font-size-base * 1.125 !default;
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-xl:                $font-size-base * 1.5 !default;
$font-size-2xl:               $font-size-base * 2 !default;

$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-semibold:        500 !default;
$font-weight-bold:            600 !default;
$font-weight-bolder:          700 !default;
$font-weight-black:           800 !default;

$font-weight-base:            $font-weight-normal !default;

$line-height-base:            1.6 !default;
$line-height-sm:              1.4 !default;
$line-height-lg:              2 !default;

$h1-font-size:                $font-size-base * 2.25 !default;
$h2-font-size:                $font-size-base * 1.75 !default;
$h3-font-size:                $font-size-base * 1.375 !default;
$h4-font-size:                $font-size-base * 1.125 !default;
$h5-font-size:                $font-size-base * 1 !default;
$h6-font-size:                $font-size-base * .875 !default;

$headings-margin-bottom:      0 !default;
$headings-font-family:        null !default;
$headings-font-style:         null !default;
$headings-font-weight:        $font-weight-bold !default;
$headings-line-height:        1.4 !default;
$headings-color:              var(--#{$variable-prefix}gray-900) !default;

$large-headings-font-weight:  $headings-font-weight !default;
$small-headings-font-weight:  $font-weight-bold !default;


// scss-docs-start display-headings
$display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
) !default;

$display-font-weight:        $font-weight-bolder !default;
$display-line-height:        $headings-line-height !default;
$display-color:              $headings-color !default;
// scss-docs-end display-headings

$lead-font-size:              $font-size-base * 1.125 !default;
$lead-font-weight:            $font-weight-normal !default;

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

$sub-sup-font-size:           .75em !default;

$text-muted:                  var(--#{$variable-prefix}gray-500) !default;
$text-muted-hover:            var(--#{$variable-prefix}gray-600) !default;
 
// Global variables
$component-active-color:      $white !default;
$component-active-bg:         $primary !default;

$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;

// scss-docs-start container-max-widths
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1400px
) !default;

$border-color:                $gray-300 !default;
$border-width:                1px !default;

$border-radius-sm:            .25rem !default;
$border-radius:               .375rem !default;
$border-radius-lg:            .5rem !default;
$border-radius-xl:            .75rem !default;
$border-radius-2xl:            1rem !default;
$border-radius-3xl:            1.5rem !default;
$border-radius-4xl:            3rem !default;
$border-radius-5xl:            4rem !default;
$border-radius-6xl:            5rem !default;
$border-radius-7xl:            6rem !default;
$border-radius-8xl:            7rem !default;
$border-radius-pill:           50rem !default;
$border-radius-circle:         50% !default;

// Close

// scss-docs-start close-variables
$btn-close-width:            .75em !default;
$btn-close-height:           $btn-close-width !default;

// box-shadow-variables
$box-shadow:                  0 0 1.25rem rgba($gray-700, .15) !default;
$box-shadow-sm:               0 0.125rem 0.25rem rgba($gray-900, .045) !default;
$box-shadow-lg:               0 1rem 3rem rgba($gray-700, .175) !default;
$box-shadow-xl:               0px 9px 9px -1px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06) !default;
$box-shadow-inset:            inset 0 1px 2px rgba($gray-700, .075) !default;


$blockquote-margin-y:         $spacer !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;
$blockquote-footer-color:     $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;

$hr-margin-y:                 $spacer !default;
$hr-color:                    $gray-100 !default;
$hr-height:                   $border-width !default;
$hr-opacity:                  .9 !default;

// Transitions
$transition-base-duration:      .2s;
$transition-fade:               opacity $transition-base-duration linear !default;
$transition-collapse:           height $transition-base-duration ease !default;
$transition-cubic-bezier:       all $transition-base-duration cubic-bezier(.77, 0, .2, 2.25) !default;
$transition-bg:                 background-color $transition-base-duration * 2 linear !default;
$transition-ease-in-out:        all $transition-base-duration ease-in-out !default;
$transition-base:               all $transition-base-duration ease !default;

// Transition properties for utilities
$transition-property:               background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !default;
$transition-property-colors:        background-color, border-color, color, fill, stroke !default;

$transition-timing-function:        cubic-bezier(0.4, 0, 0.2, 1) !default;
$transition-in-timing-function:     cubic-bezier(0.4, 0, 1, 1) !default;
$transition-out-timing-function:    cubic-bezier(0, 0, 0.2, 1) !default;
$transition-in-out-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;



// Navs

$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-font-size:                null !default;
$nav-link-font-weight:              null !default;
$nav-link-color:                    var(--#{$variable-prefix}gray-700) !default;
$nav-link-hover-color:              var(--theme-color) !default;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color:           $gray-400 !default;


// Navbar 
$navbar-transition:                 all .15s linear !default;
$navbar-padding-y:                  .75rem !default;
$navbar-padding-x:                  0 !default;

$navbar-nav-link-padding-x:         .75rem !default;
$navbar-nav-link-padding-y:         1rem !default;


$navbar-dark-color:                 $white !default;
$navbar-dark-hover-color:           var(--theme-color) !default;

$navbar-light-color:                 var(--#{$variable-prefix}gray-700) !default;
$navbar-light-hover-color:           var(--theme-color) !default;




// Avatars

$avatar-width:                      2.25rem !default;
$avatar-font-size:                  10px !default;
$avatar-border-radius:              100px !default;

$avatar-width-2xl:                  6rem !default;
$avatar-font-size-2xl:              $avatar-font-size * 2.5 !default;
$avatar-border-radius-2xl:          100px !default;

$avatar-width-xl:                   3rem !default;
$avatar-font-size-xl:               $avatar-font-size * 1.375 !default;
$avatar-border-radius-xl:           100px !default;

$avatar-width-lg:                   2.5rem !default;
$avatar-font-size-lg:               $avatar-font-size * 1.25 !default;
$avatar-border-radius-lg:           100px !default;

$avatar-width-sm:                   1.5rem !default;
$avatar-font-size-sm:               $avatar-font-size * .75 !default;
$avatar-border-radius-sm:           100px !default;

$avatar-width-xs:                   1rem !default;
$avatar-font-size-xs:               $avatar-font-size * .675 !default;
$avatar-border-radius-xs:           100px !default;

$avatar-bg:                         var(--theme-color) !default;
$avatar-color:                      $white !default;
$avatar-font-weight:                $font-weight-bold !default;
$play-svg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$white}'><polygon points='5 3 19 12 5 21 5 3'></polygon></svg>") !default;


// Card

$card-spacer-y:                     1.5rem !default;
$card-spacer-x:                     1.5rem !default;
$card-title-spacer-y:               1.5rem !default;

$card-color:                        $body-color !default;
$card-bg:                           $gray-200 !default;
$card-border-width:                 1px !default;
$card-border-color:                 $gray-200 !default;
$card-border-radius:                $border-radius-lg !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;

$card-cap-padding-y:                1.25rem !default;
$card-cap-padding-x:                $card-spacer-x !default;
$card-cap-color:                    $headings-color !default;
$card-cap-bg:                       transparent !default;
$card-cap-border-width:             1px !default;
$card-cap-border-color:             $card-border-color !default;


// Square/Circle shape buttons

$btn-square-width:                      2.875rem !default;
$btn-square-width-2xl:                  7.5rem !default;
$btn-square-width-xl:                   6rem !default;
$btn-square-width-lg:                   3.5rem !default;
$btn-square-width-sm:                   2.25rem !default;
$btn-square-width-xs:                   1.5rem !default;


// Tooltips

$tooltip-font-size:                 $font-size-xs !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     var(--#{$variable-prefix}gray-700) !default;
$tooltip-bg:                        var(--#{$variable-prefix}gray-300) !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   1 !default;
$tooltip-padding-y:                 $spacer * .35 !default;
$tooltip-padding-x:                 $spacer * .875 !default;
$tooltip-margin:                    0 !default;

$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
$tooltip-arrow-color:               $tooltip-bg !default;


// Buttons + Forms

$input-btn-padding-y:         .75rem !default;
$input-btn-padding-x:         1.5rem !default;
$input-btn-font-size:         $font-size-sm !default;
$input-btn-line-height:       $line-height-sm !default;

$input-btn-focus-width:         1px !default;
$input-btn-focus-color-opacity: 1 !default;
$input-btn-focus-color:         #fff !default;
$input-btn-focus-blur:          0 !default;
$input-btn-focus-box-shadow:    0 0 0 $gray-300 !default;
$input-focus-border-color:      $gray-300 !default;

$input-btn-padding-y-xs:      .375rem !default;
$input-btn-padding-x-xs:      1rem !default;
$input-btn-font-size-xs:      $font-size-xs !default;
$input-btn-line-height-xs:    $input-btn-line-height !default;

$input-btn-padding-y-sm:      .5rem !default;
$input-btn-padding-x-sm:      1rem !default;
$input-btn-font-size-sm:      $font-size-sm !default;
$input-btn-line-height-sm:    $input-btn-line-height !default;

$input-btn-padding-y-lg:      1rem !default;
$input-btn-padding-x-lg:      1.5rem !default;
$input-btn-font-size-lg:      $font-size-base !default;
$input-btn-line-height-lg:    $input-btn-line-height !default;

$input-btn-padding-y-xl:      1.5rem !default;
$input-btn-padding-x-xl:      2rem !default;
$input-btn-font-size-xl:      $font-size-base !default;
$input-btn-line-height-xl:    $input-btn-line-height !default;

$input-btn-border-width:      $border-width !default;

$input-bg:                              $gray-300 !default;
$input-disabled-bg:                     $gray-300 !default;
$input-disabled-border-color:           null !default;

$input-color:                           var(--#{$variable-prefix}gray-700) !default;
$input-border-color:                    $gray-300 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      0px 1px 2px rgba(50, 50, 71, 0.08) !default;

$input-group-addon-color:               $gray-600 !default;
$input-group-addon-bg:                  $gray-300 !default;
$input-group-addon-border-color:        $input-border-color !default;


$form-text-margin-top:                  .25rem !default;
$form-text-font-size:                   $small-font-size !default;
$form-text-font-style:                  null !default;
$form-text-font-weight:                 null !default;
$form-text-color:                       $text-muted !default;

$form-label-margin-bottom:              .5rem !default;
$form-label-font-size:                  $font-size-sm !default;
$form-label-font-style:                 null !default;
$form-label-font-weight:                $font-weight-normal !default;
$form-label-color:                      $gray-600 !default;

$rating-star:       url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M17.9185 14.3201C17.6595 14.5711 17.5405 14.9341 17.5995 15.2901L18.4885 20.2101C18.5635 20.6271 18.3875 21.0491 18.0385 21.2901C17.6965 21.5401 17.2415 21.5701 16.8685 21.3701L12.4395 19.0601C12.2855 18.9781 12.1145 18.9341 11.9395 18.9291H11.6685C11.5745 18.9431 11.4825 18.9731 11.3985 19.0191L6.96851 21.3401C6.74951 21.4501 6.50151 21.4891 6.25851 21.4501C5.66651 21.3381 5.27151 20.7741 5.36851 20.1791L6.25851 15.2591C6.31751 14.9001 6.19851 14.5351 5.93951 14.2801L2.32851 10.7801C2.02651 10.4871 1.92151 10.0471 2.05951 9.65011C2.19351 9.25411 2.53551 8.96511 2.94851 8.90011L7.91851 8.17911C8.29651 8.14011 8.62851 7.91011 8.79851 7.57011L10.9885 3.08011C11.0405 2.98011 11.1075 2.88811 11.1885 2.81011L11.2785 2.74011C11.3255 2.68811 11.3795 2.64511 11.4395 2.61011L11.5485 2.57011L11.7185 2.50011H12.1395C12.5155 2.53911 12.8465 2.76411 13.0195 3.10011L15.2385 7.57011C15.3985 7.89711 15.7095 8.12411 16.0685 8.17911L21.0385 8.90011C21.4585 8.96011 21.8095 9.25011 21.9485 9.65011C22.0795 10.0511 21.9665 10.4911 21.6585 10.7801L17.9185 14.3201Z' fill='currentColor'/></svg>") !default;


$input-placeholder-color:               var(--#{$variable-prefix}gray-500) !default; 


// Pagination

$pagination-padding-y:              .75rem !default;
$pagination-padding-x:              1rem !default;
$pagination-font-size:              $font-size-sm !default;

$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .75rem !default;
$pagination-font-size-sm:           $font-size-sm !default;

$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;
$pagination-font-size-lg:           $font-size-base !default;

$pagination-bg:                     $gray-100 !default;
$pagination-color:                  $gray-600 !default;
$pagination-border-radius:          $border-radius !default;
$pagination-hover-color:            $gray-900 !default;
$pagination-hover-bg:               $gray-200 !default;
$pagination-hover-border-color:     $gray-200 !default !default;
$pagination-focus-color:            $link-hover-color !default;
$pagination-focus-bg:               $gray-100 !default;
$pagination-focus-box-shadow:       none !default;
$pagination-focus-outline:          0 !default;
$pagination-active-color:           $white !default;
$pagination-active-bg:              $primary !default;
$pagination-active-border-color:    $pagination-active-bg !default;


// Modals
$modal-sm:                          500px;
$modal-md:                          700px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-inner-padding:               3rem !default;

$modal-footer-margin-between:       1rem !default;

$modal-content-bg:                  $white !default;
$modal-content-border-color:        rgba($black, .2) !default;
$modal-content-border-width:        0 !default;
$modal-content-border-radius:       $border-radius-3xl !default;
$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .3) !default;
$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .3) !default;

$modal-backdrop-bg:                 $gray-900 !default;
$modal-backdrop-opacity:            .94 !default;
$modal-header-border-color:         $border-color !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-footer-border-width:         $modal-header-border-width !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-vertical-width:              350px !default;
$modal-vertical-lg:                 450px !default;
$modal-vertical-space-y:            .5rem !default;
$modal-vertical-space-x:            0 !default;
$modal-vertical-border-radius:      $modal-content-border-radius 0 0 $modal-content-border-radius !default;

// Dropdown

$dropdown-min-width-sm:             10rem !default;
$dropdown-min-width:                10rem !default;
$dropdown-min-width-md:             15rem !default;
$dropdown-min-width-lg:             30rem !default;
$dropdown-min-width-xl:             40rem !default;
$dropdown-min-width-2xl:            50rem !default;

$badge-bg:       url("data:image/svg+xml,<svg viewBox='0 0 512 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M335.5 64H400C426.5 64 448 85.49 448 112V176.5L493.6 222.1C512.3 240.8 512.3 271.2 493.6 289.9L448 335.5V400C448 426.5 426.5 448 400 448H335.5L289.9 493.6C271.2 512.3 240.8 512.3 222.1 493.6L176.5 448H112C85.49 448 64 426.5 64 400V335.5L18.41 289.9C-.3328 271.2-.3328 240.8 18.41 222.1L64 176.5V112C64 85.49 85.49 64 112 64H176.5L222.1 18.41C240.8-.3309 271.2-.3309 289.9 18.41L335.5 64z'/></svg>") !default;
