:root {
  --border-radius-button: 8px;
  --border-radius-chips: 50%;
  --border-radius-date-picker: 4px;
  --border-radius-drop-down: 8px;
  --border-radius-notifications: 6px;
  --border-radius-panel: 8px;
  --border-radius-panel-buttons: 8px;
  --border-radius-text-input: 8px;
  --border-radius-time-picker: 4px;
  --border-radius-toggle: 50%;
  --border-radius-flyout: 16px;
  --primary: #7e00bf;
  --on-primary: #FFFFFF;
  --primary-50: #f9edff;
  --primary-100: #e5c4f6;
  --primary-200: #d29ded;
  --primary-300: #c079e4;
  --primary-400: #af57db;
  --primary-500: #9e38d1;
  --primary-600: #8e1bc8;
  --black: #222222;
  --on-black: #FFFFFF;
  --black-25: #F7F9F9;
  --black-50: #EAEFF1;
  --black-100: #DAE2E5;
  --black-200: #C7CED1;
  --black-300: #B3BABD;
  --black-400: #858F94;
  --black-500: #60686B;
  --black-600: #5C6366;
  --black-700: #494F52;
  --black-800: #323638;
  --white: #FFFFFF;
  --on-white: #222222;
  --success: #008405;
  --success-10: #EDF5EE;
  --error: #D4351C;
  --error-10: #FFE7E7;
  --warning: #FF8A00;
  --warning-10: #FFF9E5;
  --information: #222222;
  --information-10: #F2F2F2;
  --notification: #FD100C;
  --notification-10: #FFE7E7;
  --background-color: #F7F9F9;
  --link-color: #7E00BF;
  --focus-color: #FFC200;
  --button-color: #7e00bf;
  --on-button-color: #FFFFFF;
  --button-color-50: #f9edff;
  --button-color-100: #e5c4f6;
  --button-color-200: #d29ded;
  --button-color-300: #c079e4;
  --button-color-400: #af57db;
  --button-color-500: #9e38d1;
  --button-color-600: #8e1bc8;
  --checkbox-color: primary;
  --chips-color: primary;
  --flyout-color: primary;
  --full-screen-overlay-color: primary;
  --loader-color: primary;
  --notifications-color: primary;
  --quick-link-color: primary;
  --radio-color: primary;
  --sticky-button-color: primary;
  --panel-color: #222222;
  --on-panel-color: #FFFFFF;
  --panel-color-25: #F7F9F9;
  --panel-color-50: #EAEFF1;
  --panel-color-100: #DAE2E5;
  --panel-color-200: #C7CED1;
  --panel-color-300: #B3BABD;
  --panel-color-400: #858F94;
  --panel-color-500: #60686B;
  --panel-color-600: #5C6366;
  --panel-color-700: #494F52;
  --panel-color-800: #323638;
  --navigation-menu-background-color: #FFFFFF;
  --on-navigation-menu-background-color: #222222;
  --header-background-color: #7e00bf;
  --on-header-background-color: #FFFFFF;
  --header-background-color-50: #f9edff;
  --header-background-color-100: #e5c4f6;
  --header-background-color-200: #d29ded;
  --header-background-color-300: #c079e4;
  --header-background-color-400: #af57db;
  --header-background-color-500: #9e38d1;
  --header-background-color-600: #8e1bc8;
}