/* ============================================================
   design token contract  —  FROZEN
   ------------------------------------------------------------
   五个站视觉完全不同，但变量名完全一样。
   各站只允许在自己的 skin.css 里重新赋值，禁止新增/改名。
   engine.css 只引用 var()，永远不写字面量颜色。

   改这个文件 = 改契约 = 五个站一起改。需要单独确认。
   ============================================================ */

/* ============================================================
   tokens.css  —  五个站共用的变量名（冻结契约）
   ------------------------------------------------------------
   各站 skin.css 只准重新赋值，不准新增变量名 —— 换皮要能整站平移。
   例外：局部参数（某个元素的角度、进度、计数）用 `--_` 前缀，
   例如 --_a / --_n。带下划线的不属于契约，校验器按前缀放行。
   ============================================================ */
:root {
  /* ---- 表面：从底到浮 ---------------------------------- */
  --paper: #ffffff;        /* 页面底 */
  --raise: #f4f4f5;        /* 卡片、浮起块 */
  --sink:  #e9e9ec;        /* 凹陷、输入框、进度槽 */

  /* ---- 墨：从重到轻 ------------------------------------ */
  --ink:   #16161a;        /* 正文、标题 */
  --muted: #5c5c66;        /* 次要说明 */
  --faint: #9a9aa4;        /* 标签、脚注 */

  /* ---- 强调色：每个站的性格全在这三个上 ---------------- */
  --accent:      #3b3bd6;  /* 主强调 */
  --accent-ink:  #ffffff;  /* 压在 accent 上的字色 */
  --accent-soft: #ececfb;  /* accent 的淡底 */

  /* ---- 信号色：语义固定，不承担品牌personality -------- */
  --pos:  #1d6b4e;
  --neg:  #a33a2c;
  --warn: #8a6212;

  /* ---- 线 ---------------------------------------------- */
  --rule: #e2e2e8;

  /* ---- 字体：落地页只用 --font-body，且必须是系统字栈 --
     display / mono 允许加载 web font，但只能在题目页之后用。
     理由：落地率 0.691，首屏每个字体请求都在吃那 31%。 */
  --font-body: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
               "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  /* ---- 字号：模块化音阶，各站可换比例但档位数固定 ------ */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.14rem + .3vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.38rem + .6vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.66rem + 1.2vw, 2.7rem);
  --step-4:  clamp(2.4rem, 1.94rem + 2.3vw, 3.9rem);
  --step-5:  clamp(3rem, 2.1rem + 4.5vw, 5.8rem);

  /* ---- 间距 -------------------------------------------- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2.25rem; --sp-7: 3.5rem; --sp-8: 5.5rem;

  /* ---- 圆角：各站差异很大，0 也是合法值 ---------------- */
  --radius-s: 4px; --radius-m: 10px; --radius-l: 20px;

  /* ---- 动效：落地页只许用 transform / opacity ---------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms; --dur: 280ms; --dur-slow: 620ms;

  /* ---- 版心 -------------------------------------------- */
  --measure: 38rem;   /* 正文可读宽度 */
  --wide: 72rem;      /* 内容区最大宽 */

  /* 站内导航条的高度。.stage 的 100svh 是按它减出来的（见 engine.css），
     改这一个值两边一起跟着变；各站 skin.css 可以改，但必须改这个变量，
     直接给 .sitenav 写死高度会让落地页多出一条滚动。 */
  --snav-h: 2.75rem;
}

/* 深色：各站在 skin.css 里覆盖同样这批变量。
   三种状态都要管：显式 light / 显式 dark / 跟随系统。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e11; --raise: #17171c; --sink: #202027;
    --ink: #f2f2f5; --muted: #a3a3ae; --faint: #6b6b76;
    --accent-soft: #1c1c3a; --rule: #2a2a33;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e11; --raise: #17171c; --sink: #202027;
  --ink: #f2f2f5; --muted: #a3a3ae; --faint: #6b6b76;
  --accent-soft: #1c1c3a; --rule: #2a2a33;
}