/**
 * 知心 · 统一图标系统样式 V1.0
 * ====================================
 * 部署路径: /var/www/html/assets/css/icon-system.css
 * 依赖: 无 (自带 currentColor 主题, 可单独引入)
 * 配套: /assets/js/icon-system.js (注入 sprite + 自动渲染 [data-icon])
 *
 * 命名规范
 *   容器类:  .zxn-icon                       (必选, 渲染为 <svg>)
 *   尺寸修饰: .zxn-icon--sm | --md | --lg | --xl
 *   颜色修饰: .zxn-icon--primary | --secondary | --inverse
 *             --success | --danger | --info | --warning
 *   图标名:   #icon-<kebab-name>             (见 icon-sprite.svg)
 *
 * 调用方式 (二选一)
 *   A) 静态:   <svg class="zxn-icon zxn-icon--md"><use href="#icon-home"></use></svg>
 *   B) 自动:   <span class="zxn-icon" data-icon="home"></span>  (JS 渲染为 A)
 */

/* ═══════ 基础图标 ═══════ */
.zxn-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: inherit;          /* 颜色由父元素决定 (currentColor) */
    fill: none;              /* 线性图标: 无填充 */
    stroke: currentColor;    /* 描边跟随 color */
    stroke-width: 2;         /* 统一 2px 描边 (同底部导航) */
    stroke-linecap: round;   /* 圆角端点: 友好、亲和 */
    stroke-linejoin: round;  /* 圆角拐角 */
    vertical-align: middle;
    /* 避免微信 X5 内核对 SVG 渲染抖动 */
    overflow: visible;
}

/* ═══════ 尺寸修饰 ═══════ */
.zxn-icon--sm { width: 16px; height: 16px; stroke-width: 2.2; }
.zxn-icon--md { width: 24px; height: 24px; stroke-width: 2; }
.zxn-icon--lg { width: 32px; height: 32px; stroke-width: 1.8; }
.zxn-icon--xl { width: 40px; height: 40px; stroke-width: 1.6; }

/* 尺寸变量写法 (覆盖默认 24px, 与 token 体系对齐) */
.zxn-icon[data-size="20"] { width: 20px; height: 20px; }
.zxn-icon[data-size="28"] { width: 28px; height: 28px; }
.zxn-icon[data-size="36"] { width: 36px; height: 36px; }
.zxn-icon[data-size="48"] { width: 48px; height: 48px; }

/* ═══════ 颜色修饰 (固定色, 不随父级) ═══════ */
/* 未加颜色类时, 图标继承父级 color, 自动适配 active / 深色模式 */
.zxn-icon--primary   { color: var(--color-primary); }
.zxn-icon--primary-dark { color: var(--color-primary-dark); }
.zxn-icon--secondary { color: var(--color-text-secondary); }
.zxn-icon--inverse   { color: var(--color-text-inverse); }
.zxn-icon--success   { color: var(--color-success); }
.zxn-icon--danger    { color: var(--color-danger); }
.zxn-icon--info      { color: var(--color-info); }
.zxn-icon--warning   { color: var(--color-warning); }
.zxn-icon--gold      { color: #F5A623; }   /* 会员金 (与导航角标一致) */

/* ═══════ 交互动效 ═══════ */
.zxn-icon--spin { animation: zxn-icon-spin 1s linear infinite; }
@keyframes zxn-icon-spin { to { transform: rotate(360deg); } }

/* ═══════ 深色模式 ═══════ */
/* currentColor 模式无需额外处理; 固定色已在 token 内适配 */
html[data-theme="dark"] {
    .zxn-icon--gold { color: #F5A623; }
}

/* ═══════ 底部导航栏适配（统一 SVG 图标居中） ═══════ */
/* 与 .zxn-icon 配套使用：确保图标在 flex 纵向导航中水平居中 */
.bottom-nav-item svg,
.bottom-nav .zxn-icon {
    display: block;
    margin: 0 auto;
}