frontend/src/css/components/buttons.css

/* Button Responsive Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px; /* Minimum touch target size */
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  min-height: 40px;
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
  min-height: 48px;
}

.btn-full {
  width: 100%;
}

@media (max-width: 639px) {
  .btn {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
  }
  
  .btn-lg {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--font-size-base);
  }
}