/* ============================================
   RenDS — Badge
   ============================================
   Small inline label for status, counts, or tags.
   CSS-only, no JS needed.

   Sibling primitives that used to live here are
   now in their own folders:
     - ren-separator
     - ren-avatar
     - ren-spinner
     - ren-skeleton
     - ren-kbd

   Usage:
     <span class="ren-badge">3</span>
     <span class="ren-badge ren-badge-success">Active</span>
     <span class="ren-badge-dot ren-badge-dot-danger"></span>
   ============================================ */

.ren-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--ren-badge-height);
  padding: 0.15em var(--ren-badge-padding-x);
  font-size: var(--ren-badge-font-size);
  font-weight: var(--ren-badge-font-weight);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--ren-badge-radius);
  /* Default: neutral */
  background-color: var(--ren-badge-bg);
  color: var(--ren-badge-color);
}

/* ─── Variants ─── */
.ren-badge-primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.ren-badge-secondary {
  background-color: var(--color-fill-hover);
  color: var(--color-text);
}

.ren-badge-success {
  background-color: var(--color-success-subtle);
  color: var(--color-success-strong);
}

.ren-badge-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}

.ren-badge-danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}

.ren-badge-info {
  background-color: var(--color-info-subtle);
  color: var(--color-info-strong);
}

/* Outline variant */
.ren-badge-outline {
  background-color: transparent;
  border: var(--stroke-1) solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ─── Dot indicator (no text) ─── */
.ren-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.ren-badge-dot-success { background-color: var(--color-success); }
.ren-badge-dot-warning { background-color: var(--color-warning); }
.ren-badge-dot-danger  { background-color: var(--color-danger); }