/**
 * Button Component System - Mobile-First
 * La Fille du Fleuriste
 */

/* ===== Base Button ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  min-height: var(--touch-target-comfortable);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
  user-select: none;
}

.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Button Variants ===== */

/* Primary Button */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg-light);
  border: 2px solid var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

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

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-bg-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Danger Button */
.btn-danger {
  background: var(--color-error);
  color: var(--color-bg-light);
  border: 2px solid var(--color-error);
}

.btn-danger:hover {
  background: #c44240;
  border-color: #c44240;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Success Button */
.btn-success {
  background: var(--color-success);
  color: var(--color-bg-light);
  border: 2px solid var(--color-success);
}

.btn-success:hover {
  background: #45a049;
  border-color: #45a049;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 2px solid transparent;
}

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

/* Link Button */
.btn-link {
  background: none;
  color: var(--color-primary);
  border: none;
  padding: var(--space-xs) var(--space-sm);
  min-height: auto;
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* ===== Button Sizes ===== */

/* Small Button */
.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  min-height: var(--touch-target-min);
}

/* Large Button */
.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--text-lg);
  min-height: 56px;
}

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

/* ===== Icon Buttons ===== */
.btn-icon {
  padding: var(--space-sm);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* Round Icon Button */
.btn-round {
  border-radius: var(--radius-full);
  padding: var(--space-md);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* ===== Button Groups ===== */
.btn-group {
  display: inline-flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.btn-group-vertical {
  flex-direction: column;
}

.btn-group-vertical .btn {
  width: 100%;
}

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

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

/* ===== Tablet (768px+) ===== */
@media (min-width: 768px) {
  .btn {
    padding: var(--space-md) var(--space-xl);
  }

  .btn-sm {
    padding: var(--space-sm) var(--space-lg);
  }

  .btn-lg {
    padding: var(--space-xl) var(--space-3xl);
  }
}

/* ===== Desktop (1024px+) ===== */
@media (min-width: 1024px) {
  /* Hover effects only on non-touch devices */
  @media (hover: hover) {
    .btn:hover {
      transform: translateY(-2px);
    }

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