/* Icon System */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle;
    transition: all var(--transition-fast);
}

/* Icon Sizes */
.icon-xs {
    width: 0.75em;
    height: 0.75em;
}

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

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

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

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

/* Feature Icons */
.feature-card .icon {
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    color: var(--primary-500);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-normal);
}

.feature-card:hover .icon {
    background: var(--primary-500);
    color: white;
    transform: scale(1.1) rotate(5deg);
}

/* Button Icons */
.btn .icon {
    margin-right: 0.5em;
}

.btn-icon .icon {
    margin-right: 0;
}

/* Navigation Icons */
.nav-icon {
    width: 1.5em;
    height: 1.5em;
}

/* Form Icons */
.form-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    height: 1.25em;
    pointer-events: none;
    color: var(--text-tertiary);
}

.form-icon-left {
    left: 1rem;
}

.form-icon-right {
    right: 1rem;
}

/* Animated Icons */
.icon-spin {
    animation: icon-spin 2s infinite linear;
}

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

/* Icon with Badge */
.icon-with-badge {
    position: relative;
    display: inline-block;
}

.icon-badge {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    min-width: 1em;
    height: 1em;
    padding: 0 0.25em;
    border-radius: 1em;
    background: var(--error-color);
    color: white;
    font-size: 0.75em;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Icon Groups */
.icon-group {
    display: inline-flex;
    align-items: center;
}

.icon-group .icon + .icon {
    margin-left: 0.5em;
}

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

/* Hover Effects */
.icon-hover {
    transition: transform var(--transition-fast);
}

.icon-hover:hover {
    transform: scale(1.1);
}

/* High Contrast Mode Support */
@media (forced-colors: active) {
    .icon {
        forced-color-adjust: auto;
    }
}