/* =========================================================
   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: #5B6978,
		700: #3E4852,
	),

	'secondary': (
		500: #BE1E2D,
	),

	'tertiary': (
		500: #D5D8DB,
	),

	'neutral': (
		0:   #FFFFFF,
		100: #F8F8F8,
		200: #F5F5F5,
		300: #C8C8C8,
		400: #999999,
		500: #656565,
		800: #2C2C2C,
		900: #1D1D1D,
		1000: #000000,
	),

	'feedback': (
		action: #4079B8,
		warning: #ffd33a,
		alert: #ff8100,
		negative: #cf3e3e,
		positive: #3ecf8e,
	),

	'border': (
		0:   #fff,
		300: #C8C8C8,
		500: #656565,
	),
);


/**
 *	A simple function for accessing the colors from our mapping
 *	To access colors in our palette, we use a very simple custom Sass function
 *  This function is placed here, (and not in the toolbox)
 *  because we want to use it in our other setting files

	USAGE:

	.demo {
		color: palette(primary, 500);
	}

 */

@function palette($palette, $level: 1) {
	@if map-has-key($palettes, $palette) {
		@if map-has-key(map-get($palettes, $palette), $level) {
			@return map-get(map-get($palettes, $palette), $level);
		} @else {
			// If level doesn't exist in map, give the first value of the palette
			@return nth(nth(map-get($palettes, $palette), 1), 2);
		}
	}

	@warn "Unknown color: `#{$palette}` in $palette. ";
	@return hotpink;
}