// defined color
$color-gray: #999;
$color-gray-dark: darken($color-gray, 8%);
$color-gray-darker: darken($color-gray, 16%);
$color-gray-light: lighten($color-gray, 8%);
$color-gray-lighter: lighten($color-gray, 16%);

$color-blue-gray: #38536f;
$color-blue-gray-dark: darken($color-blue-gray, 8%);
$color-blue-gray-darker: darken($color-blue-gray, 16%);
$color-blue-gray-light: lighten($color-blue-gray, 8%);
$color-blue-gray-lighter: lighten($color-blue-gray, 16%);

$color-blue: #007dc6;
$color-blue-dark: darken($color-blue, 8%);
$color-blue-darker: darken($color-blue, 16%);
$color-blue-light: lighten($color-blue, 8%);
$color-blue-lighter: lighten($color-blue, 16%);

$color-teal: #009688;
$color-teal-dark: darken($color-teal, 8%);
$color-teal-darker: darken($color-teal, 16%);
$color-teal-light: lighten($color-teal, 8%);
$color-teal-lighter: lighten($color-teal, 16%);

$color-green: #00a65a;
$color-green-dark: darken($color-green, 8%);
$color-green-darker: darken($color-green, 16%);
$color-green-light: lighten($color-green, 8%);
$color-green-lighter: lighten($color-green, 16%);

$color-cyan: #2dacd1;
$color-cyan-dark: darken($color-cyan, 8%);
$color-cyan-darker: darken($color-cyan, 16%);
$color-cyan-light: lighten($color-cyan, 8%);
$color-cyan-lighter: lighten($color-cyan, 16%);

$color-lime: #cddc39;
$color-lime-dark: darken($color-lime, 8%);
$color-lime-darker: darken($color-lime, 16%);
$color-lime-light: lighten($color-lime, 8%);
$color-lime-lighter: lighten($color-lime, 16%);

$color-yellow: #f3c200;
$color-yellow-dark: darken($color-yellow, 8%);
$color-yellow-darker: darken($color-yellow, 16%);
$color-yellow-light: lighten($color-yellow, 8%);
$color-yellow-lighter: lighten($color-yellow, 16%);

$color-orange: #ff8216;
$color-orange-dark: darken($color-orange, 8%);
$color-orange-darker: darken($color-orange, 16%);
$color-orange-light: lighten($color-orange, 8%);
$color-orange-lighter: lighten($color-orange, 16%);

$color-pink: #E91E63;
$color-pink-dark: darken($color-pink, 8%);
$color-pink-darker: darken($color-pink, 16%);
$color-pink-light: lighten($color-pink, 8%);
$color-pink-lighter: lighten($color-pink, 16%);

$color-red: #ef4836;
$color-red-dark: darken($color-red, 8%);
$color-red-darker: darken($color-red, 16%);
$color-red-light: lighten($color-red, 8%);
$color-red-lighter: lighten($color-red, 16%);

$color-brown: #c8741a;
$color-brown-dark: darken($color-brown, 8%);
$color-brown-darker: darken($color-brown, 16%);
$color-brown-light: lighten($color-brown, 8%);
$color-brown-lighter: lighten($color-brown, 16%);

$color-purple: #9C27B0;
$color-purple-dark: darken($color-purple, 8%);
$color-purple-darker: darken($color-purple, 16%);
$color-purple-light: lighten($color-purple, 8%);
$color-purple-lighter: lighten($color-purple, 16%);

$color-white: #fff;
$color-white-dark: darken($color-white, 4%);
$color-white-darker: darken($color-white, 8%);

$color-black: #000;
$color-black-light: lighten($color-black, 10%);
$color-black-lighter: lighten($color-black, 20%);

// color map
$color-map: (
  'gray': ($color-gray-lighter, $color-gray-light, $color-gray, $color-gray-dark, $color-gray-darker),
  'blue-gray': ($color-blue-gray-lighter, $color-blue-gray-light, $color-blue-gray, $color-blue-gray-dark, $color-blue-gray-darker),
  'blue': ($color-blue-lighter, $color-blue-light, $color-blue, $color-blue-dark, $color-blue-darker),
  'teal': ($color-teal-lighter, $color-teal-light, $color-teal, $color-teal-dark, $color-teal-darker),
  'green': ($color-green-lighter, $color-green-light, $color-green, $color-green-dark, $color-green-darker),
  'cyan': ($color-cyan-lighter, $color-cyan-light, $color-cyan, $color-cyan-dark, $color-cyan-darker),
  'lime': ($color-lime-lighter, $color-lime-light, $color-lime, $color-lime-dark, $color-lime-darker),
  'yellow': ($color-yellow-lighter, $color-yellow-light, $color-yellow, $color-yellow-dark, $color-yellow-darker),
  'orange': ($color-orange-lighter, $color-orange-light, $color-orange, $color-orange-dark, $color-orange-darker),
  'pink': ($color-pink-lighter, $color-pink-light, $color-pink, $color-pink-dark, $color-pink-darker),
  'red': ($color-red-lighter, $color-red-light, $color-red, $color-red-dark, $color-red-darker),
  'brown': ($color-brown-lighter, $color-brown-light, $color-brown, $color-brown-dark, $color-brown-darker),
  'purple': ($color-purple-lighter, $color-purple-light, $color-purple, $color-purple-dark, $color-purple-darker)
);

// tier list
$tiers: ('xs', 'sm', 'lg', 'xl');