/* =============================================================
 * VI Component: Badge
 * vi-badge
 * =============================================================
 *
 * VARIANTS:    vi-badge--brand | vi-badge--neutral | vi-badge--success |
 *              vi-badge--warning | vi-badge--error | vi-badge--info
 * MODIFIERS:   vi-badge--dot (with leading status dot)
 *
 * USAGE PATTERN:
 *   <span class="vi-badge vi-badge--success">Active</span>
 *   <span class="vi-badge vi-badge--warning vi-badge--dot">Pending</span>
 *   <span class="vi-badge vi-badge--neutral">Draft</span>
 *
 * TOKENS: Tier 3 (--badge-*) defined below, mapping to Tier 2 roles.
 *         Rules reference Tier 3 ONLY — never --primitive-* or
 *         Tier 2 directly. Brand/info fills consume the surface.*
 *         + on-surface.* AA pairs (§20 boundary).
 * ============================================================= */

/* ── Tier 3 component tokens ── */
.vi-badge {
  /* structure + type */
  --badge-font-size:     var(--font-size-xs);
  --badge-font-weight:   var(--font-weight-semibold);
  --badge-letterspacing: var(--font-letterspacing-wide);
  --badge-leading:       var(--font-leading-snug);
  --badge-gap:           var(--spacing-component-gap-sm);
  --badge-padding-y:     var(--spacing-component-padding-2xs);
  --badge-padding-x:     var(--spacing-component-padding-sm);
  --badge-radius:        var(--radius-badge);
  --badge-dot-size:      var(--sizing-indicator-dot);

  /* variant: brand (surface.accent AA pair) */
  --badge-brand-bg:     var(--color-surface-accent);
  --badge-brand-text:   var(--color-on-surface-accent);

  /* variant: neutral */
  --badge-neutral-bg:   var(--color-surface-subtle);
  --badge-neutral-text: var(--color-text-secondary);

  /* variant: success / warning / error (feedback roles) */
  --badge-success-bg:   var(--color-feedback-success-bg);
  --badge-success-text: var(--color-feedback-success-text);
  --badge-warning-bg:   var(--color-feedback-warning-bg);
  --badge-warning-text: var(--color-feedback-warning-text);
  --badge-error-bg:     var(--color-feedback-error-bg);
  --badge-error-text:   var(--color-feedback-error-text);

  /* variant: info (surface.accent-strong AA pair) */
  --badge-info-bg:      var(--color-surface-accent-strong);
  --badge-info-text:    var(--color-on-surface-accent-strong);
}

/* ── Base ── */
.vi-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--badge-gap);
  padding:        var(--badge-padding-y) var(--badge-padding-x);
  border-radius:  var(--badge-radius);
  font-size:      var(--badge-font-size);
  font-weight:    var(--badge-font-weight);
  letter-spacing: var(--badge-letterspacing);
  text-transform: uppercase;
  line-height:    var(--badge-leading);
  white-space:    nowrap;
}

/* ── Dot modifier (status indicator) ── */
.vi-badge--dot::before {
  content:       '';
  display:       inline-block;
  width:         var(--badge-dot-size);
  height:        var(--badge-dot-size);
  border-radius: var(--badge-radius);
  background:    currentColor;
  flex-shrink:   0;
}

/* ── Variant: Brand ── */
.vi-badge--brand {
  background-color: var(--badge-brand-bg);
  color:            var(--badge-brand-text);
}

/* ── Variant: Neutral ── */
.vi-badge--neutral {
  background-color: var(--badge-neutral-bg);
  color:            var(--badge-neutral-text);
}

/* ── Variant: Success ── */
.vi-badge--success {
  background-color: var(--badge-success-bg);
  color:            var(--badge-success-text);
}

/* ── Variant: Warning ── */
.vi-badge--warning {
  background-color: var(--badge-warning-bg);
  color:            var(--badge-warning-text);
}

/* ── Variant: Error ── */
.vi-badge--error {
  background-color: var(--badge-error-bg);
  color:            var(--badge-error-text);
}

/* ── Variant: Info (brand-adjacent, softer) ── */
.vi-badge--info {
  background-color: var(--badge-info-bg);
  color:            var(--badge-info-text);
}