.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

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

.icon-xl {
  width: 48px;
  height: 48px;
}

.icon-2xl {
  width: 64px;
  height: 64px;
}

.icon-3xl {
  width: 80px;
  height: 80px;
}

.icon-primary svg {
  stroke: var(--accent-primary);
}

.icon-secondary svg {
  stroke: var(--accent-secondary);
}

.icon-blue svg {
  stroke: var(--accent-blue);
}

.icon-muted svg {
  stroke: var(--muted);
}

.icon-white svg {
  stroke: var(--on-dark);
}

.icon-bg-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-strong));
  border-radius: 12px;
  padding: 8px;
}

.icon-bg-primary svg {
  stroke: var(--on-dark);
}

.icon-bg-blue {
  background: rgba(156, 178, 197, 0.24);
  border-radius: 12px;
  padding: 8px;
}

.icon-bg-blue svg {
  stroke: var(--accent-blue);
}

.icon-bg-secondary {
  background: rgba(214, 224, 232, 0.42);
  border-radius: 12px;
  padding: 8px;
}

.icon-bg-secondary svg {
  stroke: var(--accent-secondary);
}