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

$color-brand--one: #ff661a;
$color-brand--two: #2e2e2e;
$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%);
$color-brand--gradient-purple: linear-gradient(
  45deg,
  #595a9f 0%,
  #6152a3 50%,
  #292765 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--grey: #e2e2e2;
$color--grey-10: #f8f8f8;

$color--white: #fff;

$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--three-5: #edf6ff;

$color--four-80: #f9f7f3;
$color--four-110: #dedcd8;

$color--negative: #f13c23;
$color--negative-5: #fef5f4;

$color--positive: #11d15e;
$color--positive-5: #f3fdf7;

$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(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, 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--two-50;
$color--text: $color-brand--two;
$color--one-light: $color--one-10;

// degree brand colors
// used in the charts as extra color scheme
$color-brand--one-65: #ffc8ad;
$color-brand--one-45: #ffe7da;
$color-brand--two-65: #afaf;
$color-brand--two-45: #dbdbdb;
$color-brand--three-65: #afd2f2;
$color-brand--three-45: #dbebf9;
$color-brand--six-65: #dadadb;
$color-brand--six-45: #eeefef;

// degree user interface colors
// used in the charts as extra color scheme
$color--positive-65: #aaefc5;
$color--positive-45: #d9f8e5;

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