@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: var(--r-full);
    line-height: 1.4;
  }
  .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

  .badge-neutral  { background: var(--ink-100); color: var(--ink-600); }
  .badge-neutral  .badge-dot { background: var(--ink-400); }
  .badge-forest   { background: var(--forest-100); color: var(--forest-700); }
  .badge-forest   .badge-dot { background: var(--forest-500); }
  .badge-amber    { background: var(--amber-100); color: var(--amber-700); }
  .badge-amber    .badge-dot { background: var(--amber-500); }
  .badge-success  { background: var(--success-50); color: var(--success-600); }
  .badge-success  .badge-dot { background: var(--success-500); }
  .badge-danger   { background: var(--danger-50); color: var(--danger-600); }
  .badge-danger   .badge-dot { background: var(--danger-500); }
  .badge-warning  { background: var(--warning-50); color: var(--warning-500); }
  .badge-warning  .badge-dot { background: var(--warning-500); }
  .badge-dark     { background: var(--ink-950); color: rgba(255,255,255,.85); }

  /* Status pill with large dot */
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-600);
  }
  .status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .status-dot.pending  { background: var(--amber-500); }
  .status-dot.active   { background: var(--success-500); animation: pulse 2s infinite; }
  .status-dot.complete { background: var(--forest-500); }
  .status-dot.error    { background: var(--danger-500); }
  .status-dot.locked   { background: var(--ink-400); }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39,137,76,.4); }
    50% { box-shadow: 0 0 0 4px rgba(39,137,76,0); }
  }
}