/**
 * Professional Icon System
 * SVG-based icons for a corporate look
 */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}

.icon-lg {
  width: 64px;
  height: 64px;
}

.icon-sm {
  width: 32px;
  height: 32px;
}

.icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.icon-lg svg {
  width: 32px;
  height: 32px;
}

.icon-sm svg {
  width: 16px;
  height: 16px;
}

/* Icon variants */
.icon-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.icon-secondary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.icon-accent {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Icon with background circle */
.icon-circle {
  border-radius: 50%;
}

/* Icon with subtle shadow */
.icon-elevated {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Specific icon styles */
.icon-search svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-shield svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-users svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-chart svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-settings svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-check svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-alert svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-file svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-lightning svg { stroke: currentColor; fill: none; stroke-width: 2; }
.icon-target svg { stroke: currentColor; fill: none; stroke-width: 2; }