$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-7: #ecf3fc;
$color--one-80: #4d91e1;
$color--one-130: #175197;

$color--two-50: #878ca0;
$color--two-60: #6c738d;
$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: #e00f0f;
$color--negative-5: #fdf3f3;

$color--positive: #257f56;
$color--positive-5: #f4f8f6;

$color--warning: #e9a204;
$color--warning-10: #fcf5e5;

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

$color-alpha--two-10: rgba(15, 25, 65, 0.1);
$color-alpha--two-30: rgba(15, 25, 65, 0.3);
$color-alpha--two-70: rgba(15, 25, 65, 0.7);
$color-alpha--two-80: rgba(15, 25, 65, 0.8);

// ! This needs to be changed to the new white colors in story (DF909-751)
$color-alpha--four-30: rgba(247, 245, 240, 0.3);
$color-alpha--four-50: rgba(247, 245, 240, 0.5);

// set color values
$color--disabled: $color--two-60;
$color--text: $color-brand--two;
$color--one-light: $color--one-7;

// 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;
