:root {
  --gray-0: #ffffff;
  --gray-5: #f2f2f2;
  --gray-10: #e6e6e6;
  --gray-20: #cccccc;
  --gray-30: #b3b3b3;
  --gray-40: #999999;
  --gray-50: #808080;
  --gray-60: #666666;
  --gray-70: #4d4d4d;
  --gray-80: #333333;
  --gray-90: #1a1a1a;
  --gray-100: #000000;

  --primary-70: #867cff;
  --primary-60: #645cff;
  --primary-10: #0c0032;

  --primary-gradient: linear-gradient(
    90deg,
    #867cff 0%,
    #645cff 50%,
    #0c0032 100%
  );

  --secondary-40: #645cff;
  --secondary-30: #4038d9;
  --secondary-20: #2620b2;
  --secondary-10: #0f0a89;
  --secondary-5: #060452;

  --secondary-gradient: linear-gradient(
    90deg,
    #645cff 0%,
    #4038d9 50%,
    #060452 100%
  );

  --primary-button-text: #645cff;
  --primary-button-press: #4038d9;
  --primary-background: #867cff;

  --secondary-text: #0f0a89;
  --secondary-icon: #2620b2;
  --secondary-background: #645cff;

  --error-text: #ee4646;
  --success-text: #0ea215;
  --warning-background: #ffec1a;
}

.primary-button {
  background-color: var(--primary-button-text);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.primary-button:active {
  background-color: var(--primary-button-press);
}

.primary-background {
  background-color: var(--primary-background);
  padding: 20px;
  border-radius: 5px;
}

.secondary-button {
  background-color: var(--secondary-background);
  color: var(--secondary-text);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.secondary-icon {
  color: var(--secondary-icon);
  font-size: 16px;
}

.secondary-background {
  background-color: var(--secondary-background);
  padding: 20px;
  border-radius: 5px;
}

.text-error {
  color: var(--error-text);
  font-weight: bold;
}

.text-success {
  color: var(--success-text);
  font-weight: bold;
}

.warning-background {
  background-color: var(--warning-background);
  padding: 20px;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
}

.bg-gray {
  background-color: var(--gray-50);
}

.bg-primary {
  background-color: var(--primary-60);
}

.bg-secondary {
  background-color: var(--secondary-20);
}

.bg-primary-gradient {
  background: var(--primary-gradient);
}

.bg-secondary-gradient {
  background: var(--secondary-gradient);
}

.text-gray {
  color: var(--gray-70);
}

.text-primary {
  color: var(--primary-60);
}

.text-secondary {
  color: var(--secondary-30);
}

.button-primary {
  background-color: var(--primary-60);
  color: var(--gray-0);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.button-secondary {
  background-color: var(--secondary-20);
  color: var(--gray-0);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.button-primary:hover {
  background-color: var(--primary-70);
}

.button-secondary:hover {
  background-color: var(--secondary-40);
}