/* AI Kids Cafe — Unified Icon System
 *
 * Use via:
 *   <svg class="aikc-icon"><use href="#icon-search"/></svg>
 * or
 *   AIKC_ICON.render('search', { size: 16 })
 *
 * Icons inherit color from the surrounding text (stroke="currentColor").
 */

.aikc-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 1.125em;   /* ~18px at 16px base; overridden by inline width/height attrs */
  height: 1.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Size modifiers — override the em-based defaults with fixed pixel sizes. */
.aikc-icon--sm { width: 14px; height: 14px; }
.aikc-icon--md { width: 18px; height: 18px; }
.aikc-icon--lg { width: 24px; height: 24px; }
.aikc-icon--xl { width: 32px; height: 32px; }

/* Use child elements should never swallow clicks. */
.aikc-icon use { pointer-events: none; }

/* Common rotation helper (e.g. for chevrons). */
.aikc-icon.rotated { transform: rotate(180deg); }
.aikc-icon.spin    { animation: aikc-icon-spin 1s linear infinite; }

@keyframes aikc-icon-spin {
  to { transform: rotate(360deg); }
}

/* Reduce motion preference. */
@media (prefers-reduced-motion: reduce) {
  .aikc-icon { transition: none; }
  .aikc-icon.spin { animation: none; }
}