/* ============================================================================
   UNIFIED BADGE / CHIP SYSTEM — .badge / .chip  (T16.9)
   ----------------------------------------------------------------------------
   Standardizes sizing, radius, and TOKENIZES the model / pricing / difficulty
   badge colors that were previously hardcoded hex across modules (free, paid,
   freemium, beginner, intermediate, advanced, model).
   Token-pure; status colors map to the semantic --color-* / --surface-* tokens.
   Per AUDIT §9 #10 / #19, DESIGN-SYSTEM §4 / D1.
   ========================================================================== */

/* ── Badge base (pill, solid-tint) ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  /* Neutral default */
  background: var(--surface-interactive, var(--color-bg-tertiary));
  color: var(--color-text-secondary);
}

/* ── Semantic status tints ────────────────────────────────────────────────── */
.badge--success {
  background: var(--surface-success, var(--color-success-light));
  color: var(--color-success);
}
.badge--warning {
  background: var(--surface-warning, var(--color-warning-light));
  color: var(--color-warning);
}
.badge--danger {
  background: var(--surface-error, var(--color-danger-light));
  color: var(--color-danger);
}
.badge--info {
  background: var(--surface-info, var(--color-info-light));
  color: var(--color-info);
}
.badge--brand {
  background: var(--surface-selected, var(--color-accent-light));
  color: var(--color-primary);
}

/* ── Solid accent (NEW / featured) ────────────────────────────────────────── */
.badge--solid {
  background: var(--color-primary);
  color: var(--color-text-on-accent);
}

/* ── Pricing (tokenized) ──────────────────────────────────────────────────── */
.badge--free { background: var(--surface-success, var(--color-success-light)); color: var(--color-success); }
.badge--paid { background: var(--surface-error, var(--color-danger-light)); color: var(--color-danger); }
.badge--freemium { background: var(--surface-warning, var(--color-warning-light)); color: var(--color-warning); }

/* ── Difficulty (tokenized) ───────────────────────────────────────────────── */
.badge--beginner { background: var(--surface-success, var(--color-success-light)); color: var(--color-success); }
.badge--intermediate { background: var(--surface-warning, var(--color-warning-light)); color: var(--color-warning); }
.badge--advanced { background: var(--surface-error, var(--color-danger-light)); color: var(--color-danger); }

/* ── Model badge (brand/purple tint, replaces hardcoded brand hex) ────────── */
.badge--model {
  background: var(--surface-selected, var(--color-accent-light));
  color: var(--color-purple);
}

/* ── Chip (rectangular tag, e.g. industries / integrations) ───────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default, var(--color-border));
  background: transparent;
  color: var(--color-text-secondary);
}
.chip--more {
  color: var(--color-text-tertiary);
  border-style: dashed;
}