/* ============================================================
   视觉套件 · Web 组件
   依赖：tokens.css（自动生成，别手改）

   纪律：这里**一个写死的数值都不该有** —— 全部走 CSS 变量。
        看到 16px / #f37021 / 200ms 这种字面值，就说明漏了。

   字体：本文件不引字体。用网页前自己引 Noto Sans SC / 思源黑体
        （SIL OFL，可商用），下面是兜底栈。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --font-ui: "Noto Sans SC", "Source Han Sans SC", "Inter",
             system-ui, -apple-system, "Segoe UI", sans-serif;
}

body{
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  letter-spacing: var(--t-body-track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- 纸面底纹：让"纸"不平 ---------------- */
.paper-grain{
  position: relative;
}
.paper-grain::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.040'/%3E%3C/svg%3E");
}
.paper-glow::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 460px at 50% -12%,
              rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
}

/* ---------------- 层次 ---------------- */
.L0{ box-shadow: var(--el-0); border: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); }
.L1{ box-shadow: var(--el-1); }
.L2{ box-shadow: var(--el-2); }
.L3{ box-shadow: var(--el-3); }

/* ★ 内高光那一笔 —— 精致和平的分界线。加在任何"浮起来"的东西上。 */
.lift{ position: relative; }
.lift::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              inset 0 0 0 .5px rgba(255,255,255,.30);
  pointer-events: none;
}

/* ---------------- 面 ---------------- */
.panel{
  background: var(--c-apple);
  border-radius: var(--r-card);
  padding: var(--sp-24);
  box-shadow: var(--el-2);
}
.card{
  background: var(--c-apple);
  border-radius: var(--r-card);
  padding: var(--sp-16);
  box-shadow: var(--el-1);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--el-2);
}

/* ---------------- 线 ---------------- */
.rule{ height: var(--ln-hairline); background: rgba(var(--rgb-ink), var(--a-hairline)); border: 0; margin: 0; }
.rule-strong{ height: var(--ln-regular); background: rgba(var(--rgb-ink), var(--a-disabled)); border: 0; margin: 0; }

/* ---------------- 按钮 ---------------- */
.btn{
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-24);
  font-family: inherit;
  font-size: var(--t-note-size);
  font-weight: var(--t-note-weight);
  letter-spacing: var(--t-note-track);
  color: var(--c-ink);
  background: var(--c-apple);
  border: 0;
  border-radius: var(--r-button);
  cursor: pointer;
  box-shadow: var(--el-1);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.btn:hover{ box-shadow: var(--el-2); transform: translateY(-2px); }
.btn:active{ box-shadow: var(--el-0); transform: translateY(0); background: rgba(var(--rgb-ink), .06); }
.btn:disabled,
.btn[disabled]{ box-shadow: var(--el-0); background: rgba(var(--rgb-ink), var(--a-disabled));
                 color: rgba(var(--rgb-ink), var(--a-weak)); cursor: not-allowed; transform: none; }

/* 主按钮：唯一那处橙色大面积 */
.btn--primary{
  background: linear-gradient(168deg, var(--c-orange-light) 0%, var(--c-orange) 46%, var(--c-orange-dark) 100%);
  color: rgba(255,255,255,.94);
}
.btn--primary:active{ background: var(--c-orange-dark); }

/* 幽灵按钮：只有描边 */
.btn--ghost{
  background: transparent;
  box-shadow: inset 0 0 0 var(--ln-regular) rgba(var(--rgb-ink), var(--a-hairline));
}
.btn--ghost:hover{ box-shadow: inset 0 0 0 var(--ln-selected) rgba(var(--rgb-orange), 1); color: var(--c-orange); }

/* ---------------- 键帽 ---------------- */
.kbd{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 var(--sp-8);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-track);
  background: #fbfaf9;
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 .5px rgba(var(--rgb-ink), .16), 0 1px 1px rgba(var(--rgb-ink), .05);
}

/* ---------------- 标签 / 徽章 ---------------- */
.chip{
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-track);
  color: rgba(var(--rgb-ink), var(--a-secondary));
  background: rgba(var(--rgb-ink), .06);
  border-radius: var(--r-chip);
}

/* ---------------- 胶囊 / 进度条 ---------------- */
.pill{
  display: inline-flex; align-items: center; gap: var(--sp-8);
  height: 32px; padding: 0 var(--sp-16);
  border-radius: 999px;
  font-size: var(--t-note-size);
  background: var(--c-apple);
  box-shadow: var(--el-1);
}
.gauge{
  width: 132px; height: 10px;
  border-radius: 999px;
  background: rgba(var(--rgb-ink), var(--a-disabled));
  overflow: hidden;
}
.gauge > i{
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-orange-light), var(--c-orange));
}

/* ---------------- 字 ---------------- */
.t-title  { font-size: var(--t-title-size);   font-weight: var(--t-title-weight);   letter-spacing: var(--t-title-track);   line-height: 1.15; margin: 0; }
.t-subhead{ font-size: var(--t-subhead-size); font-weight: var(--t-subhead-weight); letter-spacing: var(--t-subhead-track); line-height: 1.3;  margin: 0; }
.t-body   { font-size: var(--t-body-size);    font-weight: var(--t-body-weight);    letter-spacing: var(--t-body-track); }
.t-note   { font-size: var(--t-note-size);    font-weight: var(--t-note-weight);    letter-spacing: var(--t-note-track);   color: rgba(var(--rgb-ink), var(--a-secondary)); }
.t-label  { font-size: var(--t-label-size);   font-weight: var(--t-label-weight);   letter-spacing: var(--t-label-track);  color: rgba(var(--rgb-ink), var(--a-weak)); text-transform: none; }

/* 数字必须等宽对齐 —— 数值跳动时不左右抖 */
.num{
  font-size: var(--t-number-size);
  font-weight: var(--t-number-weight);
  letter-spacing: var(--t-number-track);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 不透明度阶梯：同一个墨色分主次 */
.a-primary  { color: rgba(var(--rgb-ink), var(--a-primary)); }
.a-secondary{ color: rgba(var(--rgb-ink), var(--a-secondary)); }
.a-weak     { color: rgba(var(--rgb-ink), var(--a-weak)); }
.a-disabled { color: rgba(var(--rgb-ink), var(--a-disabled)); }

/* ---------------- 间距工具（只有刻度里的值）---------------- */
.sp-4 { gap: var(--sp-4); }  .sp-8 { gap: var(--sp-8); }
.sp-12{ gap: var(--sp-12); } .sp-16{ gap: var(--sp-16); }
.sp-24{ gap: var(--sp-24); } .sp-32{ gap: var(--sp-32); }
.sp-48{ gap: var(--sp-48); } .sp-64{ gap: var(--sp-64); }

/* ---------------- 无障碍：尊重"减少动效" ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: 1ms !important; animation-duration: 1ms !important; }
}