:root {
  --btn-primary-color: #ffffff;
  --btn-primary-bg: #007bff;
  --btn-primary-border: #007bff;
  --btn-primary-hover-bg: #0056b3;
  --btn-primary-hover-border: #0056b3;
  --btn-secondary-color: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-border: #6c757d;
  --btn-secondary-hover-bg: #5a6268;
  --btn-secondary-hover-border: #5a6268;
  --btn-success-color: #ffffff;
  --btn-success-bg: #28a745;
  --btn-success-border: #28a745;
  --btn-success-hover-bg: #218838;
  --btn-success-hover-border: #218838;
  --btn-danger-color: #ffffff;
  --btn-danger-bg: #dc3545;
  --btn-danger-border: #dc3545;
  --btn-danger-hover-bg: #c82333;
}

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  color: var(--text-color);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border: none;
}

.btn-danger:hover {
  background-color: var(--btn-danger-hover-bg);
}

.btn-success {
  background-color: var(--btn-success-bg);
  color: var(--btn-success-color);
  border: none;
}

.btn-success:hover {
  background-color: var(--btn-success-hover-bg);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border: none;
}

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

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: none;
}

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