/* ============================================================
   UTON · One Beam, One Day — Design Tokens (v1.0 定稿)
   浅色=白天 / .is-night=入夜后(全站唯一一次翻转,四向可逆)
   ============================================================ */
:root{
  /* Day (paper) */
  --paper:#f4f3ef;
  --paper-deep:#e7e6e1;
  --ink:#16181c;
  --ink-soft:#3d4046;
  --grey-ribbon:#a4a7a9;
  --hairline:rgba(22,24,28,.14);

  /* Night */
  --night:#0b0e14;
  --night-2:#10151f;
  --beam:#fff6e6;
  --beam-glow:rgba(255,246,230,.35);
  --retro-silver:#dfe3e6;
  --hairline-n:rgba(255,246,230,.16);

  /* Signal (配给制:hover/selection/strong/焦点/尾章mask,暗场永不做主角) */
  --red:#e8331f;

  /* Live theme slots — flipped by .is-night */
  --bg:var(--paper);
  --bg-2:var(--paper-deep);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --line:var(--hairline);
  --accent:var(--ink);

  /* Type */
  --sans:'Instrument Sans','Hanken Grotesk','Segoe UI Variable Display','Segoe UI',system-ui,Arial,sans-serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,'Courier New',monospace;

  /* Geometry: 2–4px 微圆角 + 发丝线 + 零投影 */
  /* 全站统一圆角(2026-07-19 由 3px 改为 20px)。
     承载内容的面 —— 照片、卡片、面板、媒体框、下拉菜单 —— 一律走这个令牌。
     不走它的只有三类,都是刻意的另一种形状而非"弧度":
     胶囊 999px(chip / kicker / 导航胶囊)、圆点 50%、焦点环 2px
     (20px 的环套在行内文字链接上会飘在字外面) */
  --r:20px;

  /* 版心:一处定义,全站对齐 */
  --content-max:1760px;          /* 版心上限 */
  --gutter:clamp(20px,3vw,56px); /* 版心左右内边距 */
  /* 滚动条宽度,由 nav.js 在启动时测出写入。100vw 含滚动条,
     直接用它做满幅破出会让整块左移半个滚动条宽(实测 1440 档偏 7px) */
  --sbw:0px;
  --bleed:calc(100vw - var(--sbw));
  /* 满出血元素(横向滚动轨、满屏文案)用它,左缘就与 .wrap 的内容左缘重合 */
  /* 用 100% 而非 100vw:100vw 含滚动条宽度,会比 .wrap 的内容左缘多算 8px */
  --edge:max(var(--gutter),calc((100% - var(--content-max)) / 2 + var(--gutter)));

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --night-fade:900ms;
}

html.is-night{
  --bg:var(--night);
  --bg-2:var(--night-2);
  --fg:var(--retro-silver);
  --fg-soft:#aeb3ba;
  --line:var(--hairline-n);
  --accent:var(--beam);
}

::selection{background:var(--red);color:#fff;}