/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  min-height: 36px;
}

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

.btn .icon {
  flex-shrink: 0;
}

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

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.btn--primary:active:not(:disabled) {
  background-color: var(--color-primary-active);
}

/* Secondary (outlined) */
.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-primary-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

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

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

/* Icon button */
.btn--icon {
  padding: var(--space-2);
  min-height: 36px;
  min-width: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}

.btn--icon:hover:not(:disabled) {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* Danger */
.btn--danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.btn--danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

/* Small */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 28px;
}

/* Large */
.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  min-height: 44px;
}

/* Full width */
.btn--full {
  width: 100%;
}

/* Theme toggle — crossfade animation */
.theme-toggle {
  position: relative;
}

.theme-toggle .icon--sun,
.theme-toggle .icon--moon {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle .icon--moon {
  position: absolute;
  inset: 0;
  margin: auto;
}

[data-theme="light"] .theme-toggle .icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .theme-toggle .icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle .icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle .icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Button label hidden on mobile */
@media (max-width: 640px) {
  .btn__label--hide-mobile {
    display: none;
  }
}