/* =========================================================
   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: #E2EF7A,
    500: #BCCF27,
    600: #ABBA2F, // new
  ),
  'secondary': (
    200: #52777F,
    400: #3D5966,
    500: #37474F,
    700: #2D373C,
    900: #1F292D,
    950: #111A1E,
  ),
  'alt': (
      300: #5E7882,
      400: #485B63, // new
      500: #3F5057, // new
  ),
  'neutral': (
    0: #fff,
    50: #f9f9fa,
    75: #F5F5F5,
    100: #F0F1F2,
    200: #E3E8EA,
    400: #999EA0,
    500: #DDE6EB
  ),

  'border' : (
      200: #CCCCCC,
  ),

  // Feedback colors
  'action': (
    500: #1776DD,
    300: #75b0f0,
    100: #E5F2FF,
  ),
  'warning': (
    700: #F18C33,
    500: #DDAC17,
    100: #FFF8E5,
  ),
  'negative': (
    500: #FF4040,
  ),
  'positive': (
    500: #3ecf8e,
  ),
  'box-shadow': (
    base: hsla(0, 50%, 0%, 0.2)
  ),
);