@layer components {
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-chip);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
  }

  .chip--accent { background: var(--accent-soft); color: var(--accent); }
  .chip--good { background: var(--good-soft); color: var(--good); }
  .chip--warn { background: var(--warn-soft); color: var(--warn); }
  .chip--danger { background: var(--danger-soft); color: var(--danger); }
}