/* Icon Base Styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

/* Icon Sizes */
.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

.icon-2xl {
    width: 2em;
    height: 2em;
}

/* Icon Colors */
.icon-primary {
    color: var(--primary);
}

.icon-secondary {
    color: var(--secondary);
}

.icon-accent {
    color: var(--accent);
}

/* Icon Animations */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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

.icon-pulse {
    animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Icon Margins */
.icon-mr {
    margin-right: 0.5em;
}

.icon-ml {
    margin-left: 0.5em;
}

.icon-mb {
    margin-bottom: 0.5em;
}

.icon-mt {
    margin-top: 0.5em;
}