/* ============================================================
   Claude School — Icon System
   SVG sprite usage: <svg class="icon icon-md"><use href="assets/icons.svg#icon-NAME"/></svg>
   ============================================================ */

/* ── Base icon element ── */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

/* ── Size variants ── */
.icon-xs  { width: 14px; height: 14px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 40px; height: 40px; }
.icon-3xl { width: 48px; height: 48px; }

/* ── Color variants ── */
.icon-gold   { color: var(--gold); }
.icon-teal   { color: var(--accent); }
.icon-pink   { color: var(--pink); }
.icon-green  { color: var(--green); }
.icon-blue   { color: var(--blue); }
.icon-muted  { color: var(--text-3); }
.icon-subtle { color: var(--text-2); }

/* ── Spin animation (for loading) ── */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Icon Tile (colored background pill) ── */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 10px;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.icon-tile-sm  { padding: 7px;  border-radius: var(--radius-sm); }
.icon-tile-lg  { padding: 14px; border-radius: var(--radius-lg); }
.icon-tile-xl  { padding: 18px; border-radius: var(--radius-xl); }

/* Tile color variants — used in feature cards, lesson headers */
.tile-gold {
  background: rgba(232, 160, 32, 0.12);
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.tile-gold:hover {
  background: rgba(232, 160, 32, 0.20);
  box-shadow: 0 0 16px rgba(232,160,32,0.25);
}

.tile-teal {
  background: rgba(0, 196, 179, 0.10);
  color: var(--accent);
}
.tile-teal:hover {
  background: rgba(0, 196, 179, 0.18);
  box-shadow: 0 0 16px rgba(0,196,179,0.22);
}

.tile-pink {
  background: rgba(236, 72, 153, 0.10);
  color: var(--pink);
}
.tile-pink:hover {
  background: rgba(236, 72, 153, 0.18);
  box-shadow: 0 0 16px rgba(236,72,153,0.22);
}

.tile-purple {
  background: rgba(139, 92, 246, 0.10);
  color: #A78BFA;
}
.tile-purple:hover {
  background: rgba(139, 92, 246, 0.18);
  box-shadow: 0 0 16px rgba(139,92,246,0.22);
}

.tile-green {
  background: rgba(16, 185, 129, 0.10);
  color: var(--green);
}
.tile-green:hover {
  background: rgba(16, 185, 129, 0.18);
  box-shadow: 0 0 16px rgba(16,185,129,0.22);
}

.tile-blue {
  background: rgba(59, 130, 246, 0.10);
  color: var(--blue);
}
.tile-blue:hover {
  background: rgba(59, 130, 246, 0.18);
  box-shadow: 0 0 16px rgba(59,130,246,0.22);
}

.tile-orange {
  background: rgba(251, 146, 60, 0.10);
  color: #FB923C;
}
.tile-orange:hover {
  background: rgba(251, 146, 60, 0.18);
  box-shadow: 0 0 16px rgba(251,146,60,0.22);
}

.tile-red {
  background: rgba(239, 68, 68, 0.10);
  color: var(--red);
}
.tile-red:hover {
  background: rgba(239, 68, 68, 0.18);
  box-shadow: 0 0 16px rgba(239,68,68,0.22);
}

/* ── Icon + label row ── */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* ── Icon button ── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition-fast);
}
.icon-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-1);
}
.icon-btn:active {
  transform: scale(0.92);
}

/* ── Category icon tiles (matches skills.css category colors) ── */
.tile-cat-beginner     { background: rgba(34,211,238,0.10);  color: #22D3EE; }
.tile-cat-visual       { background: rgba(167,139,250,0.10); color: #A78BFA; }
.tile-cat-animations   { background: rgba(244,114,182,0.10); color: #F472B6; }
.tile-cat-navigation   { background: rgba(52,211,153,0.10);  color: #34D399; }
.tile-cat-frontend     { background: rgba(96,165,250,0.10);  color: #60A5FA; }
.tile-cat-backend      { background: rgba(251,146,60,0.10);  color: #FB923C; }
.tile-cat-devops       { background: rgba(248,113,113,0.10); color: #F87171; }
.tile-cat-game         { background: rgba(251,191,36,0.10);  color: #FBBF24; }
.tile-cat-ux           { background: rgba(129,140,248,0.10); color: #818CF8; }