// Gray Family
$gray-800: #212121 !default;
$gray-700: #616161 !default;
$gray-650: #808080 !default;
$gray-600: #9e9e9e !default;
$gray-550: #908e8e !default;
$gray-500: #bdbdbd !default;
$gray-450: #dedede !default;
$gray-400: #e0e0e0 !default;
$gray-300: #eeeeee !default;
$gray-200: #f5f5f5 !default;
$gray-100: #fafafa !default;

// Blue Family
$blue-800: #063f6d !default;
$blue-700: #0667b5 !default;
$blue-600: #0087f4 !default;
$blue-500: #64b5f6 !default;
$blue-400: #bbdefb !default;
$blue-300: #edf4fa !default;

// Orange Family
$orange-700: #d48004 !default;
$orange-500: #ff9800 !default;
$orange-400: #f6a623 !default;
$orange-350: #fac68c !default;
$orange-300: #fddfb4 !default;
$orange-200: #fff2e3 !default;

// Red Family
$red-700: #981818 !default;
$red-500: #d32f2f !default;
$red-400: #dc3545 !default;
$red-300: #fee9e9 !default;

// Green Family
$green-700: #4caf50 !default;
$green-500: #61dc66 !default;
$green-300: #e4f7e5 !default;

// Yellow Family
$yellow-700: #b89d11 !default;
$yellow-600: #dcbc13 !default;
$yellow-500: #f9d100 !default;
$yellow-300: #fff9d4 !default;

// Purple Family
$purple-500: #b175e8 !default;

// Named Colors
$black: $gray-800 !default;
$white: #fff !default;
$primary-blue: $blue-500 !default;
$danger: $red-700 !default;
$warning: $orange-500 !default;
$success: $green-700 !default;

$link: $blue-500 !default;
$body-text: $gray-700 !default;

// fonts
$font-family-sans-serif: 'Open Sans', sans-serif !default;
$font-family-base: $font-family-sans-serif !default;

$font-size-xl: 2.2rem !default; // 22px
$font-size-lg: 1.8rem !default; // 18px
$font-size-base: 1.4rem !default; // 14px
$font-size-md: 1.2rem !default; // 12px
$font-size-sm: 1rem !default; // 10px

$font-weight-light: 400 !default;
$font-weight-normal: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

$h1-font-size: $font-size-xl !default; // 22px
$h2-font-size: $font-size-lg !default; // 18px
$h3-font-size: $font-size-base !default; // 14px
$h4-font-size: $font-size-md !default; // 12px
$h5-font-size: $font-size-md !default; // 12px
$h6-font-size: $font-size-md !default; // 12px

$form-label-font-size: $font-size-md !default; // 12px
$help-text-font-size: $font-size-sm !default; // 10px

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
$grid-columns: 12 !default;
$grid-gutter-width: 20px !default;
$grid-gutter-width-half: $grid-gutter-width / 2 !default;