/* ══════════════════════════════════════════
   BADGE / TAG — Component CSS
   per DESIGN.md: Komponen UI → Badge/Tag
   ══════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.badge--category {
  color: var(--primary);
  background: var(--primary-light);
}

.badge--breaking {
  color: var(--text-inverse);
  background: var(--accent);
  animation: badge-pulse 2s ease-in-out infinite;
}

.badge--live {
  color: var(--text-inverse);
  background: var(--accent);
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}