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

   Rounded status pills with an optional status dot. Three semantic
   variants: success (green), warn (amber), accent (sky).

   Used for:
     - the "PAYMENT RECEIVED" / "YOUR ELEMENTS APP IS RUNNING" running-
       status indicators on welcome / welcome-aboard pages
     - feed "boosted" / "new" inline markers (use .pill-inline)
============================================================================= */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-mono);
  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;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

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

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

/* Accent (sky) — text uses cornflower for readability on sky wash */
.pill.is-accent {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.pill.is-accent .pill-dot { background: var(--accent); }

/* Ink / neutral (used on payment card badges) */
.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);
}