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

//$_color-primary-100: #d4c5f4 !default;
$_color-primary-500: #333C4E !default;
$_color-primary-700: #2A3140 !default;

$_color-secondary-100: #F7F4F2 !default;
$_color-secondary-300: #FFEDE3 !default;
$_color-secondary-400: #E6E3E1 !default;
//$_color-secondary-700: #267de8 !default;

$_color-neutral-50: #f7f9fb !default;
$_color-neutral-100: #e9ebf5 !default;
$_color-neutral-200: #ccd2db !default;

$_color-grey-100: #f2f8fa !default;
$_color-grey-200: #e6eef0 !default;
$_color-grey-300: #b8c8cc !default;

$_color-text-500: #384a66 !default;
$_color-text-400: #475E80 !default;
$_color-text-300: #6b7c93 !default;
$_color-text-200: #8592a6 !default;
$_color-text-100: #acb4bf !default;

$_color-action: #328dfc !default;
$_color-alert: #ff8100 !default;
$_color-negative: #cf3e3e !default;
$_color-positive: #3ecf8e !default;

$_color-warning-200: #FEF5E1 !default;
$_color-warning-500: #F8CD6B !default;
$_color-warning-700: #DA9B0C !default;

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


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

$greenGradient: rgba(#003033, 0),  #002426;


/**
 *  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': (
                base: $_color-primary-500,
                700: $_color-primary-700,
        ),
        'secondary': (
                100: $_color-secondary-100,
                300: $_color-secondary-300,
                base: $_color-secondary-400,
        ),
        'neutral': (
                base: $_color-neutral-50,
                100: $_color-neutral-100,
                200: $_color-neutral-200,
        ),
        'grey': (
                base: $_color-grey-100,
                200: $_color-grey-200,
                300: $_color-grey-300,
        ),
        'text': (
                base: $_color-text-500,
                400: $_color-text-400,
                300: $_color-text-300,
                200: $_color-text-200,
                100: $_color-text-100,
        ),
        'action': (
                base: $_color-action,
        ),
        'warning': (
                200: $_color-warning-200,
                base: $_color-warning-500,
                700: $_color-warning-700,
        ),
        'alert': (
                base: $_color-alert,
        ),
        'negative': (
                base: $_color-negative,
        ),
        'positive': (
                base: $_color-positive,
        ),
        'light': (
                base: $_color-light,
        ),
        'dark': (
                base: $_color-dark,
        ),
);