$color-brand--one: #2175D9;
$color-brand--two: #0F1941;
$color-brand--three: #6BA5B4;
$color-brand--four: #F7F5F0;
$color-brand--five: #e74536;
$color-brand--six: #FFB511;
$color-brand--white: #fff;

// 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--one-10: #E8F1FB;
$color--one-80: #4D91E1;
$color--one-130: #175197;

$color--two-50: #878CA0;
$color--two-80: #3C4464;
$color--two-180: #03050D;

$color--grey: #D7D7D7;
$color--grey-10: #F7F7F7;

$color--white: #FFF;

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

$color--negative: #F24747;
$color--negative-5: #FEF6F6;

$color--positive: #31AA74;
$color--positive-5: #F4FBF8;

// 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(33, 117, 217, .1);
$color-alpha--one-30: rgba(33, 117, 217, .3);

$color-alpha--two-10: rgba(15, 25, 65, .1);
$color-alpha--two-30: rgba(15, 25, 65, .3);
$color-alpha--two-70: rgba(15, 25, 65, .7);
$color-alpha--two-80: rgba(15, 25, 65, .8);

$color-alpha--four-30: rgba(247, 245, 240, .3);
$color-alpha--four-50: rgba(247, 245, 240, .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;
