/* ==========================================================================
   Risos Shared — Badge Components
   From: web/static/css/style.css lines 881-902 (section 9. BADGES)
   Extracted + extended: 28 Mei 2026

   Variants:
     .badge                  base pill
     .badge-primary          brand navy soft
     .badge-success/done/paid green soft
     .badge-warning/pending  amber soft
     .badge-danger/cancelled/expired red soft
     .badge-muted            neutral surface

   NEW (extended for marketing/corporate sites):
     .badge-soft-info        info / brand soft
     .badge-soft-success     success soft
     .badge-soft-warning     warning soft
     .badge-soft-danger      danger soft

   Depends: tokens.css
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  font-family: var(--ff-body, inherit);
}

/* Legacy variants (from style.css) — preserved for backward compat */
.badge-primary {
  background: rgba(30,64,175,0.15);
  color: #93c5fd;
}
.badge-success,
.badge-done,
.badge-paid {
  background: rgba(16,185,129,0.12);
  color: #4ade80;
}
.badge-warning,
.badge-pending {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}
.badge-danger,
.badge-cancelled,
.badge-expired {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.badge-muted {
  background: var(--bg-surface, var(--bg-elev, #f8f9fc));
  color: var(--text-muted, var(--txt-muted, #475569));
  border: 1px solid var(--border-subtle, var(--line, #e2e8f0));
}

/* ── Soft semantic variants ──────────────────────────────────────────────
   Inspired by token semantic-soft pattern (--c-success-soft, --c-warning-soft,
   --c-danger-soft) from tokens.css. Built for marketing/corporate pages
   where badges need stronger contrast on white backgrounds.
   ──────────────────────────────────────────────────────────────────────── */
.badge-soft-info {
  background: color-mix(in oklab, var(--c-brand, #1e40af) 10%, transparent);
  color: var(--c-brand, #1e40af);
  border: 1px solid color-mix(in oklab, var(--c-brand, #1e40af) 20%, transparent);
}
.badge-soft-success {
  background: var(--c-success-soft, rgba(34,197,94,0.15));
  color: var(--c-success, #22c55e);
  border: 1px solid color-mix(in oklab, var(--c-success, #22c55e) 25%, transparent);
}
.badge-soft-warning {
  background: var(--c-warning-soft, rgba(234,179,8,0.15));
  color: var(--c-warning, #eab308);
  border: 1px solid color-mix(in oklab, var(--c-warning, #eab308) 25%, transparent);
}
.badge-soft-danger {
  background: var(--c-danger-soft, rgba(239,68,68,0.15));
  color: var(--c-danger, #ef4444);
  border: 1px solid color-mix(in oklab, var(--c-danger, #ef4444) 25%, transparent);
}