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

   PURPOSE
   Provides the small coloured label badges used as icon substitutes across
   the site. These appear in benefit cards, resource rows, sustainability
   claims, and technical sections wherever a compact visual marker is needed.

   USAGE
   <span class="ebc-icon ebc-icon--em" aria-hidden="true">DS</span>
   <span class="ebc-icon ebc-icon--gold" aria-hidden="true">FIRE</span>

   VARIANTS
   ebc-icon--em       Emerald (primary brand green)
   ebc-icon--gold     Gold/amber accent
   ebc-icon--blue     Blue technical accent
   ebc-icon--violet   Violet accent
   ebc-icon--red      Red / fire / critical
   ebc-icon--sl       Slate / muted neutral

   LOAD ORDER
   Loaded globally — used on Home, Product Hub, Technical Hub, Sustainability.
   ========================================================================== */

.ebc-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--eb-radius-lg, 10px);
  font-family:     var(--eb-font-mono);
  font-size:       0.58rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  flex-shrink:     0;
  user-select:     none;
  -webkit-user-select: none;
  border:          0.5px solid;
}

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

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

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

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

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

/* ── Slate / neutral ── */
.ebc-icon--sl {
  background:   rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color:        rgba(255, 255, 255, 0.5);
}

/* ── Size modifiers ── */
.ebc-icon--sm {
  width:     30px;
  height:    30px;
  font-size: 0.5rem;
  border-radius: var(--eb-radius-md, 8px);
}

.ebc-icon--lg {
  width:     52px;
  height:    52px;
  font-size: 0.68rem;
  border-radius: var(--eb-radius-xl, 14px);
}