/* =========================================================
   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': (
    700: #212C52,
  ),
  'secondary': (
    300: #5FC3E0,
    200: #87D2E8,
    100: #EDF7FA,
  ),
  'tertiary': (
    400: #0069B3,
    300: #00A2DA,
    100: #BFD9EC,
  ),
  'neutral': (
    0: #ffffff,
  ),

  // Feedback colors
  'action': (
    base: #328dfc,
  ),
  'alert': (
    base: #ff8100,
  ),
  'warning': (
    200: #fef5e1,
    base: #f8cd6b,
    700: #da9b0c,
  ),
  'negative': (
    base: #cf3e3e,
  ),
  'positive': (
    base: #3ecf8e,
  ),
  'box-shadow': (
    base: hsla(0, 50%, 0%, 0.2)
  ),
);

// For mapping a gradient variable we can't use the palette() function
// because the tools layer is included after the settings
$gradient-blue: linear-gradient(0deg, #{map-get(map-get($palettes, 'tertiary'), 400)}, #{map-get(map-get($palettes, 'tertiary'), 300)});