:root {
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-stroke-width: 2px;
}

.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.icon-sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.icon-lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.icon-xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bg-secondary, #f3f4f6);
  padding: 8px;
}