/* ============================================================
   Think! Design & Planning — Custom CSS SVG Vector Icon System
   Zero generic icons or emojis. Handcrafted SVG vectors styled with theme tokens.
   ============================================================ */

.custom-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.custom-svg-icon svg {
  width: 100%;
  height: 100%;
}

.custom-svg-icon-lg {
  width: 3rem;
  height: 3rem;
}

.custom-svg-icon-md {
  width: 2rem;
  height: 2rem;
}

.custom-svg-icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}

/* Icon Box Wrappers */
.icon-box-cyan {
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: #22d3ee;
}

.icon-box-emerald {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.icon-box-indigo {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.3);
  color: #818cf8;
}

.icon-box-amber {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.custom-svg-card:hover .custom-svg-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px currentColor);
}