// ######## //
// Color Names
// NOTE: Don't use the color names in .scss files.
//       Only use the color(keyName) function below.
// ######## //
// Primary Nutrual Colors
$pcnWhite:          #fff;
$pcnGreyOne:       #f6f7f8;
$pcnGreyTwo:       #edf1f5;
$pcnGreyThree:     #dbe0e3;
$pcnGreyFour:      #97a4ab;
$pcnGreyFive:      #38424d;
$pcnGreySix:       #1c2530;
// Secondary Colors
$scBlue:            #134174;
$scBlueDark:       #00254d;
$scCyan:            #00aeef;
$scCyanDark:       #1c93c4;
$scSky:             #6dcff6;
$scSkyDark:        #4095b6;
$scTeal:            #56c4c4;
$scTealDark:       #329594;
$scGreen:           #54cd86;
$scGreenDark:      #398f5d;
$scOrange:          #f99e49;
$scOrangeDark:     #c96d20;
$scRedOrange:      #f27a4d;
$scRedOrangeDark: #d94710;
$scRed:             #ee4334;
$scRedDark:        #c2241a;
$scPink:            #eb4ea1;
$scPinkDark:       #c23680;
$scPurple:          #c68ef6;
$scPurpleDark:     #9958d2;

// ######## //
// Colors Map //
// NOTE: Use common names when creating new keys.
//       Try hard as posible to stay away from specific element names.
//       Don't use color names as a key names. e.g. 'backgroundColorPink <--- DON'T DO
//       The methodology for this pattern is to not have a growing list of key names in our map.
// ######## //
$colorsMap: (
    // Background Colors
    'backgroundColor':                  $pcnWhite,
    'backgroundColorDisable':           $pcnGreyTwo,
    'backgroundColorAlert':             $scRed,
    'backgroundColorAlertDark':         $scRedDark,
    'backgroundColorHighlight':         $scCyan,
    'backgroundColorHighlightDark':     $scCyanDark,
    'backgroundColorInverse':           $pcnGreySix,
    'backgroundColorInverseAlternate':  $pcnGreyFive,
    'backgroundColorLight':             $pcnGreyOne,
    'backgroundColorNest':              $pcnGreyTwo,
    'backgroundColorStatic':            $pcnGreyFour,
    'backgroundColorSuccess':           $scGreen,
    'backgroundColorSuccessDark':       $scGreenDark,
    'backgroundColorWarning':           $scOrange,
    'backgroundColorWarningDark':       $scOrangeDark,
    'backgroundColorButton':            $scCyanDark,
    'backgroundColorButtonDisable':     $pcnGreyThree,
    'backgroundColorButtonAlert':       $scRed,
    'backgroundColorButtonAlternate':   $pcnGreyFive,
    'backgroundColorButtonSecondary':   $scBlue,
    'backgroundColorButtonSuccess':     $scGreen,
    'backgroundColorPurple':            $scPurple, // Rename when better define,
    'backgroundColorPurpleDark':        $scPurpleDark, // Rename when better define,
    'backgroundColorTeal':              $scTeal, // Rename when better define,
    'backgroundColorTealDark':          $scTealDark, // Rename when better define,
    'backgroundColorBlue':              $scBlue, // Remove when better define,
    'backgroundColorSky':               $scSky, // Remove when better define,
    // Border Colors
    'borderColor':                      $pcnGreyThree,
    'borderColorHighlight':             $scCyan,
    'borderColorInverse':               $pcnWhite,
    'borderColorSecondary':             $pcnGreyTwo,
    'borderColorTertiary':              $pcnGreyFour,
    'borderColorQuaternary':            $pcnGreyFive,
    'borderColorQuinary':               $pcnGreySix,
    // Colors
    'color':                            $pcnGreySix,
    'colorAlert':                       $scRed,
    'colorDisable':                     $pcnGreyThree,
    'colorDisableInverse':              $pcnGreyFive,
    'colorCode':                        $scRedOrangeDark,
    'colorHighlight':                   $scCyan,
    'colorInverse':                     $pcnWhite,
    'colorLink':                        $scCyan,
    'colorStatic':                      $pcnGreyFour,
    'colorSecondary':                   $scTealDark,
    'colorSubNav':                      $scBlueDark,
    'colorSuccess':                     $scGreen,
    'colorWarning':                     $scOrange,
);

@function color($key) {
    @return map-get($colorsMap, $key);
}