// Primary Palette :: Not WCF colors
$blue: #00AEFF;
$green: #00a859;
$purple: #6e53a3;
$red: #ba160a; // #f13c45;
$orange: #f8961d;

// Neutral Palette :: Not WCF colors
$offblack: #333;
$shadow: rgba(0, 0, 0, 0.15);
$dark-blue: #006d9a;
$charcoal-blue: #384655;
$slate-blue: #262f34;

$slate-gray-100: #f0f3f6;
$slate-gray-200: #d7dde4;
$slate-gray-300: #c0c5cc;
$slate-gray-400: #708090;
$slate-gray-500: #5e676f;
$slate-gray-600: #4f565c;

$gray-100: #f1f1f1;
$gray-200: #e0e0e0;
$gray-300: #cccccc;
$gray-400: #a1a1a1;
$gray-500: #6d6e70;
$gray-600: #515353;

// Secondary Palette :: Not WCF colors
$ruby-red: #951c1e;
$deep-red: #cc2027;
$red-orange: #f05323;
$pink: #ef4767;
$light-pink: #f8c8db;
$brown: #553e36;
$magenta: #a94c9d;
$purple-gray: #776c7f;
$azure: #007bff;
$teal: #00acac;
$dark-green: #006c4e;
$light-green: #9fd4ae;
$tan: #ebba82;
$yellow: #f5ed56;
$yellow-orange: #e7c447;
$light-blue: #51cbee;
$web-safe-light-blue: #66ccff;

// WCF Color Palette
$wcf-red: #ba160a;
$red-bg: #f7e2e1;
$red-light: #DB8F91;
$red-dark: #590f12;
$wcf-blue: #406181;
$wcf-blue-alt: #4890d9;
$blue-light: #A1B0BF;
$blue-dark: #1F3040;
$blue-darkest: #0D1828;
$success: #78BF40;
$success-bg: #EBF6E2;
$warning: #FFB13F;
$warning-bg: #FFF3E2;
$error: #E7482F;
$error-bg: #FCE3E0;
$info: #00AEFF;
$info-bg: #D9F3FF;
$dark-blue-hover: #1a3151;
$dark-blue-bg: #0d1828;
$blue-glow: $wcf-blue-alt;

$white: #ffffff;
$gray-02: #f6f7f7;
$gray-05: #e9eaeb;
$gray-10: #d7d8da; // use for disabled state and divider lines
$gray-30: #afb2b4;
$gray-50: #878b8f; // border default and label default
$gray-70: #5e646a; // use as default icon color
$gray-90: #363e44; // text default
$black: #0e171f;

// General Color Vars
$primary-brand: $wcf-red;
$primary-action: $wcf-red;
$primary-alt-action: $wcf-blue;
$destructive-action: $error;
$neutral-action: $gray-70;
$text: $gray-90;
$block-text-background: $gray-02;
$disabled: $gray-10;
$inactive: $gray-30;
$offblack: $gray-90;
$dark-blue: $gray-90;
$gray-100: $gray-02;
$gray-200: $gray-05;
$gray-300: $gray-10;
$gray-400: $gray-30;
$gray-500: $gray-50;
$gray-600: $gray-70;
$slate-gray-100: $gray-02;
$slate-gray-200: $gray-05;
$slate-gray-300: $gray-10;
$slate-gray-400: $gray-30;
$slate-gray-500: $gray-50;
$slate-gray-600: $gray-70;