/* ============================================================
 * hd-icon-system.css — 弘度全栈统一图标规范 V9
 * 参考大平台（美团/京东/支付宝）图标式样：
 *   1. 统一形制：圆角方形浅色底座 + Remixicon 线性图标
 *   2. 受控色盘：品牌蓝为主，辅以 sky/green/amber/rose/violet 五个功能色
 *   3. 统一尺寸：sm(1.75rem) / md(clamp自适应) / lg(clamp自适应)，全部不写死
 * 适用范围：全栈所有页面（集市页金刚区除外——保留实拍 PNG 体系）
 * 创建：2026-07-28（首页品牌级重构随行产物）
 * ============================================================ */

:root {
    --hd-ico-blue:   #1A56DB;
    --hd-ico-sky:    #0284C7;
    --hd-ico-green:  #16A34A;
    --hd-ico-amber:  #D97706;
    --hd-ico-rose:   #E11D48;
    --hd-ico-violet: #7C3AED;
}

/* ---------- 底座（md 默认） ---------- */
.hd-ico {
    width: clamp(2.5rem, 11vw, 3rem);
    height: clamp(2.5rem, 11vw, 3rem);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.125rem, 5vw, 1.375rem);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.hd-ico--sm {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}
.hd-ico--lg {
    width: clamp(3rem, 14vw, 3.75rem);
    height: clamp(3rem, 14vw, 3.75rem);
    border-radius: 0.875rem;
    font-size: clamp(1.375rem, 6vw, 1.75rem);
}

/* ---------- 受控色盘（浅底 + 深色图标，对比度 ≥ 4.5:1） ---------- */
.hd-ico--blue   { background: rgba(26, 86, 219, 0.10);  color: var(--hd-ico-blue); }
.hd-ico--sky    { background: rgba(2, 132, 199, 0.10);  color: var(--hd-ico-sky); }
.hd-ico--green  { background: rgba(22, 163, 74, 0.10);  color: var(--hd-ico-green); }
.hd-ico--amber  { background: rgba(217, 119, 6, 0.12);  color: var(--hd-ico-amber); }
.hd-ico--rose   { background: rgba(225, 29, 72, 0.10);  color: var(--hd-ico-rose); }
.hd-ico--violet { background: rgba(124, 58, 237, 0.10); color: var(--hd-ico-violet); }

/* 实底变体（强调位使用，如页头/CTA） */
.hd-ico--solid-blue { background: linear-gradient(135deg, #1A56DB, #42A5F5); color: #fff; }

/* ---------- 交互反馈 ---------- */
.hd-ico-tap:active .hd-ico,
.hd-ico:active { transform: scale(0.92); }

/* ---------- 标准卡片容器（首页/列表页通用） ---------- */
.hd-card {
    margin: 0.75rem 0.75rem 0;
    background: var(--bg-card, #fff);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
}

/* ---------- 标准区块头 ---------- */
.hd-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.hd-sec-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark, #333);
}
.hd-sec-title > i {
    font-size: 1.25rem;
    color: var(--hd-ico-blue);
}
.hd-sec-more {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #999);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}
.hd-sec-more:active { color: var(--hd-ico-blue); }