/* ==========================================================================
   Expend Config settings
   ========================================================================== */

$palettes: (
  'primary': (
      200: #E63B37,
      400: #df3935,
      500: #ff4050,
  ),

  'secondary' : (
    100: #ded7d1,
    200: #ccc3bd,
    400: #948a8a,
    600: #574d4d,
    800: #524848,
  ),

  'neutral': (
    100: #f9f9f9,
    300: #b0b0b0,
    600: #444444,
    900: #222222,
  ),


  'negative': (
    base: #FF4050,
  ),

);

$fontFamily: 'Barlow', sans-serif;






/**
 *	A simple function for accessing the colors from our mapping
 *	To access colors in our palette, we use a very simple custom Sass function

	USAGE:

	a {
		color: palette(primary, 500);

		&:hover {
			color: palette(primary, 600);
		}
	}

 */

@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;
}