/*
 * badges.css — unified badge primitive (v3.1.0).
 *
 * Replaces the 7 separate badge implementations previously in styles.css:
 *   .tag.brand / .proposal / .content / .insight
 *   .team-badge.hcm / .hn
 *   .year-badge
 *   .status-badge.running / .ended
 *   .cat-label-badge   (kept; relies on solid info-bg for contrast)
 *   .proj-chip
 *   .chip
 *
 * Shape variants: pill (default), tag (rounded square)
 * Tone via [data-tone="..."] OR .badge--<tone> class.
 * Tones: indigo · cyan · success · warn · danger · neutral · brand-soft
 *
 * Usage:
 *   <span class="badge" data-tone="success">Đang chạy</span>
 *   <span class="badge badge--tag" data-tone="cyan">2026</span>
 *
 * Component CSS variable hooks (per-instance overrides):
 *   --badge-fg, --badge-bg, --badge-border
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.2);
  border-radius: var(--radius-pill, 9999px);
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--badge-bg, var(--surface-muted, #F3F4F6));
  color: var(--badge-fg, var(--text));
  border: 1px solid var(--badge-border, transparent);
}

.badge--tag {
  border-radius: var(--radius-xs, 4px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-xs, 11px);
}

.badge--lg {
  padding: 4px 12px;
  font-size: var(--font-size-sm, 13px);
}

.badge--dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 2px;
}

/* ── Tone presets ───────────────────────────────────────────── */
.badge[data-tone="indigo"], .badge--indigo {
  --badge-bg: rgba(19, 20, 124, 0.08);
  --badge-fg: var(--indigo);
}
.badge[data-tone="brand-soft"], .badge--brand-soft {
  --badge-bg: rgba(19, 20, 124, 0.04);
  --badge-fg: var(--indigo);
  --badge-border: rgba(19, 20, 124, 0.18);
}
.badge[data-tone="cyan"], .badge--cyan {
  --badge-bg: var(--primary-100, #E6F7FD);  /* v5.1: was --info-bg */
  --badge-fg: var(--cyan-text);
}
.badge[data-tone="success"], .badge--success {
  --badge-bg: var(--success-bg, #D1FAE5);
  --badge-fg: var(--success);
}
.badge[data-tone="warn"], .badge--warn {
  --badge-bg: var(--warning-bg, #FEF3C7);
  --badge-fg: #B45309;
}
.badge[data-tone="danger"], .badge--danger {
  --badge-bg: var(--danger-bg, #FEE2E2);
  --badge-fg: var(--danger);
}
.badge[data-tone="neutral"], .badge--neutral {
  --badge-bg: var(--surface-muted, #F3F4F6);
  --badge-fg: var(--text-mid);
}