/* ========================================
   运维杂谈 · 图标设计系统
   ======================================== */

:root{
  --ic-size:20px;
  --ic-size-sm:16px;
  --ic-size-md:22px;
  --ic-size-lg:26px;
  --ic-stroke:1.7;
  --ic-radius:10px;
  --ic-radius-sm:8px;

  --ic-blue:#2563eb;
  --ic-blue-bg:#eff6ff;
  --ic-slate:#475569;
  --ic-slate-bg:#f1f5f9;
  --ic-douyin:#fe2c55;
  --ic-douyin-bg:#fff0f3;
  --ic-wechat:#07c160;
  --ic-wechat-bg:#eefaf3;
  --ic-bili:#00a1d6;
  --ic-bili-bg:#eef8fc;
}

/* ---------- 基础图标 ---------- */
.icon{
  width:var(--ic-size);
  height:var(--ic-size);
  flex:0 0 auto;
  display:inline-block;
  vertical-align:-.15em;
  fill:none;
  stroke:currentColor;
  stroke-width:var(--ic-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.icon-sm{width:var(--ic-size-sm);height:var(--ic-size-sm);stroke-width:1.8}
.icon-md{width:var(--ic-size-md);height:var(--ic-size-md)}
.icon-lg{width:var(--ic-size-lg);height:var(--ic-size-lg);stroke-width:1.55}

/* 实心图标（品牌类） */
.icon-fill{
  fill:currentColor;
  stroke:none;
}
.icon-fill *{fill:inherit;stroke:none}

/* ---------- 图标容器 ---------- */
.ic{
  width:44px;
  height:44px;
  border-radius:var(--ic-radius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--ic-blue);
  background:var(--ic-blue-bg);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.ic .icon{
  width:var(--ic-size-md);
  height:var(--ic-size-md);
}

.ic-sm{
  width:30px;
  height:30px;
  border-radius:var(--ic-radius-sm);
}
.ic-sm .icon{
  width:15px;
  height:15px;
  stroke-width:1.8;
}

.ic-lg{
  width:52px;
  height:52px;
  border-radius:12px;
}
.ic-lg .icon{
  width:26px;
  height:26px;
}

/* 软色 / 实心 / 描边 */
.ic-soft{background:var(--ic-blue-bg);color:var(--ic-blue)}
.ic-solid{background:var(--ic-blue);color:#fff}
.ic-solid .icon{stroke:#fff}
.ic-solid .icon-fill{fill:#fff;stroke:none}
.ic-outline{
  background:#fff;
  color:var(--ic-blue);
  border:1px solid #dbeafe;
}

/* 色板 */
.ic-slate{background:var(--ic-slate-bg);color:var(--ic-slate)}
.ic-douyin{background:var(--ic-douyin-bg);color:var(--ic-douyin)}
.ic-wechat{background:var(--ic-wechat-bg);color:var(--ic-wechat)}
.ic-bili{background:var(--ic-bili-bg);color:var(--ic-bili)}

.ic-solid-douyin{background:var(--ic-douyin);color:#fff}
.ic-solid-wechat{background:var(--ic-wechat);color:#fff}
.ic-solid-bili{background:var(--ic-bili);color:#fff}
.ic-solid-douyin .icon,
.ic-solid-wechat .icon,
.ic-solid-bili .icon{stroke:#fff}
.ic-solid-douyin .icon-fill,
.ic-solid-wechat .icon-fill,
.ic-solid-bili .icon-fill{fill:#fff;stroke:none}

.ic-on-dark{
  background:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(4px);
}
.ic-on-dark .icon{stroke:#fff}

/* 悬停微动 */
.ic-hover:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}
.ic-solid-douyin.ic-hover:hover{box-shadow:0 6px 16px rgba(254,44,85,.25)}
.ic-solid-wechat.ic-hover:hover{box-shadow:0 6px 16px rgba(7,193,96,.25)}
.ic-solid-bili.ic-hover:hover{box-shadow:0 6px 16px rgba(0,161,214,.25)}

/* ---------- 场景映射（兼容旧类名） ---------- */
.skill-icon,
.product-icon,
.stat-icon{
  width:44px;
  height:44px;
  border-radius:var(--ic-radius);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ic-blue-bg);
  color:var(--ic-blue);
  flex:0 0 auto;
}
.skill-icon .icon,
.product-icon .icon{width:24px;height:24px}
.stat-icon{
  width:36px;
  height:36px;
  border-radius:var(--ic-radius-sm);
  margin:0 auto 10px;
}
.stat-icon .icon{width:18px;height:18px}

.platform-mark,
.contact-mark{
  width:50px;
  height:50px;
  border-radius:12px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.contact-mark{
  width:44px;
  height:44px;
  border-radius:10px;
  margin-bottom:10px;
}
.platform-mark .icon,
.contact-mark .icon{
  width:24px;
  height:24px;
}
.platform-mark .icon-fill,
.contact-mark .icon-fill{fill:#fff;stroke:none}
.platform-mark .icon:not(.icon-fill),
.contact-mark .icon:not(.icon-fill){stroke:#fff}

.pi-douyin,.ci-douyin{background:var(--ic-douyin)}
.pi-wechat,.ci-wechat{background:var(--ic-wechat)}
.pi-bili,.ci-bili{background:var(--ic-bili)}

/* 按钮内图标间距 */
.btn .icon{margin-right:2px}
.btn-sm .icon{margin-right:0}