/* 由 scripts/sync_site_tokens.py 从 app 的风格旋钮生成，勿手改。
   来源（design/basing_style_knobs_2026-09-23.md 第一节）：
     shell.css 的 :root 与 .screen / .screen.dark 两段颜色；basing_app.css 开头的 .screen。
   改风格去那几处改，再跑 python scripts/sync_site_tokens.py。
   这里是 classic（app 现在的样子）；themes/*.css 在其上覆盖，site_tokens.css 放公开站独有的变量。 */

:root {
  --fs-read: 22px;
  --fs-title: 17px;
  --fs-body: 15px;
  --fs-note: 13px;
  --surface: #fff;
  --page: #e9e9eb;
  --glass: rgba(250,250,251,.92);
  --press: rgba(0,0,0,.05);
  --ink0: #1d1d1d;
  --ink2: #3a3a3c;
  --ink3: #48484a;
  --ink4: #6e6e73;
  --ink5: #8e8e93;
  --ink6: #aeaeb2;
  --ink: #111;
  --raised: #fff;
  --sheet: rgba(249,249,250,.98);
  --fog: rgba(252,252,253,.72);
  --fog2: rgba(252,252,253,.68);
  --fog3: rgba(250,250,252,.74);
  --fog4: rgba(252,252,253,.94);
  --hair: #d2d2d7;
  --fill: #f5f5f7;
  --ff-ui: "Noto Sans SC", -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --ff-doc: Georgia, "Times New Roman", "Songti SC", serif;
  --tp-doc-title: 600 var(--fs-read)/1.35 var(--ff-ui);
  --tp-doc-body: 400 var(--fs-title)/1.75 var(--ff-doc);
  --tp-doc-ref: 400 var(--fs-body)/1.65 var(--ff-doc);
  --tp-ui-title: 600 var(--fs-title)/1.3 var(--ff-ui);
  --tp-ui-body: 400 var(--fs-body)/1.7 var(--ff-ui);
  --tp-ui-note: 400 var(--fs-note)/1.5 var(--ff-ui);
  --tp-brand: 700 28px/1 var(--ff-ui);
  --fs-toc: 14px;
  --tp-toc: 400 var(--fs-toc)/1.2 var(--ff-ui);
  --tp-code: 400 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --read-w: 640px;
  --chat-w: 768px;
  --cl-h: 52px;
  --seam-bottom: calc(16px + var(--cl-h));
  --drawer-top: 14px;
  --drawer-left: 14px;
  --chev-ink-x: 6.1px;
  --glass-bg: var(--fog2);
  --glass-blur: blur(22px) saturate(1.1);
  --glass-edge: var(--hair);
  --bar-h: 56px;
  --fw-regular: 400;
  --fw-strong: 600;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
  --r-round: 50%;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .14);
  --shadow-dialog: 0 1px 3px rgba(0, 0, 0, .06), 0 16px 48px rgba(0, 0, 0, .18);
  --shadow-drawer: 2px 0 26px rgba(0, 0, 0, .07);
  --edge-soft: rgba(0, 0, 0, .06);
  --edge-pop: rgba(0, 0, 0, .08);
  --scrim: rgba(0, 0, 0, .18);
  --on-solid: #fff;
  --miss: #d70015;
  --sb-size: 10px;
  --sb-thumb: var(--ink6);
  --sb-thumb-hover: var(--ink5);
  --pbtn-h: 32px;
  --pbtn-radius: var(--r-pill);
  --pbtn-bg: var(--surface);
  --pbtn-edge: var(--hair);
  --pbtn-ink: var(--ink2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface: #1c1c1e;
    --page: #000;
    --glass: rgba(44,44,46,.92);
    --press: rgba(255,255,255,.08);
    --ink0: #f5f5f7;
    --ink2: #e5e5ea;
    --ink3: #d1d1d6;
    --ink4: #aeaeb2;
    --ink5: #8e8e93;
    --ink6: #636366;
    --ink: #f5f5f7;
    --raised: #2c2c2e;
    --sheet: rgba(38,38,40,.98);
    --fog: rgba(46,46,48,.72);
    --fog2: rgba(44,44,46,.70);
    --fog3: rgba(40,40,42,.74);
    --fog4: rgba(46,46,48,.94);
    --hair: #3a3a3c;
    --fill: #2c2c2e;
  }
}
