/**
 * Button Components
 *
 * Primary, secondary, ghost, and danger button variants.
 */

/* ==========================================================================
   Base Button
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Primary Button
   ========================================================================== */

.btn-primary {
  color: #ffffff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-primary:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Secondary Button
   ========================================================================== */

.btn-secondary {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-focus);
}

/* ==========================================================================
   Ghost Button
   ========================================================================== */

.btn-ghost {
  color: var(--color-text-secondary);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--color-text-primary);
  background-color: var(--color-accent-subtle);
}

/* ==========================================================================
   Danger Button
   ========================================================================== */

.btn-danger {
  color: #ffffff;
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

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

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* ==========================================================================
   Icon Button
   ========================================================================== */

.btn-icon {
  padding: var(--space-2);
  aspect-ratio: 1;
}

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

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