@layer components {
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap); padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-line); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-ink);
    font-weight: 600; text-decoration: none; cursor: pointer;
  }
  .button--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-ink); }
  .button--danger { color: var(--color-danger); }
  .button--small { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: 0.9rem; }
  .button--block { width: 100%; }
  .button--link { padding-inline: 0; border: 0; background: none; color: var(--color-brand); font-weight: 400; text-decoration: underline; }
  .button--link.button--danger { color: var(--color-danger); }
  form.button_to { display: inline; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
}