/* ============================================================
   components/badge.css  —  ds-badge, ds-chip, ds-kicker
   ============================================================ */

/* ── Badge ────────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: var(--ds-badge-py, 0.25rem) var(--ds-badge-px, 0.75rem);
  border-radius: var(--ds-badge-radius, 9999px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}

/* Status variants */
.ds-badge--default {
  background: var(--ds-surface-2);
  color: var(--ds-text-muted);
  border-color: var(--ds-border);
}

.ds-badge--accent {
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  color: var(--ds-accent);
  border-color: color-mix(in srgb, var(--ds-accent) 25%, transparent);
}

.ds-badge--success {
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.22);
}

.ds-badge--warn {
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.22);
}

.ds-badge--danger {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.20);
}

.ds-badge--info {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.20);
}

/* ── Chip (larger, rounded, interactive) ──────────────────── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 0.5rem);
  padding: 0.4rem var(--ds-space-4, 1rem);
  border-radius: var(--ds-chip-radius, 9999px);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  cursor: default;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ds-chip--interactive { cursor: pointer; }
.ds-chip--interactive:hover {
  background: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface-2) 92%);
  border-color: color-mix(in srgb, var(--ds-accent) 30%, var(--ds-border) 70%);
  color: var(--ds-text);
}

.ds-chip--active {
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--ds-accent) 35%, transparent);
  color: var(--ds-accent);
}

/* ── Kicker (already in typography.css, aliased here) ──────── */
.ds-kicker {
  display: inline-block;
  font-size: var(--ds-kicker-size, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-kicker-color, var(--ds-accent));
  margin-bottom: var(--ds-space-3, 0.75rem);
}