:root {
  --ws-purple: #7c5cff;
  --ws-purple-dark: #6547f5;
  --ws-blue: #2f80ff;
  --ws-green: #19c98b;
  --ws-orange: #ffa62b;
  --ws-red: #ff4d5e;

  --ws-color-background: #f8f9fc;
  --ws-color-surface: #ffffff;
  --ws-color-surface-variant: #f0f2f7;

  --ws-color-primary: #7c5cff;
  --ws-color-secondary: #2f80ff;
  --ws-color-tertiary: #19c98b;

  --ws-color-primary-container: #f0ecff;
  --ws-color-secondary-container: #e2edff;

  --ws-color-outline: #dde1ea;
  --ws-color-outline-variant: #e3e6ed;

  --ws-color-error: #ff4d5e;

  --ws-color-on-primary: #f7f7fa;
  --ws-color-on-background: #17171c;
  --ws-color-on-surface: #17171c;
  --ws-color-on-surface-variant: #626875;
  --ws-color-on-secondary-container: #17171c;
}