/* Design System - Icons */

/* Base icon styles */
.ds-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

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

.ds-icon-md {
  width: 1.25rem;
  height: 1.25rem;
}

.ds-icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

.ds-icon-xl {
  width: 2rem;
  height: 2rem;
}

/* Icon colors */
.ds-icon-primary {
  stroke: #384E8F;
}

.ds-icon-secondary {
  stroke: #6B7280;
}

.ds-icon-success {
  stroke: #22C55E;
}

.ds-icon-error {
  stroke: #EF4444;
}

.ds-icon-warning {
  stroke: #F59E0B;
}

.ds-icon-muted {
  stroke: #9CA3AF;
}

/* Icon container - for background icons like in metric cards */
.ds-icon-container {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #EEF2FF;
}

.ds-icon-container-sm {
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
}

.ds-icon-container-lg {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}

/* Icon container variants */
.ds-icon-container-primary {
  background-color: #EEF2FF;
}

.ds-icon-container-success {
  background-color: #DCFCE7;
}

.ds-icon-container-error {
  background-color: #FEE2E2;
}

.ds-icon-container-warning {
  background-color: #FEF3C7;
}

.ds-icon-container-info {
  background-color: #DBEAFE;
}