/* ============================================================
   Vortal — Status Badge Map
   App-specific. Maps ClickUp / project / billing status names
   to design system badge semantics.
   Requires: components/badges.css
   ============================================================ */

:is(
  .badge-status-open, .badge-status-active,
  .badge-status-inprogress, .badge-status-review,
  .badge-status-complete, .badge-status-closed,
  .badge-status-cancelled, .badge-status-overdue,
  .badge-status-pastdue
) {
  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;
}

:is(
  .badge-status-open, .badge-status-active,
  .badge-status-inprogress, .badge-status-review,
  .badge-status-complete, .badge-status-closed,
  .badge-status-cancelled, .badge-status-overdue,
  .badge-status-pastdue
)::before {
  content: '';
  display: block;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* Tasks */
.badge-status-open        { background-color: oklch(94% 0.05 240); color: oklch(38% 0.10 240); }
.badge-status-inprogress  { background-color: oklch(95% 0.08 80);  color: oklch(42% 0.14 65);  }
.badge-status-review      { background-color: oklch(95% 0.08 80);  color: oklch(42% 0.14 65);  }
.badge-status-complete    { background-color: oklch(94% 0.06 145); color: oklch(35% 0.12 145); }
.badge-status-overdue     { background-color: oklch(95% 0.06 25);  color: oklch(42% 0.18 25);  }
.badge-status-cancelled   { background-color: color-mix(in oklch, var(--color-bg) 60%, var(--slate)); color: var(--color-text-muted); }

/* Projects */
.badge-status-active      { background-color: color-mix(in oklch, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.badge-status-closed      { background-color: color-mix(in oklch, var(--color-bg) 60%, var(--slate)); color: var(--color-text-muted); }

/* Billing */
.badge-status-pastdue     { background-color: oklch(95% 0.06 25);  color: oklch(42% 0.18 25);  }