/**
 * SVG Icons Replacement for FontAwesome
 * Usage: <svg class="icon icon-lock"><use href="/assets/icons/fa-icons.svg#fa-lock"/></svg>
 */

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

/* Size variants */
.icon-xs { width: 0.75em; height: 0.75em; }
.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.33em; height: 1.33em; }
.icon-xl { width: 2em; height: 2em; }
.icon-2xl { width: 2.5em; height: 2.5em; }

/* Fixed width (like fa-fw) */
.icon-fw {
  width: 1.25em;
  text-align: center;
}

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

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

/* Color variants */
.icon-muted { opacity: 0.6; }
.icon-primary { fill: var(--accent-primary, #1cdc56); }
.icon-secondary { fill: var(--accent-secondary, #00D9FF); }
.icon-danger { fill: #e74c3c; }
.icon-warning { fill: #f39c12; }
.icon-success { fill: #2ecc71; }