/* ══════════════════════════════════════════════════════════
   ADHYAYAN — Icon System
   Using Lucide Icons via CDN
   ══════════════════════════════════════════════════════════ */

/* ── Icon Base Styles ────────────────────────────────────────── */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  stroke-width: 2;
}

.icon svg {
  width: 100%;
  height: 100%;
}

/* ── Icon Sizes ──────────────────────────────────────────────── */

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

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

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

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

/* ── Icon Colors ─────────────────────────────────────────────── */

.icon-primary { color: var(--color-accent-blue); }
.icon-success { color: var(--color-accent-green); }
.icon-warning { color: var(--color-accent-orange); }
.icon-danger { color: var(--color-accent-red); }
.icon-muted { color: var(--color-text-muted); }

/* ── Common Activity Icons (emoji fallbacks for simplicity) ──── */

/*
  For the miniapp, we use a hybrid approach:
  - Lucide Icons for UI elements (buttons, navigation)
  - Emoji for activity headers (simpler, works offline)

  Activity Icons (emoji):
  - School Sync: 🎙️
  - Dictation: ✏️
  - Reading: 📖
  - Writing: 📝
  - Free Writing: 🌟
  - Success: 🎉
  - Mood: ✨

  UI Icons (Lucide - loaded via CDN in HTML):
  - Mic, MicOff
  - Play, Pause, Square
  - ChevronRight, ChevronLeft
  - Check, X
  - HelpCircle
  - Volume2, VolumeX
  - Send
*/

/* ── Icon Button Style ───────────────────────────────────────── */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover {
  background: var(--color-bg-tertiary);
}

.icon-btn:active {
  transform: scale(0.95);
}

.icon-btn.active {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
}