.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 48px;
  padding: 0 var(--space-24);
  border-radius: var(--radius-medium);
  font-weight: 600;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primary { background: var(--color-brand); color: var(--color-white); box-shadow: var(--shadow-small); }
.btn-primary:hover { background: var(--color-brand-hover); }

.btn-secondary { background: var(--color-charcoal); color: var(--color-white); }
.btn-secondary:hover { background: var(--color-ink); }

.btn-outline { border: 1px solid var(--color-border); color: var(--color-ink); background: transparent; }
.btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand); }

.btn-ghost { color: var(--color-ink); background: transparent; }
.btn-ghost:hover { background: var(--color-surface); }

.btn.is-loading {
  pointer-events: none;
}