/* =============================================================
   SEMOG · Pills — atomic status badges (unscoped)

   USE: import alongside tokens.css. Works anywhere in the host
   app — does NOT require .tahoe-shell wrapper. Composed entirely
   of tokens (--success-soft, --info-border, etc.) so re-themes
   flow through automatically.

   New in 0.3.0. Replaces the previous .tahoe-shell .pill-* rules
   that lived in kits/admin/tahoe.css (now removed). Apps already
   inside .tahoe-shell continue to work — these are global classes.

   Pattern: bg = soft, border = border-token, color = saturated.
   ============================================================= */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* ─────────── Feedback variants ───────────
   Domain aliases (pill-pago, pill-pendente, pill-vencido) are used by the
   sindico kit for financial status. They share visuals with ok/warn/danger —
   same treatment, different name for semantic clarity in síndico UI. */
.pill-ok,
.pill-pago {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}

.pill-warn,
.pill-pendente {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning);
}

.pill-danger,
.pill-vencido {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}

.pill-info {
  background: var(--info-soft);
  border-color: var(--info-border);
  color: var(--info);
}

/* ─────────── Decorative variants (composed from existing tokens) ─────────── */
/* Sky — calm informational variant (uses --link family + sky scale) */
.pill-sky {
  background: var(--link-soft);              /* --sky-200 */
  border-color: var(--sky-300, #ADD5EB);
  color: var(--link);                        /* --blue-600 */
}

/* Neutral — composed from base surface tokens, no new vars needed */
.pill-neutral {
  background: var(--bg-soft);                /* --gray-50 */
  border-color: var(--border);               /* --gray-200 */
  color: var(--fg-muted);                    /* --gray-500 */
}

/* Jurídico — terminal, fora da nossa mão. Grafite de propósito: NÃO pode ser
   vermelho, porque .pill-danger (acordo quebrado) aparece lado a lado na mesma
   tabela e a distinção entre "problema pra resolver hoje" e "saiu da nossa mão"
   se perderia. Mais escura que .pill-neutral (Quitado) porque tem peso: uma
   saiu do ciclo pagando, a outra saiu devendo. */
.pill-slate {
  background: var(--gray-100);               /* #ECECEF */
  border-color: var(--gray-300);             /* #BCBCC7 */
  color: var(--gray-700);                    /* #2E2E36 */
}