//
// user-variables.scss
// Use this to overwrite Bootstrap and Electro variables
//

// Example of a variable override to change Electro's background color
// Remove the "//" to comment it in and see it in action!
// $font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dddddd !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #333e48 !default;
$black:    #000 !default;


$blue:              #0d6efd !default;
$indigo:            #6610f2 !default;
$purple:            #6f42c1 !default;
$pink:              #d63384 !default;
$red:               #dc3545 !default;
$orange:            #fd7e14 !default;
$yellow:            #fed700 !default;
$green:             #198754 !default;
$teal:              #20c997 !default;
$cyan:              #0dcaf0 !default;
$ec-dark:           #181818 !default;
$ec-dark-body:      rgb(217, 217, 217) !default;

// scss-docs-start colors-map
$colors: (
  "blue":          $blue,
  "indigo":        $indigo,
  "purple":        $purple,
  "pink":          $pink,
  "red":           $red,
  "orange":        $orange,
  "yellow":        $yellow,
  "green":         $green,
  "teal":          $teal,
  "cyan":          $cyan,
  "white":         $white,
  "gray":          $gray-600,
  "ec-dark":       $ec-dark,
  "ec-dark-body":  $ec-dark-body
) !default;
// scss-docs-end colors-map

$primary:       $yellow !default;
$primary-d:     darken($primary, 4.5%) !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;

// scss-docs-start theme-colors-map
$theme-colors: (
  "primary":    $primary,
  "ec-primary": $primary,
  "ec-primary-d": $primary-d,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4dot: $spacer * 1.25,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5,
  7: $spacer * 6,
) !default;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1480px
) !default;

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

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

$grid-gutter-width:           1.875rem !default;

// Links
//
// Style anchor elements.

$link-decoration:                         none !default;


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

// stylelint-disable value-keyword-case
$font-family-sans-serif:      "Inter", "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;

// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $font-size-base effects the font size of the body text
$font-size-base:              .875rem !default; // Assumes the browser default, typically `16px`

$line-height-base:            1.714 !default;
$line-height-sm:              1.25 !default;
$line-height-lg:              2 !default;
