/**
 *  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: #ffb04f !default;
$_color-primary-500: #ff9411 !default;

$_color-neutral-50: #c4c4c4 !default;
$_color-neutral-100: #F6F8F9 !default;
$_color-neutral-200: #F8FAFB !default;
$_color-neutral-400: #E6E6E6 !default;
$_color-neutral-500: #C3C6CA !default;
$_color-neutral-700: #4c4b4b !default;
$_color-neutral-900: #202121 !default;
$_color-neutral-950: #1B1B1B !default;

$_color-text-900: #2f3b4d !default;
$_color-text-500: #707b8c !default;
$_color-text-300: #acb4bf !default;

$_color-action: #328dfc !default;
$_color-warning: #ffd33a !default;
$_color-alert: #ff8100 !default;
$_color-negative: #cf3e3e !default;
$_color-positive: #3ecf8e !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);
$box-shadow-color-dark: rgba($_color-text-500, 0.5);


/**
 *  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': (
    80: #FDF3EF,
    100: $_color-primary-100,
    400: $_color-primary-400,
    base: #FF6729,
	  //base:               $_color-primary-500,
  ),
  'secondary' : (
    20: #F2F8FF,
    75: #F2F5F7,
    90: #E9EBF5,
    95: #EDF5FF,
    100: #D0DDE7,
    200: #6D93CA,
    300: #5F83B7,
    400: #6B7C93,
    base: #202121,
    600: #264a80,
    800: #272a34,
  ),
  //'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,
  //),
  'support' : (
    50: #F8F9FA,
    100: #F3F6FB,
    200: #E3E3E3,
    400: #A2A8AE,
    500: #737D87
  ),
  'neutral': (
    base: #c4c4c4, //rgb 196 196 196
    100: #F6F8F9,
    200: #F8FAFB,
    300: #EAEEF0,
    400: #E6E6E6,
    450: #C3C6CA,
    480: #979797,
    500: #9D9F9F,
    700: $_color-neutral-700,
    900: $_color-neutral-900,
    950: $_color-neutral-950,
  ),
  'text': (
    900: $_color-text-900,
    base: #333333,
    700: #3B3C3F,
    500: #6D6F70,
    300: $_color-text-300,
  ),
  'action': (
    base: $_color-action,
  ),
  'warning': (
    base: $_color-warning,
	  600: #ffc90e,
  ),
  'alert': (
    base: $_color-alert,
  ),
  'negative': (
    base: $_color-negative,
  ),
  'positive': (
    base: $_color-positive,
  ),
  'light': (
    base: $_color-light,
  ),
  'dark': (
    base: $_color-dark,
  ),
  'star' : (
    base: #FCBD01
  )
);