/* ============================================
   FocusAgent Icon System
   Font Awesome 6 — CSS-only icon mapping
   Replaces all emoji with semantic icon classes
   ============================================ */

/* === Base Icon Mixin === */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: 'Font Awesome 6 Free';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  vertical-align: -0.125em;
}

/* Brand icons use Brands family */
.icon-android::before,
.icon-apple::before,
.icon-google::before,
.icon-chrome::before,
.icon-firefox::before,
.icon-windows::before,
.icon-linux::before,
.icon-telegram::before,
.icon-weixin::before,
.icon-qq::before,
.icon-weibo::before,
.icon-github::before {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

/* === Direct Emoji Replacement Icons === */
/* Home */
.icon-home::before           { content: '\f015'; font-weight: 900; }

/* Target / Bullseye */
.icon-target::before          { content: '\f140'; font-weight: 900; }

/* Trophy */
.icon-trophy::before          { content: '\f091'; font-weight: 900; }

/* Backpack / Bag */
.icon-backpack::before        { content: '\f5d1'; font-weight: 900; }

/* Chart / Analytics */
.icon-chart::before           { content: '\f201'; font-weight: 900; }

/* Earth / Globe */
.icon-earth::before           { content: '\f57d'; font-weight: 900; }

/* Spa / Meditation */
.icon-spa::before             { content: '\f5c4'; font-weight: 900; }

/* Gear / Settings */
.icon-gear::before            { content: '\f013'; font-weight: 900; }

/* Star */
.icon-star::before            { content: '\f005'; font-weight: 900; }

/* Star outline */
.icon-star-outline::before    { content: '\f006'; font-weight: 400; }

/* Gamepad */
.icon-gamepad::before         { content: '\f11b'; font-weight: 900; }

/* Stopwatch / Timer */
.icon-stopwatch::before       { content: '\f2f2'; font-weight: 900; }

/* Medal */
.icon-medal::before           { content: '\f5a2'; font-weight: 900; }

/* Bell / Notification */
.icon-bell::before            { content: '\f0f3'; font-weight: 900; }

/* Coins / Money */
.icon-coins::before           { content: '\f51e'; font-weight: 900; }

/* Fire / Streak */
.icon-fire::before            { content: '\f06d'; font-weight: 900; }

/* Brain */
.icon-brain::before           { content: '\f5dc'; font-weight: 900; }

/* Rocket */
.icon-rocket::before          { content: '\f135'; font-weight: 900; }

/* Magic / Wand */
.icon-magic::before           { content: '\e2ca'; font-weight: 900; }

/* Trend Up */
.icon-trend-up::before        { content: '\0f'; font-weight: 900; }

/* Palette / Art */
.icon-palette::before         { content: '\f53f'; font-weight: 900; }

/* Book / Study */
.icon-book::before            { content: '\f518'; font-weight: 900; }

/* Family / People Roof */
.icon-family::before          { content: '\e0d6'; font-weight: 900; }

/* Teacher / Chalkboard */
.icon-teacher::before         { content: '\f51c'; font-weight: 900; }

/* Shield / Protection */
.icon-shield::before          { content: '\f3ed'; font-weight: 900; }

/* Warning */
.icon-warning::before         { content: '\f071'; font-weight: 900; }

/* Heart */
.icon-heart::before           { content: '\f004'; font-weight: 900; }

/* Sparkles */
.icon-sparkles::before        { content: '\f896'; font-weight: 900; }

/* Music */
.icon-music::before           { content: '\f001'; font-weight: 900; }

/* Moon */
.icon-moon::before            { content: '\f186'; font-weight: 900; }

/* Sun */
.icon-sun::before             { content: '\f185'; font-weight: 900; }

/* Ticket */
.icon-ticket::before          { content: '\f145'; font-weight: 900; }

/* Mobile */
.icon-mobile::before          { content: '\f3cd'; font-weight: 900; }

/* Lightbulb / Idea */
.icon-lightbulb::before       { content: '\f0eb'; font-weight: 900; }

/* Lock */
.icon-lock::before            { content: '\f023'; font-weight: 900; }

/* Unlock */
.icon-unlock::before          { content: '\f09c'; font-weight: 900; }

/* Edit / Pen */
.icon-edit::before            { content: '\f044'; font-weight: 900; }

/* User */
.icon-user::before            { content: '\f007'; font-weight: 900; }

/* Graduation Cap */
.icon-graduation::before      { content: '\f19d'; font-weight: 900; }

/* Check / Complete */
.icon-check::before           { content: '\f00c'; font-weight: 900; }

/* Circle Check */
.icon-circle-check::before    { content: '\f058'; font-weight: 900; }

/* Circle Xmark */
.icon-circle-xmark::before    { content: '\f057'; font-weight: 900; }

/* Clock */
.icon-clock::before           { content: '\f017'; font-weight: 400; }

/* Calendar */
.icon-calendar::before        { content: '\f133'; font-weight: 400; }

/* Arrow Right */
.icon-arrow-right::before     { content: '\f061'; font-weight: 900; }

/* Arrow Left */
.icon-arrow-left::before      { content: '\f060'; font-weight: 900; }

/* Chevron Right */
.icon-chevron-right::before   { content: '\f054'; font-weight: 900; }

/* Chevron Down */
.icon-chevron-down::before    { content: '\f078'; font-weight: 900; }

/* Plus */
.icon-plus::before            { content: '\f067'; font-weight: 900; }

/* Minus */
.icon-minus::before           { content: '\f068'; font-weight: 900; }

/* Close / X */
.icon-close::before           { content: '\f00d'; font-weight: 900; }

/* Search */
.icon-search::before          { content: '\f002'; font-weight: 900; }

/* Filter */
.icon-filter::before          { content: '\f0b0'; font-weight: 900; }

/* Download */
.icon-download::before        { content: '\f019'; font-weight: 900; }

/* Upload */
.icon-upload::before          { content: '\f093'; font-weight: 900; }

/* Share */
.icon-share::before           { content: '\f1e0'; font-weight: 900; }

/* Copy */
.icon-copy::before            { content: '\f0c5'; font-weight: 400; }

/* Eye / View */
.icon-eye::before             { content: '\f06e'; font-weight: 400; }

/* Eye Slash / Hidden */
.icon-eye-slash::before       { content: '\f070'; font-weight: 400; }

/* Volume / Sound */
.icon-volume::before          { content: '\f028'; font-weight: 900; }

/* Volume Mute */
.icon-volume-mute::before     { content: '\f6a9'; font-weight: 900; }

/* Play */
.icon-play::before            { content: '\f04b'; font-weight: 900; }

/* Pause */
.icon-pause::before           { content: '\f04c'; font-weight: 900; }

/* Forward / Skip */
.icon-forward::before         { content: '\f04e'; font-weight: 900; }

/* Refresh / Retry */
.icon-refresh::before         { content: '\f021'; font-weight: 900; }

/* Info Circle */
.icon-info::before            { content: '\f05a'; font-weight: 900; }

/* Question Circle */
.icon-question::before        { content: '\f059'; font-weight: 400; }

/* Exclamation Triangle */
.icon-exclamation::before     { content: '\f071'; font-weight: 900; }

/* Crown */
.icon-crown::before           { content: '\f521'; font-weight: 900; }

/* Gem / Diamond */
.icon-gem::before             { content: '\f3a5'; font-weight: 400; }

/* Puzzle Piece */
.icon-puzzle::before          { content: '\f12e'; font-weight: 900; }

/* Headphones */
.icon-headphones::before      { content: '\f025'; font-weight: 900; }

/* Microphone */
.icon-microphone::before      { content: '\f130'; font-weight: 900; }

/* Camera */
.icon-camera::before          { content: '\f030'; font-weight: 900; }

/* Image */
.icon-image::before           { content: '\f03e'; font-weight: 400; }

/* Video */
.icon-video::before           { content: '\f03d'; font-weight: 900; }

/* Wifi */
.icon-wifi::before            { content: '\f1eb'; font-weight: 900; }

/* Battery */
.icon-battery::before         { content: '\f240'; font-weight: 900; }

/* Battery Half */
.icon-battery-half::before    { content: '\f242'; font-weight: 900; }

/* Battery Empty */
.icon-battery-empty::before   { content: '\f244'; font-weight: 900; }

/* Bolt / Lightning */
.icon-bolt::before            { content: '\f0e7'; font-weight: 900; }

/* Wand Magic Sparkles */
.icon-wand::before            { content: '\f72b'; font-weight: 900; }

/* Dice */
.icon-dice::before            { content: '\f522'; font-weight: 900; }

/* Puzzle */
.icon-puzzle-piece::before    { content: '\f12e'; font-weight: 900; }

/* Circle Play */
.icon-circle-play::before     { content: '\f144'; font-weight: 900; }

/* Flag */
.icon-flag::before            { content: '\f024'; font-weight: 900; }

/* Flag Checkered */
.icon-flag-checkered::before  { content: '\f11e'; font-weight: 900; }

/* Ranking Star */
.icon-ranking::before         { content: '\e0a4'; font-weight: 900; }

/* Circle Info */
.icon-circle-info::before     { content: '\f05a'; font-weight: 900; }

/* === Semantic Navigation Icons === */
.icon-nav-home::before        { content: '\f015'; font-weight: 900; }
.icon-nav-training::before    { content: '\f140'; font-weight: 900; }
.icon-nav-achievement::before { content: '\f091'; font-weight: 900; }
.icon-nav-backpack::before    { content: '\f5d1'; font-weight: 900; }
.icon-nav-stats::before       { content: '\f201'; font-weight: 900; }
.icon-nav-explore::before     { content: '\f57d'; font-weight: 900; }
.icon-nav-meditate::before    { content: '\f5c4'; font-weight: 900; }
.icon-nav-settings::before    { content: '\f013'; font-weight: 900; }
.icon-nav-profile::before     { content: '\f007'; font-weight: 900; }
.icon-nav-challenge::before   { content: '\f11b'; font-weight: 900; }
.icon-nav-learn::before       { content: '\f518'; font-weight: 900; }

/* === Semantic Stat Icons === */
.icon-stat-stars::before      { content: '\f005'; font-weight: 900; }
.icon-stat-coins::before      { content: '\f51e'; font-weight: 900; }
.icon-stat-fire::before       { content: '\f06d'; font-weight: 900; }
.icon-stat-energy::before     { content: '\f0e7'; font-weight: 900; }
.icon-stat-time::before       { content: '\f2f2'; font-weight: 900; }
.icon-stat-level::before      { content: '\f521'; font-weight: 900; }
.icon-stat-score::before      { content: '\f091'; font-weight: 900; }
.icon-stat-streak::before     { content: '\f06d'; font-weight: 900; }
.icon-stat-focus::before      { content: '\f5dc'; font-weight: 900; }
.icon-stat-progress::before   { content: '\f0e7'; font-weight: 900; }

/* === Semantic Action Icons === */
.icon-action-play::before     { content: '\f04b'; font-weight: 900; }
.icon-action-start::before    { content: '\f144'; font-weight: 900; }
.icon-action-pause::before    { content: '\f04c'; font-weight: 900; }
.icon-action-stop::before     { content: '\f04d'; font-weight: 900; }
.icon-action-retry::before    { content: '\f021'; font-weight: 900; }
.icon-action-next::before     { content: '\f04e'; font-weight: 900; }
.icon-action-prev::before     { content: '\f04a'; font-weight: 900; }
.icon-action-skip::before     { content: '\f04e'; font-weight: 900; }
.icon-action-submit::before   { content: '\f00c'; font-weight: 900; }
.icon-action-settings::before { content: '\f013'; font-weight: 900; }
.icon-action-share::before    { content: '\f1e0'; font-weight: 900; }
.icon-action-close::before    { content: '\f00d'; font-weight: 900; }
.icon-action-back::before     { content: '\f060'; font-weight: 900; }
.icon-action-edit::before     { content: '\f044'; font-weight: 900; }
.icon-action-delete::before   { content: '\f2ed'; font-weight: 900; }
.icon-action-add::before      { content: '\f067'; font-weight: 900; }
.icon-action-download::before { content: '\f019'; font-weight: 900; }

/* === Semantic Status Icons === */
.icon-status-success::before  { content: '\f058'; font-weight: 900; }
.icon-status-warning::before  { content: '\f071'; font-weight: 900; }
.icon-status-error::before    { content: '\f057'; font-weight: 900; }
.icon-status-info::before     { content: '\f05a'; font-weight: 900; }
.icon-status-loading::before  { content: '\f110'; font-weight: 900; }
.icon-status-locked::before   { content: '\f023'; font-weight: 900; }
.icon-status-unlocked::before { content: '\f09c'; font-weight: 900; }
.icon-status-complete::before { content: '\f058'; font-weight: 900; }
.icon-status-pending::before  { content: '\f017'; font-weight: 400; }
.icon-status-new::before      { content: '\f024'; font-weight: 900; }

/* === Semantic Role Icons === */
.icon-role-student::before    { content: '\f19d'; font-weight: 900; }
.icon-role-parent::before     { content: '\e0d6'; font-weight: 900; }
.icon-role-teacher::before    { content: '\f51c'; font-weight: 900; }

/* === Semantic Training Icons === */
.icon-training-focus::before     { content: '\f5dc'; font-weight: 900; }
.icon-training-memory::before    { content: '\f5dc'; font-weight: 900; }
.icon-training-attention::before { content: '\f140'; font-weight: 900; }
.icon-training-calm::before      { content: '\f5c4'; font-weight: 900; }
.icon-training-logic::before     { content: '\f12e'; font-weight: 900; }
.icon-training-creative::before  { content: '\f53f'; font-weight: 900; }
.icon-training-speed::before     { content: '\f0e7'; font-weight: 900; }
.icon-training-endurance::before { content: '\f2f2'; font-weight: 900; }

/* === Icon Size Utilities === */
.icon-xs  { font-size: var(--icon-xs); }
.icon-sm  { font-size: var(--icon-sm); }
.icon-md  { font-size: var(--icon-md); }
.icon-lg  { font-size: var(--icon-lg); }
.icon-xl  { font-size: var(--icon-xl); }
.icon-2xl { font-size: var(--icon-2xl); }

/* === Icon Color Utilities === */
.icon-cyan    { color: var(--cyan-400); }
.icon-amber   { color: var(--amber-400); }
.icon-emerald { color: var(--emerald-400); }
.icon-rose    { color: var(--teacher-400); }
.icon-muted   { color: var(--text-muted); }
.icon-primary { color: var(--text-primary); }

/* === Icon with Background Circle === */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: var(--radius-full);
  font-size: var(--icon-md);
}

.icon-circle-sm {
  width: 1.5em;
  height: 1.5em;
  font-size: var(--icon-sm);
}

.icon-circle-lg {
  width: 2.5em;
  height: 2.5em;
  font-size: var(--icon-lg);
}

.icon-circle-cyan {
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan-400);
}

.icon-circle-amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber-400);
}

.icon-circle-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald-400);
}

.icon-circle-rose {
  background: rgba(244, 63, 94, 0.12);
  color: var(--teacher-400);
}

/* === Spinning Icon (for loading states) === */
.icon-spin::before {
  animation: fa-spin 1s linear infinite;
}

@keyframes fa-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Pulse Icon (for notification/alert) === */
.icon-pulse::before {
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.1); }
}

/* === Bounce Icon (for attention) === */
.icon-bounce::before {
  animation: icon-bounce 1.5s ease-in-out infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}