.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover: var(--surface-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-contrast);
  --btn-border: transparent;
  --btn-hover: var(--brand-hover);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn-primary:active { background: var(--brand-active); }

.btn-soft {
  --btn-bg: var(--brand-soft);
  --btn-fg: var(--brand-text);
  --btn-border: transparent;
  --btn-hover: var(--brand-soft-2);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-hover: var(--surface-2);
  --btn-fg: var(--text-2);
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-hover: color-mix(in oklch, var(--danger) 86%, black);
}
.btn-danger-soft {
  --btn-bg: var(--danger-soft);
  --btn-fg: var(--danger);
  --btn-border: transparent;
  --btn-hover: color-mix(in oklch, var(--danger) 20%, var(--surface));
}

.btn-sm { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-xs); }
.btn-lg { min-height: 50px; padding: 0 var(--space-6); font-size: var(--text-base); border-radius: var(--radius); }
.btn-block { display: flex; width: 100%; }

.btn-icon { width: 42px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }

.btn .spinner { width: 1em; height: 1em; }
.btn.is-loading { pointer-events: none; }