/**
 *  Global color variables.
 *	The underscore prefix means we never use them directly in the styles, only for functions and mixins.
 */

$_color-primary-100: #fff4cf !default;
$_color-primary-300: #ffe798 !default;
$_color-primary-800: #bfa063 !default;
$_color-primary-900: #967d5b !default;

$_color-neutral-100: #F7F6F1 !default;

$_color-text-800: #403c34 !default;
$_color-text-500: #9c978d !default;
$_color-text-300: #dfdad0 !default;

$_color-light: #ffffff !default;
$_color-dark: #000000 !default;

$_color-alert: #E53A40 !default;

// These we can use directly in our components
$box-shadow-color: rgba(black, 0.2);


/**
 *  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': (
        100: $_color-primary-100,
        300: $_color-primary-300,
        base: $_color-primary-800,
        900: $_color-primary-900,
    ),
    'text': (
        300: $_color-text-300,
        500: $_color-text-500,
        base: $_color-text-800,
    ),
    'negative': (
        base: $_color-alert
    ),
    'neutral': (
        base: $_color-neutral-100,
    ),
);