.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-family-sans);
  font-weight: var(--ml-font-weight-medium);
  font-size: var(--ml-font-size-base);
  letter-spacing: var(--ml-font-letter-spacing-wide);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ml-motion-duration-fast) var(--ml-motion-ease-standard);
  position: relative;
  user-select: none;
}

.ml-btn:disabled,
.ml-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ml-btn--primary {
  background: var(--ml-color-brand-orange);
  color: var(--ml-color-text-inverse);
}

.ml-btn--primary:hover:not(:disabled) {
  background: var(--ml-color-brand-orange-deep);
  transform: translateY(-1px);
  box-shadow: var(--ml-shadow-medium);
}

.ml-btn--primary:active:not(:disabled) {
  transform: translateY(0);
}

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

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

.ml-btn--ghost {
  background: transparent;
  color: var(--ml-color-text-primary);
}

.ml-btn--ghost:hover:not(:disabled) {
  background: var(--ml-color-surface-paper);
}

.ml-btn--sm {
  padding: 8px 16px;
  font-size: var(--ml-font-size-sm);
}

.ml-btn--lg {
  padding: 16px 32px;
  font-size: var(--ml-font-size-md);
}

.ml-btn--loading {
  color: transparent !important;
  pointer-events: none;
}

.ml-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ml-color-text-inverse);
  animation: ml-spin 700ms linear infinite;
}

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