/* icon_guide.css - Standardized Icon UX Guide & Aliases for Finger Nexus AI CRM v2.02 */

/* 1. Global Font Smoothing & Icon Baseline */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  vertical-align: -0.125em;
}

/* 2. Common Icon Aliases & Fallbacks (Free vs Pro Compatibility) */
.fa-sparkles::before {
  content: "\e2ca" !important; /* fa-wand-magic-sparkles fallback */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-shield-check::before {
  content: "\f3ed" !important; /* fa-shield-halved fallback */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-memo::before {
  content: "\f249" !important; /* fa-note-sticky fallback */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* 3. Icon Color Tokens & Theming */
.icon-ai {
  color: #a855f7 !important;
}

.icon-growth {
  color: #06b6d4 !important;
}

.icon-blue {
  color: #3b82f6 !important;
}

.icon-amber {
  color: #f59e0b !important;
}

.icon-red {
  color: #ef4444 !important;
}

.icon-green {
  color: #10b981 !important;
}

/* 4. Interactive Icon Micro-Animations & UX States */
.icon-interactive {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  cursor: pointer;
}

.icon-interactive:hover {
  transform: scale(1.15);
}

.icon-spin-slow {
  animation: fa-spin 3s infinite linear;
}

/* 5. Tooltip & Badge Icons */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
}