// Colors
// scss-docs-start color-variables
$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #eb2744;
$orange:  #fd7e14;
$yellow:  #EECF6D;
$green:   #1db954;
$teal:    #20c997;
$cyan:    #0dcaf0;
// scss-docs-end color-variables

// define black, white, gray
$white: #fff;
$black: #000;
$gray: #7d756c; // 6c757d 7d756c

// define gray scale
$gray-100: tint-color($gray, 80%);
$gray-200: tint-color($gray, 60%);
$gray-300: tint-color($gray, 40%);
$gray-400: tint-color($gray, 20%);
$gray-500: $gray;
$gray-600: shade-color($gray, 20%);
$gray-700: shade-color($gray, 40%);
$gray-750: shade-color($gray, 50%);
$gray-800: shade-color($gray, 60%);
$gray-900: shade-color($gray, 80%);


// spaceblue is based on coolors.co 'space cadet' #/* 212c40 */ which was bg color in Lester's original design
// background will be spaceblue-800
$spaceblue-100: #aebcd5;
$spaceblue-200: #93a6c8;
$spaceblue-300: #788fba;
$spaceblue-400: #5d79ac;
$spaceblue-500: #4c6594;
$spaceblue-600: #3e5379;
$spaceblue-700: #31415e;
$spaceblue-750: #2a3751;
$spaceblue-800: #212c40;
$spaceblue-850: #1c2536;
$spaceblue-900: #151c28;


// scss-docs-start theme-color-variables
$primary:       #51A39F;
$secondary:     #BF98A0;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $spaceblue-100;
$dark:          $spaceblue-900;
// scss-docs-end theme-color-variables


// Create your own map
$custom-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);


$body-bg: $spaceblue-800;
$body-color: $gray-200;
$text-muted: $gray-400;
$component-active-color: $dark;
$component-active-bg: $primary;

$component-hover-color: tint-color($light, 5%);
$component-hover-bg: rgba($white, .125);