/* ==========================================================================
   EliteBlocc — Chip / Badge Component
   File: assets/css/components/ebc-chip.css
   Version: 1.0

   PURPOSE
   Small inline certification and status badges. Used in the Performance
   Explorer panes on the Homepage, product certification displays, and
   anywhere a compact pill-shaped label is needed.

   USAGE
   <span class="ebc-chip ebc-chip--em">✓ Passivhaus Ready</span>
   <span class="ebc-chip ebc-chip--gold">✓ ETA Certified</span>

   VARIANTS
   ebc-chip--em       Emerald — certifications, positive status
   ebc-chip--gold     Gold — compliance, premium status
   ebc-chip--sl       Slate — neutral, secondary info
   ebc-chip--red      Red — warnings, fire-class, critical data
   ebc-chip--blue     Blue — technical, acoustic
   ebc-chip--violet   Violet — seismic, structural

   NOTE
   Previously embedded in eb-home.css PATCH 3.1. Extracted here so
   product detail pages and audience landing pages can use chips without
   loading the full homepage CSS.
   ========================================================================== */

.ebc-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  padding:        4px 10px;
  font-family:    var(--eb-font-body, 'Inter', sans-serif);
  font-size:      0.63rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  border-radius:  var(--eb-radius-full, 9999px);
  border:         0.5px solid;
  line-height:    1.4;
  white-space:    nowrap;
  user-select:    none;
  -webkit-user-select: none;
}

/* ── Emerald ── */
.ebc-chip--em {
  background:   rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  color:        var(--eb-color-emerald-light, #10b981);
}

/* ── Gold / amber ── */
.ebc-chip--gold {
  background:   rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.28);
  color:        var(--eb-color-gold, #f59e0b);
}

/* ── Slate / neutral ── */
.ebc-chip--sl {
  background:   rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color:        rgba(255, 255, 255, 0.55);
}

/* ── Red ── */
.ebc-chip--red {
  background:   rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.28);
  color:        #f87171;
}

/* ── Blue ── */
.ebc-chip--blue {
  background:   rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.28);
  color:        #60a5fa;
}

/* ── Violet ── */
.ebc-chip--violet {
  background:   rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.28);
  color:        #a78bfa;
}

/* ── Size modifiers ── */
.ebc-chip--sm {
  padding:   2px 8px;
  font-size: 0.56rem;
}

.ebc-chip--lg {
  padding:   6px 14px;
  font-size: 0.72rem;
}

/* ── On light backgrounds ── */
.ebc-chip--light-em {
  background:   rgba(6, 78, 59, 0.08);
  border-color: rgba(6, 78, 59, 0.2);
  color:        var(--eb-color-emerald, #064e3b);
}

.ebc-chip--light-gold {
  background:   rgba(180, 83, 9, 0.06);
  border-color: rgba(180, 83, 9, 0.2);
  color:        var(--eb-color-gold-pale, #b45309);
}