/* ============================================================
   Valet Design System — Badges / Status Chips
   Requires: base-tokens.css, client-tokens.css

   One class per badge — no base class needed.
   Usage: <span class="badge-success">Complete</span>

   Semantic:  badge-success, badge-warning, badge-danger,
              badge-info, badge-neutral, badge-brand
   Statuses:  badge-status-* (ClickUp / project / billing)
   Sizes:     append badge-sm for smaller variant
   ============================================================ */

/* ── Shared structure via :is() ──────────────────────────── */
:is(
  .badge-success, .badge-warning, .badge-danger,
  .badge-info, .badge-neutral, .badge-brand
) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* Dot indicator */
:is(
  .badge-success, .badge-warning, .badge-danger,
  .badge-info, .badge-neutral, .badge-brand
)::before {
  content: '';
  display: block;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* ── Semantic variants ───────────────────────────────────── */
.badge-success      { background-color: oklch(94% 0.06 145); color: oklch(35% 0.12 145); }
.badge-warning      { background-color: oklch(95% 0.08 80);  color: oklch(42% 0.14 65);  }
.badge-danger       { background-color: oklch(95% 0.06 25);  color: oklch(42% 0.18 25);  }
.badge-info         { background-color: oklch(94% 0.05 240); color: oklch(38% 0.10 240); }
.badge-neutral      { background-color: color-mix(in oklch, var(--color-bg) 60%, var(--slate)); color: var(--color-text-muted); }
.badge-brand        { background-color: color-mix(in oklch, var(--color-primary) 12%, transparent); color: var(--color-primary); }

/* ── Small variant ───────────────────────────────────────── */
.badge-sm {
  padding: 0 var(--space-2);
  font-size: 0.6875rem;
}

.badge-sm::before {
  inline-size: 5px;
  block-size: 5px;
}