/* ============================================================
 * 薯灵感 · 图标系统（Phosphor Icons · 组件化）
 * 规范：24 网格 / viewBox 256 / currentColor 继承 / 尺寸走变量
 *      状态：默认 · 悬停(弹跳+微旋) · 按压(回弹) · 加载(旋转) · 选中(红底圈)
 *      动效只使用 transform 与 opacity，尊重 prefers-reduced-motion
 * ============================================================ */

:root {
  /* 图标尺寸（禁止硬编码 px，一律走变量） */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 48px;
  --icon-stroke: 2px;
}

/* 宿主元素：<i data-icon="hot-topics" class="icon"></i> */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: inherit;                 /* 颜色继承父级，不硬编码 */
  line-height: 0;
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              color 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform;
}

/* 注入的 SVG 本体 */
.spark-icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;             /* 关键：颜色完全继承，可被 CSS 变量控制 */
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* 内联图标：随字号缩放，用于「🔥 爆款选题」这类图标+文字混排 */
.icon-inline {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.17em;
  margin-right: 0.12em;
}
/* 图标后面紧跟文字时不需要外边距（如「⚠️ 冲突：xxx」由空格承担间距） */
.icon-inline + * { margin-left: 0; }

/* ---------- 尺寸 ---------- */
.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.icon-2xl { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }

/* ---------- 颜色变体（全部可被主题覆盖） ---------- */
.icon-primary  { color: var(--xhs-red-text, #D81B37); }
.icon-secondary { color: var(--text-primary, #333333); }
.icon-muted    { color: var(--text-tertiary, #6E6869); }
.icon-success  { color: var(--success-text, #137A52); }
.icon-warning  { color: var(--warning-text, #8A5A00); }
.icon-danger   { color: var(--danger, #D81B37); }
.icon-info     { color: var(--info-text, #2A5FD9); }

/* ---------- 状态 1：悬停（轻快弹跳 + 微旋 + 变红） ---------- */
.icon.is-interactive:hover,
button:hover > .icon,
a:hover > .icon,
.icon-hover:hover {
  transform: scale(1.15) rotate(-3deg);
  color: var(--xhs-red-text, #D81B37);
}
.icon.is-interactive:hover .spark-icon,
button:hover > .icon .spark-icon,
a:hover > .icon .spark-icon {
  transform: scale(1.02);
}

/* ---------- 状态 2：按压（回弹） ---------- */
.icon.is-interactive:active,
button:active > .icon,
a:active > .icon {
  transform: scale(0.92);
}

/* ---------- 状态 3：加载（旋转） ---------- */
.icon.loading .spark-icon {
  animation: icon-spin 0.8s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* ---------- 状态 4：选中（红图标 + 浅红圆底） ---------- */
.icon.active {
  color: var(--xhs-red-text, #D81B37);
  background: var(--xhs-red-light, #FFF5F6);
  border-radius: 50%;
  padding: var(--s-6);
  box-sizing: content-box;
}
.icon.active .spark-icon { transform: scale(1.02); }

/* 选中态的"心跳"（收藏等场景，只播一次） */
.icon.heartbeat .spark-icon { animation: icon-beat 0.45s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
@keyframes icon-beat {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ---------- 图标按钮（圆形浅灰底，悬停转浅红，图标旋转） ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--bg-subtle, #F5F5F5);
  color: var(--text-secondary, #666666);
  cursor: pointer;
  transition: background 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              color 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.icon-btn:hover {
  background: var(--xhs-red-light, #FFF5F6);
  color: var(--xhs-red-text, #D81B37);
  transform: translateY(-2px);
}
.icon-btn:hover .icon { transform: scale(1.15) rotate(-3deg); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- 无障碍：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .icon, .spark-icon, .icon-btn { transition: none !important; animation: none !important; }
  .icon.is-interactive:hover, button:hover > .icon, a:hover > .icon { transform: none; }
}