/* ============================================================
   tokens.css · 全局设计令牌
   改这一个文件即可整体换肤；页面文件里不要写死颜色 / 间距 / 字号。
   ============================================================ */
:root {
  /* 色彩：中性白 / 近黑 / 中灰 三层体系
     --c-paper 是全站唯一的页面背景色，当前指定为 #f8f8f8
     （比参考站暖白 #f2f2f0 更亮、更中性，为项目最终决定，不再比对齐参考站）。
     其余中性灰只用于占位几何 / 遮罩 / 深色面板，不得铺作页面背景。 */
  --c-paper:        #f8f8f8;
  --c-paper-2:      #f8f8f8;   /* 与页面背景统一，避免第二层背景色 */
  /* 详情页专项返工新增的两级中性表面（用户确认允许）：
     仅用于项目详情页的首屏舞台与 Next 交棒带，用以分开「一个圆 / 证据墙 / 一个圆」三段节奏。
     不参与首页、WORK 与公共组件，也不引入任何彩色。 */
  --c-stage:        #efefec;   /* 首屏舞台，对应参考站 #E8E8E3 的偏亮派生 */
  --c-next:         #f3f3f1;   /* Next Project 浅带，对应参考站 #F2F2F0 */
  --c-gray:         #e8e8e3;   /* 仅占位几何层可用，不再用于页面背景 */
  --c-placeholder:  #dededa;   /* 作品占位框底色（中性灰，非作品） */
  --c-placeholder-2:#d1d1cb;
  --c-mid:          #a2a2a2;   /* 次级文字 / 标签 */
  --c-ink:          #161616;
  --c-slate:        #252324;
  --c-line:         rgba(22, 22, 22, .16);
  --c-line-strong:  rgba(22, 22, 22, .42);

  /* 交互反馈色：本轮移除全部彩色强调，回到无彩中性体系。
     --c-feedback：链接下划线 / 卡片 hover 播放态 / 焦点框，统一近黑。
     --c-play：播放按钮底色，统一与页面背景同色，靠描边与图标建立层级。 */
  --c-feedback:     #161616;
  --c-play:         #f8f8f8;

  --font-sans: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 12 列栅格 / 留白 */
  --pad-x:        clamp(20px, 5vw, 72px);
  --gap:          1.5vw;
  --max-w:        1680px;
  --section-gap:  clamp(88px, 11vw, 180px);
  --indent:       22.3vw;      /* 首屏大标题首行缩进，沿用参考站栅格节奏 */

  /* 动效 */
  --ease:    cubic-bezier(.25, 1, .5, 1);
  --ease-in: cubic-bezier(.42, 0, 1, 1);
  --dur-xs:  .25s;
  --dur-s:   .4s;
  --dur-m:   .7s;

  /* 字号阶梯（1440 基准 110 / 57 / 24 / 18 / 14）
     H1 略收，保证「I create motion design」整行在 12 列栅格内不折行也不溢出 */
  --fs-h1:    clamp(44px, 7.6vw, 110px);
  --fs-h2:    clamp(30px, 4vw, 57px);
  --fs-h3:    clamp(20px, 1.7vw, 24px);
  --fs-body:  clamp(14px, 1.05vw, 16px);
  --fs-small: 14px;
  --fs-label: 11px;
}
