// Colors

  $black: #282828 !default;
  $white: #ffffff !default;

  $grey: #424242 !default; 

  $primary: #3f873d !default; // Emerald / Green / AthlonX

// Greys
  
  // $grey: #f5f5f5; // Grey 100
  // $grey: #eeeeee; // Grey 200
  // $grey: #dbdbdb; // Grey 300
  // $grey: #c0c0c0; // Grey 400
  // $grey: #9e9e9e; // Grey 500
  // $grey: #828282; // Grey 600
  $grey: #757575; // Grey 700
  // $grey: #616161; // Grey 800
  // $grey: #5f5f5f; // Grey 900

// Primary (create colors scheme by adding style-[color].scss in the the theme root)

  // $primary: #b71c1c; // Red
  // $primary: #880e4f; // Pink
  // $primary: #4a148c; // Purple
  // $primary: #311b92; // Deep Purple
  // $primary: #1a237e; // Indigo
  // $primary: #0d47a1; // Blue
  // $primary: #01579b; // Light Blue
  // $primary: #006064; // Cyan
  // $primary: #004d40; // Teal
  // $primary: #1b5e20; // Green
  // $primary: #33691e; // Light Green
  // $primary: #827717; // Lime
  // $primary: #f57f17; // Yellow
  // $primary: #ff6f00; // Amber    
  // $primary: #bf360c; // Orange
  // $primary: #bf360c; // Deep Orange
  // $primary: #3e2723; // Brown
  // $primary: #212121; // Grey
  // $primary: #263238; // Blue Grey

// Color palette

  $grey-100: lighten($grey, 48);
  $grey-200: lighten($grey, 42);
  $grey-300: lighten($grey, 36);
  $grey-400: lighten($grey, 30);
  $grey-500: lighten($grey, 24);
  $grey-600: lighten($grey, 18);
  $grey-700: lighten($grey, 12);
  $grey-800: lighten($grey, 6);
  $grey-900: $grey;

  $color-100: lighten($primary, 56);
  $color-200: lighten($primary, 49);
  $color-300: lighten($primary, 42);
  $color-400: lighten($primary, 35);
  $color-500: lighten($primary, 28);
  $color-600: lighten($primary, 21);
  $color-700: lighten($primary, 14);
  $color-800: lighten($primary, 7);
  $color-900: $primary;

// Fonts

  $font-stack: 'Montserrat', sans-serif;
  $font-size: 16px;
  $font-size-mobile: 20px;
  $font-weight: 400;
  $font-style: normal;
  $font-line-height: 1.8;

// Breakpoints / Containers

/* FIX: An issue with container-width & breakpoint-desktop 
 * for Customizer styles and mobile break point.
 */

  $container-width: 1200px; 

  $breakpoint-mobile: 540px;
  $breakpoint-tablet: 800px;
  $breakpoint-desktop: 1200px;