/* Padrão de ícones do site principal — Trinus
   Biblioteca única: Lucide (traço minimalista).
   Este arquivo centraliza o traço dos ícones e o estilo dos containers. */

/* 1. Traço uniforme em todos os ícones Lucide (CSS vence o atributo inline) */
svg.lucide,
svg[class*="lucide-"] {
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2. Container padrão de ícone: canto arredondado + glassmorfismo */
.icon-chip,
.icon-chip--dark,
.icon-chip--brand {
  border-radius: 0.875rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Variante clara — para seções de fundo claro */
.icon-chip {
  background: linear-gradient(135deg, rgba(46, 76, 255, 0.12), rgba(15, 228, 245, 0.06)) !important;
  border: 1px solid rgba(46, 76, 255, 0.16) !important;
  box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Variante escura — para seções de fundo escuro */
.icon-chip--dark {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Variante de marca — quando o ícone é branco sobre destaque azul */
.icon-chip--brand {
  background: linear-gradient(135deg, rgba(46, 76, 255, 0.92), rgba(30, 58, 255, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 26px -16px rgba(46, 76, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.group:hover > .icon-chip {
  background: linear-gradient(135deg, rgba(46, 76, 255, 0.18), rgba(15, 228, 245, 0.1)) !important;
}

.group:hover > .icon-chip--dark {
  border-color: rgba(15, 228, 245, 0.45) !important;
}

/* Ícones de destaque (bento grid) com traço mais fino. */
svg.lucide.icon-hairline,
.icon-hairline svg.lucide {
  stroke-width: 1.1px;
}