/* =========================================================
   Organize color variables in a Sass Map.
   This way, the colors can be iterated, are more organized,
   and are more intuitive to reference.
   ========================================================= */

$palettes: (
	'primary': (
		500: #FD3438,
		100: #FEBFBF,
	),
	'neutral': (
		0: #ffffff,
		100: #F4F4F4,
		200: #E8E8E8,
		300: #C8C8CC,
		400: #A1A2A6,
		600: #66676b,
		800: #46474b,
		1000: #151A24,
	),
	'text': (
		1000: #151a24,
		300: #A1A2A6,
		200: #C8C8CC
	),

	// Feedback colors
	'action': (
		100: #E5F2FF,
		base: #0080FF,
		700: #0062B2
	),
	'alert': (
		base: #f8936b,
	),
	'warning': (
		base: #f8cd6b,
	),
	'positive': (
		100: #E4F6DA,
		base: #65D92B,
		700: #44CD00
	),

	'border': (
		100: #EFEFEF,
		200: #D2D2D2
	),
	'box-shadow': (
		base: hsla(0, 50%, 0%, 0.2)
	),
);