/* SVG Icons System */
.icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    vertical-align: middle;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 2rem;
    height: 2rem;
}

.icon-lg {
    width: 3rem;
    height: 3rem;
}

.icon-xl {
    width: 4rem;
    height: 4rem;
}

.icon-xxl {
    width: 5rem;
    height: 5rem;
}

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

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

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

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

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

/* Animated Icons */
.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

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

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

.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Icon with gradient */
.icon-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}