/* ================================
   PROFESSIONAL SVG ICON SYSTEM
   Replaces emojis with clean icons
   ================================ */

/* Icon base styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 40px; height: 40px; }
.icon-3xl { width: 48px; height: 48px; }

/* Icon colors */
.icon-primary { color: var(--primary-color); }
.icon-white { color: white; }
.icon-muted { color: var(--text-medium); }
.icon-dark { color: var(--text-dark); }
.icon-success { color: var(--success); }
.icon-error { color: var(--error); }
.icon-warning { color: var(--warning); }

/* Icon container with background */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.icon-box-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.icon-box-md {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.icon-box-lg {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.icon-box-xl {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

.icon-box-primary {
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.15) 0%, rgba(255, 140, 66, 0.08) 100%);
    color: var(--primary-color);
}

.icon-box-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.icon-box-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.icon-box-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.icon-box-neutral {
    background: var(--bg-light);
    color: var(--text-medium);
}