/* =========================================================
   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': (
    100: #E7F0F6,
    200: #B9DBF4,
    300: #58B1F5,
    400: #0B84E0,
    500: #0047A3,
    600: #00357A,
    700: #002657,
  ),
  'secondary': (
    200: #F5E4DC,
    400: #E6AC94,
    500: #CD8567,
  ),
  'neutral': (
    0: #fff,
    300: #D3D4D6,
    500: #757A80,
    700: #3C4248,
    1000: #000,
  ),

  // 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)
  ),
);