@layer components {
  /* ======================
   * COUNT BADGE
   * ======================
   * Small pill-shaped badge for displaying counts.
   * Used in navigation, tabs, and list items.
   */
  .count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    color: var(--color-ink-muted);
    background-color: var(--color-grey-200);
    border-radius: var(--radius-full);
  }

  /* Active state - used when parent link is active */
  .is-active .count-badge {
    color: var(--color-primary);
    background-color: oklch(from var(--color-primary) l c h / 0.15);
  }
}