$grid-breakpoints: (
  // Extra-Extra small screen / phone
  xxs: 0,
  // Extra small screen / phone
  xs: 544px,
  // Small screen / phone
  sm: 768px,
  // Medium screen / tablet
  md: 1024px,
  // Large screen / desktop
  lg: 1280px,
  // Extra large screen / wide desktop
  xl: 1400px,
  // Extra-Extra large screen (custom breakpoint)
  xxl: 1600px,
  // Maximum supported breakpoint (custom breakpoint)
  max: 1920px
) !default;

$vp-xs: "screen and ( min-width: #{map-get($grid-breakpoints, 'xs')})";
$vp-sm: "screen and ( min-width: #{map-get($grid-breakpoints, 'sm')})";
$vp-md: "screen and ( min-width: #{map-get($grid-breakpoints, 'md')})";
$vp-lg: "screen and ( min-width: #{map-get($grid-breakpoints, 'lg')})";
$vp-xl: "screen and ( min-width: #{map-get($grid-breakpoints, 'xl')})";
$vp-xxl: "screen and ( min-width: #{map-get($grid-breakpoints, 'xxl')})";
$vp-max: "screen and ( min-width: #{map-get($grid-breakpoints, 'max')})";

$enable-flex: true;
$enable-rounded: false;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: true;

$extended-letter-spacing: 0.0725rem !default;

$border-width: 0.0725rem;
$card-border-width: 0.0725rem;

$border-radius:          0 !default;
$border-radius-lg:       0 !default;
$border-radius-sm:       0 !default;

// Grayscale Colors
$gray: #9e9e9e;
$white: #fff;
$transparent: rgba(0, 0, 0, 0);
$gray-25: #fcfcfc;
$gray-50: #fafafa;
$gray-75: #f5f5f5;
$gray-100: #eee;
$gray-150: #eaeaea;
$gray-200: #ddd;
$gray-300: #ccc;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-650: #717171;
$gray-700: #616161;
$gray-800: #424242;
$gray-850: #333;
$gray-875: #2c2c2c;
$gray-900: #212121;
$gray-950: #161616;
$black: #000;
$border-color: $gray-100;

// Red Palette
$red-200: #ff897d;
$red-400: #ff2000;
$red-700: #d20c0c;
$red-800: #a20909;

// Blue Palette
$blue-200: #def0ff;
$blue-500: #a1d4ff;
$blue-700: #1194f6;
$blue-800: #0a62c3;

// Cyan Palette
$cyan-100: #d1ecf1;
$cyan-200: #64dde7;
$cyan-700: #05aabe;
$cyan-800: #008390;

// Teal Palette
$teal-200: #d7fab4;
$teal-500: #00bf8f;
$teal-700: #00936e;
$teal-800: #006f53;

// Green Palette
$green-700: #2a7e2e;
$green-400: #47b04b;
$green-200: #c7e7c8;

// Yellow Palette
$yellow-200: #fffac1;
$yellow-700: #ffc200;
$yellow-800: #e09b00;
$yellow-900: #867530;

// $purple-200: #b384ff;
// $purple-400: #6200ee;
// $purple-700: #6734ba;

// Primary Brand Palette Colors
$intense-orange: #f60;
$gunmetal: $gray-850;

// Secondary Brand Palette Colors
$alert-blue: $cyan-700;
$data-blue: $cyan-200;
$data-green: $teal-200;
$alert-green: $teal-500;

// Chart Palettes
// marine
$marine-020: #50E3C2;
$marine-040: #50B7C7;
$marine-060: #518BCB;
$marine-080: #515ED0;
$marine-100: #5132D4;
// meadow
$meadow-020: #D0EE4C;
$meadow-040: #A7CB55;
$meadow-060: #7FA95F;
$meadow-080: #568668;
$meadow-100: #2D6371;
// magma
$magma-020: #FECE22;
$magma-040: #FCA22D;
$magma-060: #F97537;
$magma-080: #F74942;
$magma-100: #CC1A42;

// Bootstrap Variable Overrides
$body-bg:                   $gray-50 !default;

$gray-dark:                 $gray-850 !default;
$gray:                      $gray-700 !default;
$gray-light:                $gray-500 !default;
$gray-lighter:              $gray-150 !default;
$gray-lightest:             $gray-75 !default;

$brand-primary:             $cyan-700 !default;
$brand-secondary:           $gray-200 !default;
$brand-success:             $green-700 !default;
$brand-warning:             $yellow-700 !default;
$brand-danger:              $red-700 !default;
$brand-info:                $blue-200 !default;


$alert-high:   $intense-orange;
$alert-medium: $alert-blue;
$alert-low:    $alert-green;

$btn-info-color:            $gray-850 !default;
$btn-warning-color:         $gray-850 !default;

$link-color:                $blue-800 !default;

$gray-darker:               $gray-900 !default;
$gray-dark:                 $gray-850 !default;
$gray:                      $gray-700 !default;
$gray-light:                $gray-600 !default;
$gray-lighter:              $gray-300 !default;
$gray-lightest:             $gray-100 !default;

$shadow:                    rgba(0, 0, 0, 0.1);
$shadow-lighter:            rgba(0, 0, 0, 0.05);
$shadow-darker:             rgba(0, 0, 0, 0.2);
$shadow-darkest:            rgba(0, 0, 0, 0.4);

$dark-popover-background:   rgba(0, 0, 0, 0.58); //rgba(0, 0, 0, 0.8);

$zindex-navbar:            1000;
$zindex-dropdown:          1000;
$zindex-popover:           1060;
$zindex-tooltip:           1070;
$zindex-navbar-fixed:      1030;
$zindex-modal-background:  1040;
$zindex-modal:             1050;

//== Typography

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-brand: "armorsans-regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-brand-light: "armorsans-light", HelveticaNeueLight, "Helvetica Neue Light", HelveticaNeueThin, "Helvetica Neue Thin", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-brand-bold: "armorsans-bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace:   Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono" , "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
$font-monospace: $font-family-monospace;

$font-family-base:    $font-family-sans-serif;

$font-family-regular: $font-family-brand;
$font-family-light:   $font-family-brand-light;
$font-family-bold:    $font-family-brand-bold;

$font-size-root-int: 16;
$font-size-root: #{$font-size-root-int}px;

$input-btn-active-width: .2rem;
$input-btn-focus-width: 0;

$h1-font-size:  2.25rem; // 36px
$h2-font-size:  1.5rem; // 24px
$h3-font-size:  1.5rem; // 24px
$h4-font-size:  1.25rem; // 20px
$h5-font-size:  0.925rem; // 16px
$h6-font-size:  1rem; // 16px

$breakpoint-keys: null, "sm", "md", "lg", "xl", "xxl", "max";


// Buttons
$btn-box-shadow: 0 3px 1px -2px rgba($black, .2), 0 2px 2px 0 rgba($black, .14), 0 1px 5px 0 rgba($black, .12) !default;
