/* ═══════════════════════════════════════════════════════════
   ATOM: Badge / Eyebrow
   Small uppercase label, often above a heading
   Variants: default (blue), --emerald, --amber, --violet
   ═══════════════════════════════════════════════════════════ */

.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-none);
  padding: 5px var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: var(--color-blue-bg-subtle);
  color: var(--color-blue);
}

.badge--emerald {
  border-color: rgba(16, 185, 129, 0.3);
  background: var(--color-emerald-bg);
  color: var(--color-emerald);
}

.badge--amber {
  border-color: rgba(245, 158, 11, 0.3);
  background: var(--color-amber-bg);
  color: var(--color-amber);
}

.badge--violet {
  border-color: rgba(168, 85, 247, 0.3);
  background: var(--color-violet-bg);
  color: var(--color-violet);
}


/* ── Eyebrow: plain text version without border/background ─ */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: var(--leading-none);
}

.eyebrow--sky {
  color: var(--color-sky);
}

.eyebrow--muted {
  color: var(--color-text-3);
}