:root { --al-icon-size: 1.15em; }

/* Base: aplica-se ao <svg>/<img>/<span> raiz que recebe a classe .al-icon */
.al-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--al-icon-size);
  height: var(--al-icon-size);
  vertical-align: -0.18em;
  line-height: 0;
  flex: 0 0 auto;
}
svg.al-icon { display: inline-block; }
svg.al-icon path,
svg.al-icon circle,
svg.al-icon rect,
svg.al-icon line,
svg.al-icon g { vector-effect: non-scaling-stroke; }
img.al-icon { object-fit: contain; }

/* Wrapper usado pelo alIcon() quando há opts (className/label/size) */
.al-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--al-icon-size);
  height: var(--al-icon-size);
  flex: 0 0 auto;
  line-height: 0;
  vertical-align: -0.18em;
}
.al-icon-wrap > .al-icon { width: 100%; height: 100%; }

/* Emoji fallback: deixa o glifo fluir no tamanho do texto */
.al-icon--emoji {
  width: auto;
  height: auto;
  font-style: normal;
}

/* Tamanhos nomeados */
.al-icon--sm { --al-icon-size: 1em; }
.al-icon--md { --al-icon-size: 1.5em; }
.al-icon--lg { --al-icon-size: 2em; }

/* Tratamento de cor:
 * - mono: herda currentColor (paths usam fill/stroke="currentColor")
 * - duo: cores fixas da marca embutidas no SVG (não herdam)
 * Variantes semânticas afetam apenas os monocromáticos. */
.al-icon--mono { color: inherit; }
.al-icon--success { color: var(--alx-success, #2A9D8F); }
.al-icon--danger  { color: var(--alx-danger,  #E76F51); }
.al-icon--warning { color: var(--alx-warning, #F4A261); }
.al-icon--gold    { color: var(--alx-accent,  #FFB703); }
.al-icon--primary { color: var(--alx-primary, #219EBC); }