$color-white: #FFFFFF;
$color-alabaster: #FAFAFA;
$color-light-smoke: #F6F6F6;
$color-concrete: #F2F2F2;
$color-mercury: #E6E6E6;
$color-alto: #DDDDDD;
$color-nobel: #B6B6B6;
$color-smoke: #999999;
$color-dove-grey: #666666;
$color-emperor: #555555;
$color-mine-shaft: #333333;
$color-nero: #222222;
$color-black: #000000;

$color-cerulean: #00AEEF;
$color-endeavour: #00539B;
$color-prussian-blue: #002E56;
$color-spindle: #B0CBEA;
$color-citron: #94BB20;
$color-pine-green: #007176;
$color-palatinate-purple: #61116a;
$color-gold: #FFD200;
$color-poppy: #F8971D;
$color-crimson: #D31245;

/*Background Variables*/
$background-01: $color-white; // #FFFFFF  Region/sections, tables and body on lightest app theme
$background-02: $color-alabaster; // #FAFAFA	Body background on most applications
$background-03: $color-concrete; //#F2F2F2		Small Section, table footers and modal action containers
$background-04: $color-mercury; // #E6E6E6		Right nav drawer
$background-05: $color-endeavour; // #00539B  selected date background color
$background-06: $color-endeavour; // #00539B  header background color

/*Type/Text Variables*/

$headline-01: $color-mine-shaft; // #333333 H1 -  Page title (Can be visually hidden for accessibility
$headline-02: $color-mine-shaft; // #333333 H2 -  Sub titles
$headline-03: $color-mine-shaft; // #333333 H3 -  Labels
$headline-04: $color-emperor; // #555555 H4 -  Primary body text

/*Numbers*/
$numbers-jumbo: $color-black; // Used to draw attention to very important data points on a dashboard that user needs to know immediately.
$numbers-large: $color-black; // Used for important data points within graph containers.

/*Core UI Variables*/

$ui-01: $color-endeavour; //Header, links and other elements
$ui-02: $color-prussian-blue; //	Primary button
$ui-03: $color-cerulean; //Progress bars, Floating action button and icon background
$ui-04: $color-poppy; // Highlight information such as warning notification count and visualizations
$ui-05: $color-crimson; // Highlight information such as error notification count and visualizations
$ui-06: $color-concrete; //	Additional buttons and borders
$ui-07: $color-smoke; //Links, shading and lines
$ui-08: $color-alto; //Container borders
$ui-09: $color-nobel; //Mobile and Inactive button background
$ui-10: $color-mine-shaft; //Alerts and highlight small areas of information
$ui-11: $color-endeavour; //Checkbox checked
$ui-12: $color-endeavour; //Radio button selected
$ui-13: $color-citron; //Switch checked
$ui-14:$color-palatinate-purple; //Link focused 
/* Icon Fill Variables */

$icon-01: $color-endeavour; /* #00539B Icons for table actions */
$icon-02: $color-black; /* #000000 UI Icons on headlines, actions (used with .64 & .87 opacity) */
$icon-03: $color-white; /* #FFFFFF Header & reverse icons on dark background */

/* Font Colors */

$font-01: $color-white; /* #00539B Icons for table actions */
$font-02: $color-black; /* #000000 UI Icons on headlines, actions (used with .64 & .87 opacity) */
$font-03: $color-endeavour; /* #FFFFFF Header & reverse icons on dark background */

/* Status Variables */

$status-01: $color-citron; /* #94BB20 Success (Primary Status) - Used for success toasts and modals, and positive action text */
$status-02: $color-crimson; /*#D31245 Error (Primary Status) - Used for error toasts, alerts and modals, and negative action text */
$status-03: $color-poppy; /* #F8971D Warning (Secondary Status) - Used for error toasts, alerts and modals, and warning status */
$status-04: $color-pine-green; /* #007176 Active (Secondary Status) - Used to indicate an active or positive status */
$status-05: $color-gold; /* #FFD200 Very Important (Secondary Status) - Very Important Alert Notifications and status */
$status-06: $color-cerulean; /* #00AEEF Progress Blue	    - Informative (Secondary Status) - Used for error toasts, alerts and modals, and to provide information */

/* Field Variables */

$field-01: $background-01; /* #FFFFFF Input fields used on off-white background*/
$field-02: $background-02; /* #F6F6F6 Input fields used on white background*/
$field-03: $color-alto; /* #DDDDDD Input field border color for datepicker*/

/* Badge/Chip Variables */

$badge-01: $color-white; /* White                - Fields used on $background-02 */
$badge-02: $color-light-smoke; /* Off-white	        - Fields used on $background-01 */
$badge-03: $color-dove-grey; /* Grey	                - Reverse Badge */