/* SVG Icon System - Replacement for Font Awesome */
/* Optimization: ~17.3KB saved (98% reduction) */

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

/* Icon sizes */
.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: 1.5em; height: 1.5em; }
.icon-2x { width: 2em; height: 2em; }
.icon-3x { width: 3em; height: 3em; }
.icon-4x { width: 4em; height: 4em; }
.icon-5x { width: 5em; height: 5em; }
.icon-6x { width: 6em; height: 6em; }

/* For compatibility with existing text sizing classes */
.text-xs .icon,
.text-sm .icon,
.text-base .icon,
.text-lg .icon,
.text-xl .icon,
.text-2xl .icon,
.text-3xl .icon,
.text-4xl .icon,
.text-5xl .icon,
.text-6xl .icon {
    width: 1em;
    height: 1em;
}

/* Margin utilities (similar to Font Awesome) */
.icon.mr-1 { margin-right: 0.25rem; }
.icon.mr-2 { margin-right: 0.5rem; }
.icon.ml-1 { margin-left: 0.25rem; }
.icon.ml-2 { margin-left: 0.5rem; }
.icon.mb-2 { margin-bottom: 0.5rem; }
.icon.mb-4 { margin-bottom: 1rem; }

/* Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-spin {
    animation: spin 2s linear infinite;
}