:root {
  --white: #fff;
  --base-white: #fcfcfc;
  --black: #130225;
  --orange: #e95f4f;
  --blue: #95e1ff;
  --purple: #30044d;
  --purple-50: #f3e8fa;
  --purple-400: #833ffa;
  --green: #8cd4ac;
  --yellow-200: #fff4d9;
  --yellow-600: #b8771a;
  --green-200: #d2f0d5;
  --gray: #9e9e9e;
  --grey: #9e9e9e;
  --gray-50: #f8f8f8;
  --black-95: #f2f2f2;
  --black-90: #e6e6e6;
  --black-80: #cccccc;
  --black-70: #b3b3b3;
  --black-60: #999999;
  --black-50: #808080;
  --black-40: #666666;
  --black-30: #4d4d4d;
  --black-20: #333333;
  --black-10: #1a1a1a;
  --black-5: #0d0d0d;
  --success: #167e0c;
  --info: #02a9ea;
  --warning: #fcca46;
  --error: #ca3f5c;
  --gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(128, 128, 128, 0.14) 100%
  );
  --sans: Work Sans, "work-sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    sans-serif;
  --serif: "freight-macro-pro", serif;

  --mq-point-xs: 320px;
  --mq-point-s: 612px;
  --mq-point-m: 768px;
  --mq-point-l: 980px;
  --mq-point-xl: 1200px;
  --mq-point-xl2: 1420px;
  --mq-point-xl3: 1600px;
}

.btn-primary {
  background-color: var(--purple);
  border: none;
  font-size: 12px;
  line-height: 16px;
  padding: 8px;
}

.btn-primary:focus,
.btn-primary:hover {
  background-color: var(--purple);
  opacity: 0.8;
}