@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--surface-sunken);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  .btn--primary { background: var(--accent); color: var(--on-accent); }
  .btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; }
  .btn--ghost { background: transparent; color: var(--accent); }
  .btn--block { width: 100%; }
  .btn--sm { padding: 0 var(--space-3); font-size: var(--text-sm); }
  .pager { display: flex; align-items: center; gap: var(--space-1); }
  .btn--icon { width: var(--tap); padding: 0; border-radius: 999px; }

  .link { color: var(--accent); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
}