// Color system

// White/Grays/Black colors
$white:    #fff !default;
$black:    #000 !default;

$gray-50:  #fafafa !default;
$gray-100: #f5f5f5 !default;
$gray-200: #e5e5e5 !default;
$gray-300: #d4d4d4 !default;
$gray-400: #a3a3a3 !default;
$gray-500: #737373 !default;
$gray-600: #525252 !default;
$gray-700: #404040 !default;
$gray-800: #262626 !default;
$gray-900: #171717 !default;
$gray-950: #0a0a0a !default;

// Base colors
$cyan: 		#22d3ee !default;
$sky: 		#47C2FF !default;
$blue: 		#335CFF !default;
$indigo: 	#4f46e5 !default;
$purple: 	#7D52F4 !default;
$pink: 		#FB4BA3 !default;
$red: 		#dc2626 !default;
$orange: 	#ea580c !default;
$yellow: 	#F6B51E !default;
$green: 	#16a34a !default;
$lime: 		#d8ff00 !default;
$teal: 		#22D3BB !default;

// Color shades
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;

$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;

$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;

$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;

$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;

$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;

$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;

$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;

$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;

$lime-100: tint-color($lime, 80%) !default;
$lime-200: tint-color($lime, 60%) !default;
$lime-300: tint-color($lime, 40%) !default;
$lime-400: tint-color($lime, 20%) !default;
$lime-500: $lime !default;
$lime-600: shade-color($lime, 20%) !default;
$lime-700: shade-color($lime, 40%) !default;
$lime-800: shade-color($lime, 60%) !default;
$lime-900: shade-color($lime, 80%) !default;

$sky-100: tint-color($sky, 80%) !default;
$sky-200: tint-color($sky, 60%) !default;
$sky-300: tint-color($sky, 40%) !default;
$sky-400: tint-color($sky, 20%) !default;
$sky-500: $sky !default;
$sky-600: shade-color($sky, 20%) !default;
$sky-700: shade-color($sky, 40%) !default;
$sky-800: shade-color($sky, 60%) !default;
$sky-900: shade-color($sky, 80%) !default;

// Theme colors
$primary: 	$blue !default;
$secondary: $purple !default;
$tertiary: 	$cyan !default;
$success: 	$green !default;
$info: 			$cyan !default;
$warning: 	$orange !default;
$danger: 		$red !default;
$highlight: $lime !default;
$light: 		$gray-100 !default;
$dark: 			$gray-900 !default;

// Gradient colors
$gradient-color-1: $purple-500 !default;
$gradient-color-2: $yellow-500 !default;
$gradient-color-3: $indigo-500 !default;
$gradient-color-4: $pink-500 !default;
$gradient-color-5: $cyan-500 !default;
$gradient-color-6: $sky-500 !default;
$gradient-color-7: $gray-500 !default;
$gradient-color-8: $gray-700 !default;

$gradient-stops: (
	"g-color-1": $gradient-color-1,
	"g-color-2": $gradient-color-2,
	"g-color-3": $gradient-color-3,
	"g-color-4": $gradient-color-4,
	"g-color-5": $gradient-color-5,
	"g-color-6": $gradient-color-6,
	"g-color-7": $gradient-color-7,
	"g-color-8": $gradient-color-8,
) !default;