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

$_color-primary-100:    #fff4e6 !default;
$_color-primary-400:    #999999 !default;
$_color-primary-500:    #666666 !default;

$_color-secondary-20:	#F2F8FF !default;
$_color-secondary-100:  #F2F8FA !default;
$_color-secondary-200:	#E6EEF0 !default;
$_color-secondary-300:	#999999 !default;
$_color-secondary-500:  #666666 !default;
$_color-secondary-600:  #333333 !default;

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

$_color-text-500:       #384a66 !default;
$_color-text-400:       #445199 !default;
$_color-text-300:       #6b7c93 !default;
$_color-text-200:       #999999 !default;
$_color-text-100:       #E6E5E6 !default;

$_color-action:         #AAD3DF !default;
$_color-warning:       	#ffd33a !default;
$_color-alert:       	#ff8100 !default;
$_color-negative:       #cf3e3e !default;
$_color-positive:       #3ecf8e !default;

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



// These we can use directly in our components
$box-shadow-color: rgba($_color-text-500, 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,
	400:                $_color-primary-400,
	base:               $_color-primary-500,
  ),
  'secondary': (
	20:                 $_color-secondary-20,
	100:                $_color-secondary-100,
	200:                $_color-secondary-200,
	300:                $_color-secondary-300,
	base:               $_color-secondary-500,
	600:                $_color-secondary-600,
  ),
  'neutral': (
	base:               $_color-neutral-50,
	100:                $_color-neutral-100,
	200:                $_color-neutral-200,
  ),
  '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': (
	base:               $_color-warning,
  ),
  'alert': (
	base:               $_color-alert,
  ),
  'negative': (
	base:               $_color-negative,
  ),
  'positive': (
	base:               $_color-positive,
  ),
  'light': (
	base:               $_color-light,
  ),
  'dark': (
	base:               $_color-dark,
  ),
);