:root {
  --b4-icon-color: #EAF3FF;
  --b4-icon-blue: #2F80ED;
  --b4-icon-green: #42D77D;
  --b4-icon-orange: #FFB84D;
  --b4-icon-red: #FF6B7A;
  --b4-icon-purple: #9B7CFF;
}

.b4-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  object-fit: contain;
  opacity: .95;
}

.b4-tile-icon {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(47,128,237,.12);
  border: 1px solid rgba(47,128,237,.25);
}

/* Filtros de cor para ícones SVG em contextos dark */
.b4-icon--white  { filter: brightness(0) invert(1); }
.b4-icon--blue   { filter: brightness(0) saturate(100%) invert(42%) sepia(70%) saturate(500%) hue-rotate(190deg); }
.b4-icon--green  { filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%) hue-rotate(90deg); }
.b4-icon--orange { filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(500%) hue-rotate(10deg); }
.b4-icon--red    { filter: brightness(0) saturate(100%) invert(60%) sepia(70%) saturate(600%) hue-rotate(320deg); }
.b4-icon--teal   { filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(400%) hue-rotate(155deg); }
.b4-icon--muted  { filter: brightness(0) invert(1); opacity: .4; }