/* =========================================================
   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: #798c8c,
  //  700: #5d7373,
  //),

  'neutral': (
    0:   #FFFFFF,
    100: #F8F8F8,
    200: #efefef,
    300: #cdcdcd,
    400: #a3a1a1,
    500: #656565,
    600: #4a4a4a,
    700: #3b3b3b,
    800: #2C2C2C,
    900: #180d1b,
    1000: #000911,
  ),

  'secondary': (
    200: #21A8E0,
    400: #358fcd,
    950: #181e3c
  ),

  '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
      @return nth(nth(map-get($palettes, $palette), 1), 2);
    }
  }

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