/* =========================================================
   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': (
    500: #375082,
    700: #20335A,
    900: #0C2243,
    border: #2C5189
  ),
  'secondary': (
    500: #DCA669,
    700: #CB985E,
  ),
  'tertiary': (
    300: #678AB4,
    500: #5073A3,
  ),
  'neutral': (
    0: #fff,
    100: #F7F8FA,
  ),
  'text': (
    800: #1E2329,
    500: #616366,
  ),
  // Feedback colors
  'action': (
    300: #72A3F5,
    500: #4D7DCF,
  ),
  'alert': (
    base: #ff8100,
  ),
  'warning': (
    200: #fef5e1,
    500: #f8cd6b,
    700: #da9b0c,
  ),
  'negative': (
    base: #cf3e3e,
  ),
  'positive': (
    base: #3ecf8e,
  ),
  'box-shadow': (
    base: hsla(0, 50%, 0%, 0.2)
  ),
);