/* Local Icon System - Replaces FontAwesome CDN */
/* ============================================== */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Icon base styles */
.fas {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Phone icon */
.fa-phone {
  background-image: url('../icons/phone.svg');
}

/* Times/Close icon */
.fa-times {
  background-image: url('../icons/times.svg');
}

/* Microphone icon */
.fa-microphone {
  background-image: url('../icons/microphone.svg');
}

/* Exclamation triangle icon */
.fa-exclamation-triangle {
  background-image: url('../icons/exclamation-triangle.svg');
}

/* Size variants */
.fa-xs { font-size: 0.75em; }
.fa-sm { font-size: 0.875em; }
.fa-lg { font-size: 1.25em; }
.fa-xl { font-size: 1.5em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }

/* Animation support */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Utility classes for icons */
.icon-inline {
  vertical-align: middle;
  margin-right: 0.5em;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

/* Icon colors */
.icon-primary { color: var(--color-primary); }
.icon-secondary { color: var(--color-secondary); }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }
.icon-danger { color: #ef4444; }
.icon-white { color: white; }
.icon-muted { color: var(--text-muted); }