.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn--primary { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { background: var(--color-bg-tertiary); color: var(--color-text-primary); border-color: var(--color-border-default); }
.btn--secondary:hover { background: var(--color-bg-hover); border-color: var(--color-border-strong); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.btn--accent { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-muted); }
.btn--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--full { width: 100%; }

@media (forced-colors: active) {
  .btn:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}