/* 设计规范的数值（卡 100 定稿，2026-10-14）。正本是根目录 DESIGN.md 的 frontmatter，这里是同一套数值的 CSS 变量版。
   改数值先改 DESIGN.md，再改这里；tests/unit/design-tokens.test.ts 会检查两边一致。
   只管网站界面；效果演示的动效参数来自效果数据，演示的颜色从下面"分类底色"那一组取。 */
:root {
  /* 颜色：界面 */
  --color-paper: #f4f3f0;
  --color-white: #ffffff;
  --color-ink: #141519;
  --color-ink-2: #4a4c53;
  --color-ink-3: #686a71;
  --color-line: #dddcd6;
  /* 颜色：红笔（只用来给名字、挑中） */
  --color-pen: #e0301e;
  --color-pen-text: #c8281a;

  /* 颜色：分类底色（卡片演示区的底色、分类标签的小圆点） */
  --color-tint-text: #f2e2a0;
  --color-tint-enter: #cfdcf2;
  --color-tint-hover: #c8e7d4;
  --color-tint-page: #ded3f4;
  --color-tint-scroll: #fdd1c0;
  --color-tint-click: #f8d0de;
  --color-tint-decor: #bbe6e8;
  --color-tint-state: #e3dbcf;
  /* 分类底色的浅一档、深一档：只给演示用，不受规范约束 */
  --color-tint-text-soft: #fbf2cf;
  --color-tint-text-deep: #c99a10;
  --color-tint-enter-soft: #e9eff9;
  --color-tint-enter-deep: #3f63c4;
  --color-tint-hover-soft: #e6f4ec;
  --color-tint-hover-deep: #23855a;
  --color-tint-page-soft: #f0ebfb;
  --color-tint-page-deep: #6a4bc4;
  --color-tint-scroll-soft: #ffebe3;
  --color-tint-scroll-deep: #a84d27;
  --color-tint-click-soft: #fdeaf1;
  --color-tint-click-deep: #a34770;
  --color-tint-decor-soft: #e1f5f5;
  --color-tint-decor-deep: #007c83;
  --color-tint-state-soft: #f3f0ea;
  --color-tint-state-deep: #6d6150;

  /* 字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-pen: 'LXGW WenKai Screen', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* English effect names need a smaller display role; Chinese values stay unchanged. */
  --text-display-en: clamp(28px, 4.2vw, 64px);
  --text-display-en-mobile: clamp(24px, 7vw, 36px);

  /* 字号和字重 */
  --text-display: clamp(52px, 7.4vw, 118px);
  --text-display-mobile: clamp(40px, 12vw, 56px);
  --text-headline: clamp(32px, 4vw, 52px);
  --text-subtitle: clamp(16px, 1.3vw, 19px);
  --text-title: 16px;
  --text-body: 15px;
  --text-chip: 14px;
  --text-label: 13px;
  --text-count: 10.5px;
  --text-badge: 11.5px;
  --text-logo: 20px; /* 顶栏标志里的"动廊"（卡 113） */
  --text-pen-note: 0.3em;
  --text-pen-note-mobile: 0.36em;
  --weight-light: 300;
  --weight-title: 650;
  --weight-black: 900;
  --leading-display: 1.08;
  --leading-body: 1.6;
  --tracking-display: -0.03em;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-col: 22px;
  --spacing-row: 34px;
  --spacing-gutter: clamp(16px, 3.6vw, 56px);
  --spacing-hub-edge: 24px; /* 右下角控件群离右边、下边的距离（桌面；手机用 --spacing-lg） */

  /* 尺寸 */
  --size-bar: 64px;
  --size-search: 52px;
  --size-search-mobile: 44px;
  --size-chip: 32px;
  --size-tool: 34px;
  --size-search-max: 540px;
  --size-dock-max: 1120px;
  /* 右下角控件群（卡 112）：圆按钮、展开的小按钮（也是触屏上暂停的大小）、桌面上常驻的暂停 */
  --size-hub: 56px;
  --size-hub-item: 44px;
  --size-hub-pause: 40px;

  /* 圆角 */
  --radius-badge: 4px;
  --radius-overlay: 10px;
  --radius-toast: 12px;
  --radius-stage: 14px;
  --radius-field: 14px;
  --radius-focus: 16px;
  --radius-pill: 999px;

  /* 投影：平时是平的，只有漂浮的样品、提示条和右下角控件群有 */
  --shadow-float: 0 26px 50px -14px rgb(20 21 25 / 0.4);
  --shadow-toast: 0 14px 34px -12px rgb(20 21 25 / 0.45);
  --shadow-hub: 0 10px 24px -10px rgb(20 21 25 / 0.42); /* 右下角控件群：浮在内容上面 */

  /* 动效：全站一种缓动 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pen: cubic-bezier(0.5, 0.05, 0.3, 1);
  --duration-hover: 220ms;
  --duration-indicator: 420ms;
  --duration-enter: 380ms;
  --duration-reflow: 560ms;
  --duration-pen: 640ms;
  --duration-toast: 2800ms;
  --delay-hub-stagger: 40ms; /* 控件群展开时，小按钮一颗接一颗出来，每颗错开这么久 */

  /* 断点（CSS 变量不能用在媒体查询里，这里只作记录）：1280 三列，960 两列，600 一列；开屏漂浮 720、1180；高 480 及以下搜索区不贴顶 */
}