/* Generic Button Base */
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.8rem;
  border-radius: 0.8rem;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  /* font-family: 'Quicksand', sans-serif; */
  cursor: pointer;
  /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */
  border: 2px solid transparent;
}

/* Primary Button States */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(115, 30, 206, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(115, 30, 206, 0.2);
}

/* Outline Button States */
.btn-outline {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:active {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

/* Accessibility Focus */
.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}