/* =========================================================
   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: #007EA3,
        700: #005B75,
    ),

    'secondary': (
        500: #CCA952,
    ),

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

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

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

    'text-on-primary': (
        100: #ededf3,
        200: #d7dbdc,
        300: #b2b1ba,
    ),

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

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

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

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

);