/* ============================================================
   Optma DS · Badge · v0.1
   Status pills com semântica. Soft (fundo claro) por padrão.
============================================================ */

.opt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--opt-space-2);

  font-family: var(--opt-font-body);
  font-size: var(--opt-text-xs);
  font-weight: var(--opt-weight-semibold);
  letter-spacing: var(--opt-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  padding: 7px 11px;
  border-radius: var(--opt-radius-full);
  background: rgba(106, 111, 104, 0.10);
  color: var(--opt-ink-mid);
}

.opt-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--opt-radius-full);
  background: var(--opt-ink-muted);
  flex-shrink: 0;
}

/* -----------------------------------------
   Tamanho · sm
   ----------------------------------------- */
.opt-badge--sm {
  font-size: var(--opt-text-2xs);
  padding: 5px 8px;
  letter-spacing: var(--opt-tracking-wider);
}

.opt-badge--sm .opt-badge__dot {
  width: 5px;
  height: 5px;
}

/* -----------------------------------------
   Variantes semânticas (soft, default)
   ----------------------------------------- */
.opt-badge--success {
  background: rgba(52, 150, 59, 0.12);
  color: var(--opt-green-deep);
}
.opt-badge--success .opt-badge__dot { background: var(--opt-green); }

.opt-badge--warning {
  background: var(--opt-paper-warm);
  color: var(--opt-orange);
}
.opt-badge--warning .opt-badge__dot { background: var(--opt-orange); }

.opt-badge--error {
  background: var(--opt-error-soft);
  color: var(--opt-error);
}
.opt-badge--error .opt-badge__dot { background: var(--opt-error); }

.opt-badge--info {
  background: var(--opt-info-soft);
  color: var(--opt-info);
}
.opt-badge--info .opt-badge__dot { background: var(--opt-info); }

.opt-badge--neutral {
  background: rgba(106, 111, 104, 0.10);
  color: var(--opt-ink-mid);
}
.opt-badge--neutral .opt-badge__dot { background: var(--opt-ink-muted); }

/* -----------------------------------------
   Modificador · solid (alto contraste)
   ----------------------------------------- */
.opt-badge--solid {
  color: #FFFFFF;
}
.opt-badge--solid.opt-badge--success { background: var(--opt-green); }
.opt-badge--solid.opt-badge--success .opt-badge__dot { background: #FFFFFF; }
.opt-badge--solid.opt-badge--warning { background: var(--opt-orange); }
.opt-badge--solid.opt-badge--warning .opt-badge__dot { background: #FFFFFF; }
.opt-badge--solid.opt-badge--error   { background: var(--opt-error); }
.opt-badge--solid.opt-badge--error .opt-badge__dot   { background: #FFFFFF; }
.opt-badge--solid.opt-badge--info    { background: var(--opt-info); }
.opt-badge--solid.opt-badge--info .opt-badge__dot    { background: #FFFFFF; }
.opt-badge--solid.opt-badge--neutral { background: var(--opt-ink); color: var(--opt-paper); }
.opt-badge--solid.opt-badge--neutral .opt-badge__dot { background: var(--opt-paper); }

/* -----------------------------------------
   Modificador · dot pulsante
   Aplica em .opt-badge__dot quando .is-live no badge.
   ----------------------------------------- */
.opt-badge.is-live .opt-badge__dot {
  position: relative;
  animation: opt-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes opt-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* Variantes específicas usam a cor do dot pra pulso */
.opt-badge--warning.is-live .opt-badge__dot {
  box-shadow: 0 0 0 0 rgba(255, 122, 44, 0.5);
  animation: opt-badge-pulse-orange 1.8s ease-in-out infinite;
}

@keyframes opt-badge-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 44, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 122, 44, 0); }
}

.opt-badge--success.is-live .opt-badge__dot {
  animation: opt-badge-pulse-green 1.8s ease-in-out infinite;
}
@keyframes opt-badge-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 150, 59, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 150, 59, 0); }
}

.opt-badge--error.is-live .opt-badge__dot {
  animation: opt-badge-pulse-error 1.8s ease-in-out infinite;
}
@keyframes opt-badge-pulse-error {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 69, 69, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(230, 69, 69, 0); }
}