//Colors

// White/black
$white:    #FFFFFF;
$black:    #000;

// Blues
$blue-100:   #E4F1F7;// Used in theme
$blue-200:   #C1DFEE;
$blue-300:   #9FCEE6;
$blue-400:   #69ADCF;// Used in theme
$blue-500:   #3B8FB8;
$blue:       #1574A1;// Default Blue
$blue-700:   #06577C;
$blue-800:   #003D58;
$blue-900:   #002433;// Used in theme

// Reds
$red-100:    #FFE6E4;
$red-200:    #FDC0BB;
$red-300:    #FB9A93;
$red-400:    #EB5E54;
$red:        #DA291C;// Default Red
$red-600:    #B0160B;
$red-700:    #870900;
$red-800:    #5D0600;
$red-900:    #330300;

// Greens
$green-100:  #E3F2EA;
$green-200:  #BCEDD4;
$green-300:  #94D7B6;
$green-400:  #EB594F;// Used in theme
$green-500:  #2CA168;
$green:      #C40E01;// Default Green
$green-700:  #006A36;
$green-800:  #004F28;
$green-900:  #00331A;

// Yellows
$yellow-100: #FFF5EB;
$yellow-200: #FFE7C7;
$yellow-300: #FFD8A1;
$yellow-400: #FFB25C;
$yellow:     #F88F1C;// Default Yellow
$yellow-600: #C76902;
$yellow-700: #964E00;
$yellow-800: #643400;
$yellow-900: #331A00;

// Grays
$gray-100:   #F5F5F5;// Used in theme
$gray-200:   #E3E4E4;// Used in theme
$gray-300:   #D2D4D4;
$gray:       #B0B3B3;// Default Gray
$gray-500:   #8E9292;// Used in theme
$gray-600:   #4D5151;// Used in theme
$gray-700:   #303333;// Used in theme
$gray-800:   #222424;// Used in theme
$gray-900:   #181A1A;// Used in theme

// Miscellaneous Colors
$indigo:     #6610f2;
$purple:     #6f42c1;
$pink:       #d63384;
$orange:     #fd7e14;
$teal:       #20c997;
$cyan:       #0dcaf0;

// 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,
"gray-dark":  $gray-500
);

// scss-docs-start theme-color-variables
$primary:       $blue;
$secondary:     $red;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-500;

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

//Fonts
$font-family-sans-serif:      Roboto, Arial, Helvetica, sans-serif;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            $font-family-sans-serif;
$font-family-code:            $font-family-monospace;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`

//Font weight
$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            500;
$font-weight-bolder:          bolder;

//Headings
$h1-font-size:                $font-size-base * 3;
$h2-font-size:                $font-size-base * 2.625;
$h3-font-size:                $font-size-base * 2;
$h4-font-size:                $font-size-base * 1.625;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base * .875;

//Border Radius
$border-radius:               .25rem;
$border-radius-sm:            .2rem;
$border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
$border-radius-pill:          50rem;

//Spacing
// Seven spacers available instead of the usual 5
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
  7: $spacer * 3,
);

//Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 838px,
  lg: 1074px,
  xl: 1416px
);