/* =========================================================
   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': (
    100: #EBF0F5,
    300: #89A4B8,
    500: #2D5C80,
    600: #152C3D,
  ),

  'neutral': (
    0:   #FFFFFF,
    100: #F8F8F8,
    200: #efefef,
    300: #cdcdcd,
    400: #999999,
    500: #656565,
    600: #4a4a4a,
    700: #3b3b3b,
    800: #2C2C2C,
    900: #1D1D1D,
    1000: #000000,
  ),

  'feedback': (
    focus: #13cfce,
    action:   #4079B8,
    warning:  #ffd33a,
    //negative: #cf3e3e,
    //positive: #3ecf8e,
  ),
);


/**
 *	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)
 *  so we can use it in our other setting files if we need

	USAGE:

	.demo {
		color: palette(neutral, 900);
	}

 */

@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
      @warn "Unknown level: `#{$level}` in `#{$palette}`. ";
      @return nth(nth(map-get($palettes, $palette), 1), 2);
    }
  }

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