/* Button Styles */
:root {
  --btn-padding-medium: 0.5rem 1rem;
  --btn-font-size-medium: 1rem;
  --btn-border-width: 2px;
}

button {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: var(--btn-border-width) solid transparent;
  padding: var(--btn-padding-medium);
  font-size: var(--btn-font-size-medium);
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

button:focus,
button:hover {
  text-decoration: none;
}

button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Example focus shadow */
}

/* Primary Button */
.button-primary {
  background-color: #007bff; /* Blue */
  color: #ffffff;
  border-color: #007bff;
}

.button-primary:hover {
  background-color: #0056b3; /* Darker blue on hover */
  border-color: #0056b3;
}

/* Secondary Button */
.button-secondary {
  background-color: #6c757d; /* Gray */
  color: #ffffff;
  border-color: #6c757d;
}

.button-secondary:hover {
  background-color: #495057; /* Darker gray on hover */
  border-color: #495057;
}

/* Success Button */
.button-success {
  background-color: #28a745; /* Green */
  color: #ffffff;
  border-color: #28a745;
}

.button-success:hover {
  background-color: #218838; /* Darker green on hover */
  border-color: #218838;
}

/* Danger Button */
.button-danger {
  background-color: #dc3545; /* Red */
  color: #ffffff;
  border-color: #dc3545;
}

.button-danger:hover {
  background-color: #c82333; /* Darker red on hover */
  border-color: #c82333;
}