@layer components {
  .pagination { display: inline-flex; align-items: center; gap: 2px; }
  .pagination .page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
  }
  .pagination .page:hover { background: var(--surface); text-decoration: none; }
  .pagination .page[aria-current="page"] {
    color: var(--paper-text);
    background: var(--accent);
  }
  .pagination .page--gap { color: var(--ink-4); pointer-events: none; }
}