/* =========================================================
   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: #122B3A,
    700: #04161F,
  ),

  'secondary': (
    500: #417DC5,
  ),

  'neutral': (
    0:   #ffffff,
    100: #f8f8f8,
    200: #F5F5F5,
    300: #c8c8c8,
    800: #2C2C2C,
    900: #172933,
    1000: #000000,
  ),

  'text': (
    900: #1A1A1A,
    500: #656565,
    300: #999999,
  ),

  'text-on-dark': (
    100: #ffffff,
    200: #ededed,
    300: #999999,
  ),

  'text-on-primary': (
    100: #edf1f2,
    200: #d5d9db,
    300: #aeb1b8,
  ),

  'text-on-secondary': (
    100: #ffffff,
  ),

  'feedback': (
    action: #5D93B3,
    warning: #ffd33a,
    alert: #ff8100,
    negative: #cf3e3e,
    positive: #3ecf8e,
  ),

  'border': (
    100: #c8c8c8,
  ),

  'box-shadow': (
    900: hsla(0, 50%, 0%, 0.2),
  ),

);