/* =========================================================
   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': (
        400: #3D79F2,
        500: #0B4ED8,
    ),

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

    'tertiary': (
        500: #27BCEE,
    ),

    'neutral': (
        0:   #FFFFFF,
        100: #F6F8FA,
        150: #EFF2F5,
        200: #CFD8E6,
        300: #A8B5C7,
        400: #8C97A5,
        500: #66686C,

        700: #2a2d32,
        800: #27292E,
        900: #141517,
        1000: #000000,
    ),

    'feedback': (
        focus: #0B4ED8,
        warning:  #ffd33a,
        //positive: #5DD80B,
        //negative: #cf3e3e,
    ),
);


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