.button-form {
  display: contents;
}

.btn {
  --btn-bg: var(--indigo-500);
  --btn-bg-hover: var(--indigo-600);
  --btn-border: transparent;
  --btn-color: var(--white);

  align-items: center;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--btn-color);
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.375rem;
  justify-content: center;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  user-select: none;
  white-space: nowrap;
  transition: background 100ms ease-in-out, color 100ms ease-in-out, opacity 100ms ease-in-out;
}

.btn:hover {
  background: var(--btn-bg-hover);
}

.btn--secondary {
  --btn-bg: var(--white);
  --btn-bg-hover: var(--surface-subtle);
  --btn-border: var(--border-strong);
  --btn-color: var(--text);
}

.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

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

.btn--full {
  margin-top: 0.5rem;
  width: 100%;
}

.btn--danger {
  --btn-bg: var(--red-600);
  --btn-bg-hover: var(--red-500);
  --btn-border: transparent;
  --btn-color: var(--white);
}

.icon-button {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 0.25rem;
}

.icon-button:hover {
  background: var(--surface-subtle);
}