/* =========================================================
   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': (
    1: #0F223B,
    2: #0A1626,
  ),

  'secondary': (
    1: #EE7203,
    2: #EE7203,
  ),

  'tertiary': (
    1: #525d7d,
    2: #404862,
  ),

  'neutral': (
    1: #f8f8f8,
    medium: #c8c8c8,
    dark: #1d1d1d,
  ),

  'text': (
    1: #1A1A1A,
    2: #656565,
    3: #999999,
  ),

  'text-on-dark': (
    1: #ffffff,
    2: #ededed,
    3: #999999,
  ),

  'text-on-primary': (
    1: #f2efed,
    2: #d5dcd5,
    3: #adbaae,
  ),

  'text-on-secondary': (
    1: #fff7f2,
    2: #ffe0cc,
    3: #ffd0b3,
  ),

  'text-on-tertiary': (
    1: #e1ecfa,
    2: #d4e5fa,
    3: #bbd8fa,
  ),

  'feedback': (
    1: #4079b8,
    action: #4079b8,
    warning: #ffd33a,
    alert: #ff8100,
    negative: #cf3e3e,
    positive: #3ecf8e,
  ),

  'light': (
    1: #ffffff,
  ),

  'dark': (
    1: #000000,
  ),

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

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

);