/* ==========================================================================
   Eyebrow — Mono uppercase kicker label that sits above headlines
   Variants:
     Size:   --sm (11px), default (13px), --lg (16px)
     Color:  default cyan, --green, --teal
     Style:  default inline text, --pill (filled bg + border badge)
     Layout: --icon (inline-flex with SVG), --block (full-width)
   ========================================================================== */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-cyan);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

/* Size modifiers */
.eyebrow--sm { font-size: 11px; }
.eyebrow--lg { font-size: 16px; }

/* Color modifiers */
.eyebrow--green { color: var(--color-green); }
.eyebrow--teal  { color: var(--color-teal); }

/* Pill — filled badge with subtle bg + border */
.eyebrow--pill {
  background: var(--color-cyan-dim);
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
}

.eyebrow--pill.eyebrow--green {
  background: var(--color-green-dim);
  border-color: rgba(149, 191, 71, 0.15);
}

/* Icon variant — inline-flex with SVG */
.eyebrow--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow--icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Block — full-width line (centered section kickers, etc.) */
.eyebrow--block { display: block; }