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

$_color-primary-100: #DBE5F6 !default;
$_color-primary-300: #99ACCC !default;
$_color-primary-500: #213048 !default;
$_color-primary-700: #151F2E !default;

$_color-pastel-green: #88CF8F !default;
$_color-pastel-red: #FFACB9 !default;
$_color-pastel-yellow: #F8CD6B !default;
$_color-pastel-turquoise: #4DE0D6 !default;

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

$_color-text-500: #606C80 !default;
$_color-text-300: #A3AEBF !default;

$_color-action: #0078FF !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(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-500,
                700: $_color-primary-700,
        ),
        'accent': (
                base: $_color-pastel-green,
                "green": $_color-pastel-green,
                "red": $_color-pastel-red,
                "yellow": $_color-pastel-yellow,
                "turquoise": $_color-pastel-turquoise,
        ),
        'neutral': (
                base: $_color-neutral-50,
                100: $_color-neutral-100,
                200: $_color-neutral-200,
        ),
        'text': (
                base: $_color-text-500,
                300: $_color-text-300,
        ),
        '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,
        ),
);