/* WaMover 网站样式层
 *
 * 先加载 tokens.css（Knit 设计令牌，唯一数值来源），再加载本文件。
 * 本文件不新增颜色数值，只把令牌组织成网站常用的版式与组件；类名前缀 wm-。
 * 与桌面 App（app/ui/desktop.css）保持一致的两处修正也在这里：
 *   1. 字体栈加入 Microsoft YaHei UI，Windows 中文不落到宋体；
 *   2. 浅色下 faint 加深到 #5f6d7c（原值 3.93:1 不够正文对比度）；中文标题不收字距。
 * 深色模式：tokens.css 以 [data-theme="dark"] 切换，跟随系统需要 head-snippet.html 里的三行脚本。
 */

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  --wm-container: 1120px;
  --wm-gutter: 24px;
  --wm-section-y: clamp(56px, 8vw, 104px);
}
[data-theme="light"],
:root:not([data-theme]) {
  --faint: #5f6d7c;
}
@media (max-width: 370px) {
  :root { --wm-gutter: 18px; }
}

/* ---------- 基础 ---------- */
.wm-root {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wm-root *,
.wm-root *::before,
.wm-root *::after { box-sizing: border-box; }
.wm-root :is(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; }
.wm-root img { max-width: 100%; height: auto; display: block; }
.wm-root :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
.wm-root a { color: var(--blue); text-underline-offset: 3px; }
.wm-root a:hover { color: var(--blue-hover); }
.wm-num { font-variant-numeric: tabular-nums; }

/* ---------- 布局 ---------- */
.wm-container {
  width: 100%;
  max-width: calc(var(--wm-container) + 2 * var(--wm-gutter));
  margin-inline: auto;
  padding-inline: var(--wm-gutter);
}
.wm-section { padding-block: var(--wm-section-y); }
.wm-section.canvas { background: var(--canvas); }
.wm-section.hero-surface { background: var(--hero-surface); }
.wm-stack { display: grid; gap: var(--space-20); }
.wm-grid { display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.wm-split { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .wm-split { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- 字阶（取自 tokens.json 的 hero / web-h1 / web-h2 / web-body） ---------- */
.wm-hero { font-size: clamp(2rem, 4.3vw, 3.4rem); text-wrap: balance; line-height: 1.17; font-weight: 650; letter-spacing: -0.05em; }
.wm-h1 { font-size: 2rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.045em; }
.wm-h2 { font-size: 1.35rem; line-height: 1.4; font-weight: 620; letter-spacing: -0.025em; }
.wm-h3 { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; }
.wm-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.wm-body { font-size: 1rem; line-height: 1.7; }
.wm-small { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.wm-muted { color: var(--muted); }
.wm-eyebrow { font-size: 0.72rem; line-height: 1.6; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
/* 中文不套拉丁字距（与桌面 App 相同） */
:lang(zh) :is(.wm-hero, .wm-h1, .wm-h2, .wm-h3, .wm-eyebrow) { letter-spacing: 0; }

/* ---------- 按钮（与 Knit kn-btn 同尺寸） ---------- */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 12px 22px;
  border: 0; border-radius: var(--radius-10);
  background: var(--blue); color: var(--on-blue);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s, color .16s, box-shadow .16s, filter .16s;
}
.wm-root a.wm-btn { color: var(--on-blue); }
.wm-btn:hover { background: var(--blue-hover); }
.wm-root a.wm-btn:hover { color: var(--on-blue); }
.wm-btn:active { filter: brightness(var(--brightness-pressed)); box-shadow: inset 0 0 0 100vmax var(--pressed-overlay); }
.wm-btn.secondary,
.wm-root a.wm-btn.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.wm-btn.ghost,
.wm-root a.wm-btn.ghost { background: var(--blue-soft); color: var(--blue); }
.wm-btn .wm-btn-icon { width: 20px; height: 20px; flex: none; }
.wm-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* ---------- 卡片：分层靠底色和 1px line，不加阴影 ---------- */
.wm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-14);
  padding: 26px 28px;
}
.wm-section.canvas .wm-card { border-color: transparent; }
.wm-card-icon {
  display: grid; place-items: center;
  width: 55px; height: 55px; border-radius: var(--radius-16);
  background: var(--blue-soft); color: var(--blue);
}
.wm-card-icon svg { width: 27px; height: 27px; }

/* ---------- 线性图标（style/icons，24 视窗、1.7 描边） ---------- */
.wm-icon { width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 徽章、步骤号 ---------- */
.wm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-6); background: var(--blue-soft); color: var(--blue); font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.wm-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--step-chip); color: var(--step-chip-ink); font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- 顶栏与页脚 ---------- */
.wm-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.wm-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.wm-brand { display: inline-flex; align-items: center; }
.wm-brand img { width: var(--header-lockup); height: auto; }
.wm-nav { display: flex; gap: 22px; font-size: .9375rem; }
.wm-root .wm-nav a { color: var(--muted); text-decoration: none; }
.wm-root .wm-nav a:hover, .wm-root .wm-nav a[aria-current="page"] { color: var(--blue); }
@media (max-width: 720px) { .wm-nav { display: none; } }
.wm-footer { padding-block: 40px; border-top: 1px solid var(--line); background: var(--canvas); color: var(--muted); font-size: .8125rem; }

/* ---------- 品牌图形舞台：blue-soft 圆盘 55% + 细针织 mark，入场只播一次 ---------- */
.wm-logo-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 420px); margin-inline: auto; }
.wm-logo-stage::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blue-soft); opacity: var(--opacity-logo-disc); }
.wm-logo-stage img { position: relative; width: 69%; animation: wm-settle 1.3s cubic-bezier(.18, .7, .2, 1) both; }
@keyframes wm-settle {
  0% { opacity: 0; transform: translateY(13px) scale(.96); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 浅深两套图片的切换（组合标等） ---------- */
:root:not([data-theme="dark"]) .wm-only-dark,
[data-theme="dark"] .wm-only-light { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wm-root *, .wm-root *::before, .wm-root *::after { animation: none !important; transition: none !important; }
}