/* Simple Icon System - Using Unicode and CSS */
.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  vertical-align: middle;
}

.icon-sm { font-size: 0.875rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2xl { font-size: 2rem; }

/* Icon definitions using Unicode */
.icon-user::before { content: "👤"; }
.icon-ai::before { content: "🤖"; }
.icon-human::before { content: "👤"; }
.icon-brain::before { content: "🧠"; }
.icon-community::before { content: "👥"; }
.icon-lightning::before { content: "⚡"; }
.icon-lock::before { content: "🔒"; }
.icon-target::before { content: "🎯"; }
.icon-chart::before { content: "📊"; }
.icon-upload::before { content: "📁"; }
.icon-fire::before { content: "🔥"; }
.icon-clock::before { content: "⏱️"; }
.icon-eye::before { content: "👁️"; }
.icon-sword::before { content: "⚔️"; }
.icon-lightbulb::before { content: "💡"; }
.icon-star::before { content: "⭐"; }
.icon-warning::before { content: "⚠️"; }
.icon-rocket::before { content: "🚀"; }
.icon-pause::before { content: "⏸️"; }
.icon-celebration::before { content: "🎉"; }

/* Alternative: Use simple geometric shapes for a cleaner look */
.icon-clean {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}

.icon-clean-user::before {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: currentColor;
  margin: 0.2em auto;
}

.icon-clean-ai::before {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.6em;
  border: 2px solid currentColor;
  border-radius: 4px;
  margin: 0.1em auto;
}

.icon-clean-target::before {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid currentColor;
  border-radius: 50%;
  margin: 0.1em auto;
  position: relative;
}

.icon-clean-target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.3em;
  height: 0.3em;
  background: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Hover effects */
.icon-hover:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Color variants */
.icon-white { color: white; }
.icon-brand { color: #a855f7; }
.icon-pink { color: #ec4899; }
.icon-blue { color: #3b82f6; }
.icon-green { color: #10b981; }
.icon-red { color: #ef4444; }
.icon-yellow { color: #f59e0b; }
.icon-zinc { color: #71717a; }