/* =========================================================
   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': (
    300: #699BFF,
    400: #2F6CE6,
    800: #1a2233,
    900: #151C28,
  ),

  'secondary': (
    20: #fafcff,
    80: #e4f6ff,
    500: #7AD3FF,
    700: #2EA8E6,
  ),

  'neutral': (
    100: #F0F2F5,
    200: #D7DBE0,
    900: #1F2024,
  ),

  'text': (
    400: #8F9BB3,
    600: #475266,
  ),

  'feedback': (
    action:   #0076FF,
    negative: #cf3e3e,
    positive: #3ecf8e,
  ),
);

$blueGradient :linear-gradient(174deg, #1D2840 10vw, #172030 100%);


/**
 *	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;
}