/* =========================================================
   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: #5A5744,
        700: #403E36,
    ),

    'secondary': (
        500: #3DAA35,
    ),

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

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

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

    'text-on-primary': (
        100: #EDF3EE,
        200: #D5DCD5,
        300: #ADBAAE,
    ),

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

  //'text-on-tertiary': (
  //  100: #e1ecfa,
  //),

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

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

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

);