$color-brand--black: #000000;
$color-brand--white: #fff;

$color-brand--one: #FF661A;
$color-brand--two: #202020;
$color-brand--three: #1F82DB;
$color-brand--four:  #C4C4C4;
$color-brand--five:  #F8F8F8;
$color-brand--six: #97999B;

$color-brand--gradient-orange: linear-gradient(56.45deg, #FF8200 0%, #ED1F24 100%);
$color-brand--gradient-orange-50: linear-gradient(56.45deg, #FF9B33 0%, #ED4E52 100%);
$color-brand--gradient-blue: linear-gradient(45deg, #1F82DB 0%, #1166B3 100%);

// user interface colors
//
// additional colors, such as surface, background and error colors, typically don't
// represent the brand but can be applied sparingly to accent select parts of your UI.
//

$color--black-80: #303030;

$color--one-10:  #FFF0E8;
$color--one-80: #FF8548;
$color--one-130: #E64C00;

$color--two-50: #97999B;
$color--two-80: #4D4D4D;
$color--two-180: #000000;

$color--grey: #E2E2E2;
$color--grey-10: #F8F8F8;

$color--white: #FFF;

$color--four-80: #F9F7F3;
$color--four-110: #DEDCD8;

$color--negative: #F13C23;
$color--negative-5: #FEF5F4;

$color--positive: #11D15E;
$color--positive-5: #F3FDF7;

// user interface opacities
//
// opacity colors are only used on modal backgrounds. HEX colors would not be
// used due to the colors' alpha layers.
//

$color-alpha--one-10: rgba(255, 102, 26, 0.1);
$color-alpha--one-30: rgba(255, 102, 26, 0.3);

$color-alpha--two-10: rgba(0, 0, 0, 0.1);
$color-alpha--two-30: rgba(0, 0, 0, 0.3);
$color-alpha--two-70: rgba(0, 0, 0, 0.7);
$color-alpha--two-80: rgba(0, 0, 0, .8);

$color-alpha--four-30: rgba(255, 255, 255, 0.2);
$color-alpha--four-50: rgba(255, 255, 255, 0.5);

// set color values
$color--disabled: $color--grey;
$color--text: $color-brand--two;


// degree brand colors
// used in the charts as extra color scheme

$color-brand--one-65: #7aace8;
$color-brand--one-45: #a6c8f0;
$color-brand--two-65: #636983;
$color-brand--two-45: #999aa8;
$color-brand--three-65: #a6c9d2;
$color-brand--three-45: #c4dbe1;
$color-brand--five-65: #f18f86;
$color-brand--five-45: #f5b5af;
$color-brand--six-65: #ffd370;
$color-brand--six-45: #ffe1a0;

// notice colors
$color-notice--warning: #fff2f2;
