/*
 * Unified Button Component System
 * ================================
 * A consistent button system with variants, sizes, and states.
 *
 * Usage:
 *   <button class="btn btn-primary">Primary</button>
 *   <button class="btn btn-secondary">Secondary</button>
 *   <button class="btn btn-outline">Outline</button>
 *   <button class="btn btn-success">Success</button>
 *   <button class="btn btn-danger">Danger</button>
 *   <button class="btn btn-ghost">Ghost</button>
 *
 * Sizes:
 *   <button class="btn btn-primary btn-sm">Small</button>
 *   <button class="btn btn-primary btn-lg">Large</button>
 *
 * Full Width:
 *   <button class="btn btn-primary btn-block">Full Width</button>
 *
 * With Icon:
 *   <button class="btn btn-primary btn-icon">
 *     <span class="btn-icon-left">←</span> Back
 *   </button>
 */

/* ==========================================
 * BASE BUTTON STYLES
 * ========================================== */

.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* Sizing - Default */
  padding: var(--space-3) var(--space-5);
  min-height: 44px;

  /* Typography */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Appearance */
  border: var(--border-width-2) solid transparent;
  border-radius: var(--btn-border-radius);
  cursor: pointer;

  /* Transitions */
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default),
    box-shadow var(--transition-default),
    transform var(--transition-default);

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Remove default button styles */
.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ==========================================
 * BUTTON VARIANTS
 * ========================================== */

/* Primary Button - Main CTA */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-primary:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary Button - Less prominent actions */
.btn-secondary {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  border-color: transparent;
}

.btn-secondary:hover {
  background: var(--color-gray-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  transform: translateY(0);
  background: var(--color-gray-400);
}

/* Outline Button - Bordered style */
.btn-outline {
  background: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.btn-outline:hover {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.btn-outline:active {
  transform: translateY(0);
  background: var(--color-primary-600);
}

/* Active state for toggle buttons */
.btn-outline.active {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
}

/* Outline Secondary - Gray bordered */
.btn-outline-secondary {
  background: transparent;
  color: var(--color-gray-600);
  border-color: var(--color-gray-600);
}

.btn-outline-secondary:hover {
  background: var(--color-gray-600);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-outline-secondary:active {
  transform: translateY(0);
  background: var(--color-gray-700);
}

/* Success Button - Positive actions */
.btn-success {
  background: var(--color-success-500);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-success:hover {
  background: var(--color-success-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-success);
}

.btn-success:active {
  transform: translateY(0);
  background: var(--color-success-700);
}

/* Danger Button - Destructive actions */
.btn-danger {
  background: var(--gradient-danger);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-danger:hover {
  background: var(--gradient-danger-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-error);
}

.btn-danger:active {
  transform: translateY(0);
}

/* Ghost Button - Minimal style */
.btn-ghost {
  background: transparent;
  color: var(--color-primary-500);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.btn-ghost:active {
  background: var(--color-primary-100);
}

/* Info Button - Informational actions */
.btn-info {
  background: var(--color-info-500);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-info:hover {
  background: var(--color-info-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-info);
}

.btn-info:active {
  transform: translateY(0);
  background: var(--color-info-700);
}

/* ==========================================
 * BUTTON SIZES
 * ========================================== */

/* Small Button */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

/* Large Button */
.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

/* ==========================================
 * BUTTON MODIFIERS
 * ========================================== */

/* Full Width Button */
.btn-block {
  width: 100%;
}

/* Icon Button (square) */
.btn-icon {
  padding: var(--space-3);
  min-width: 44px;
}

.btn-icon.btn-sm {
  padding: var(--space-2);
  min-width: 36px;
}

.btn-icon.btn-lg {
  padding: var(--space-4);
  min-width: 52px;
}

/* ==========================================
 * BUTTON STATES
 * ========================================== */

/* Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading State */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.loading::after,
.btn-success.loading::after,
.btn-danger.loading::after,
.btn-info.loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-right-color: transparent;
  border-top-color: white;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.loading::after {
    animation: none;
  }
}

/* ==========================================
 * BUTTON GROUPS
 * ========================================== */

.btn-group {
  display: inline-flex;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
}

.btn-group .btn:not(:last-child) {
  border-right-width: 0;
}

.btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* Button Group - Spaced variant */
.btn-group-spaced {
  display: inline-flex;
  gap: var(--space-2);
}

.btn-group-spaced .btn {
  border-radius: var(--btn-border-radius);
}

/* ==========================================
 * RESPONSIVE ADJUSTMENTS
 * ========================================== */

@media (max-width: 768px) {
  .btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    min-height: 40px;
  }

  .btn-sm {
    padding: var(--space-2) var(--space-3);
    min-height: 32px;
  }

  .btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    min-height: 48px;
  }
}