/* =============================================================================
   @elements/style — pill

   Rounded status pill with an optional status dot. Intent variants
   follow the universal vocabulary.

     <span class="pill">DRAFT</span>                    — default neutral
     <span class="pill is-success"><span class="dot"></span> PAYMENT RECEIVED</span>
     <span class="pill is-warn">PENDING</span>
     <span class="pill is-accent">NEW</span>
     <span class="pill is-ink">BETA</span>                 — ink-on-white tag
============================================================================= */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-semibold);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--bg-soft);
  color: var(--ink-soft);
}

:where(.pill > .dot) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── Success (running, received, active) ──────────────────────── */
.pill.is-success {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green-dot);
}
.pill.is-success > .dot {
  background: var(--green);
  animation: pulse 2s infinite;
}

/* ─── Warn ────────────────────────────────────────────────────── */
.pill.is-warn {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 20%, transparent);
}
.pill.is-warn > .dot { background: var(--amber); }

/* ─── Danger ──────────────────────────────────────────────────── */
.pill.is-danger {
  background: var(--red-soft);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
}
.pill.is-danger > .dot { background: var(--red); }

/* ─── Accent (brand) ────────────────────────────────────────────── */
.pill.is-accent {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.pill.is-accent > .dot { background: var(--accent); }

/* ─── Ink (neutral solid tag) ───────────────────────────────────── */
.pill.is-ink {
  background: var(--ink);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
}