/* =========================================================
   设计令牌 · 唯一定义源
   ---------------------------------------------------------
   规则：任何颜色、字号、间距、圆角都必须来自这里。
   screen.css 里不允许出现字面量色值，也不允许再往文件尾部
   追加覆盖层 —— 旧版就是这么攒出 280 处 !important 的。
   ========================================================= */

:root {

  /* ── 颜色 ────────────────────────────────────────────────
     纸感高对比。对比度括注为与 --paper 的实测值。
     刻意不用暖调近白（米色/paper/cream 那一族是 2026 的
     另一个 AI 默认底色），chroma 压到 0。
     强调色取自龙眼 SVG 的 c3 #534AB7，压深到 AAA 档。      */

  --paper:         #FBFBFC;   /* 纸底 · oklch(98.7% 0.002 285) */
  --paper-sunk:    #F3F3F6;   /* 下沉面：代码块、表头 */
  --paper-raised:  #FFFFFF;   /* 抬起面：仅文章卡与交易盘 */

  /* 对比度为实测值，三列分别对 --paper / --paper-sunk / --paper-raised。
     取最差面判定等级 —— 同一个墨色会同时用在这三种底上。 */
  --ink:           #16171C;   /* 正文  17.30 / 16.16 / 17.90  AAA */
  --ink-2:         #4A4D57;   /* 次级   8.15 /  7.61 /  8.43  AAA */
  --ink-3:         #686C79;   /* 辅助   5.06 /  4.73 /  5.24  AA
                                 ← 底线，不得更浅。原先 #6E7280 在下沉底
                                   上只有 4.33，不达标。 */

  --indigo:        #4C43B0;   /* 强调   7.42 /  6.93 /  7.67  AAA */
  --indigo-hover:  #3A3290;   /*        9.96 /  9.30 / 10.30  AAA */
  --indigo-sunk:   #EFEEF8;   /* 强调色极淡底：当前态、选中态
                                 （靛紫在其上 6.67，AA） */

  --rule:          #E4E4E9;   /* 细线 · 主要结构手段，与纸底亮度比 1.23 */
  --rule-strong:   #C9C9D2;   /* 需要更明确切分时，1.59 */

  --positive:      #1E6B3A;   /* 盈利   6.31 /  5.89 /  6.52  AA */
  --negative:      #A8331F;   /* 亏损   6.43 /  6.00 /  6.65  AA */

  --focus:         var(--indigo);

  /* ── 字体 ────────────────────────────────────────────────
     Archivo 放在最前：它没有汉字，浏览器会逐字回退到后面的
     中文栈，于是拉丁走 Archivo、汉字走系统字体。
     中文不加载 webfont —— 完整思源黑体 5-10MB，不值得。     */

  --font-sans:
    Archivo,
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    "Cascadia Mono", "Liberation Mono", monospace;

  /* ── 字阶 ────────────────────────────────────────────────
     模块化，1.25 比率。标题用 clamp 流体化。
     展示级上限 64px：远低于 96px 的天花板，因为中文方块字
     在同字号下视觉重量远大于拉丁，48-64px 已经足够有分量。 */

  --t-micro:   0.8125rem;   /* 13px  标签、元信息 */
  --t-small:   0.875rem;    /* 14px  辅助说明 */
  --t-body:    1rem;        /* 16px  界面正文 */
  --t-prose:   1.0625rem;   /* 17px  文章正文，中文略放大更耐读 */
  --t-lead:    1.25rem;     /* 20px  导语 */
  --t-h4:      1.25rem;     /* 20px */
  --t-h3:      clamp(1.375rem, 1.2rem + 0.7vw,  1.5625rem);   /* 22→25 */
  --t-h2:      clamp(1.625rem, 1.35rem + 1.1vw, 1.9375rem);   /* 26→31 */
  --t-h1:      clamp(2rem,     1.6rem + 1.9vw,  2.75rem);     /* 32→44 */
  --t-display: clamp(2.5rem,   1.9rem + 2.9vw,  4rem);        /* 40→64 */

  /* 字重：只用四档，靠字重差拉层级而不是靠洗淡颜色 */
  --w-normal:   400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* 行高：中文需要比拉丁更松 */
  --lh-tight:  1.15;   /* 展示级标题 */
  --lh-snug:   1.35;   /* 小标题 */
  --lh-body:   1.65;   /* 界面正文 */
  --lh-prose:  1.85;   /* 文章正文 */

  /* 字距：CJK 不吃负字距，超过 -0.03em 汉字就开始挤。
     展示级到 -0.025em 为止。 */
  --ls-display: -0.025em;
  --ls-heading: -0.015em;
  --ls-body:     0;
  --ls-label:    0.06em;   /* 仅用于极少数小写标签 */

  /* ── 间距 ────────────────────────────────────────────────
     4px 网格，但刻意非线性 —— 等差数列做不出节奏。         */

  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* 区块间的流体留白：大屏上要真的能呼吸 */
  --gap-section: clamp(var(--s-7), 5vw, var(--s-9));

  /* ── 圆角 ────────────────────────────────────────────────
     印刷手册的气质要接近直角。嵌套时必须满足
     外圆角 = 内圆角 + padding，否则圆角会看起来"歪"。      */

  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ── 边框 ────────────────────────────────────────────────
     用细线而不是阴影。旧版 29 个 backdrop-filter 全部移除。 */

  --border:        1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);

  /* 唯一保留的阴影，只给真正抬起的两处（文章卡 hover、交易盘）。
     多层低透明度叠加，比单层实边框更贴合任意底色。 */
  --shadow-raised:
    0 1px 2px rgba(22, 23, 28, 0.04),
    0 4px 12px rgba(22, 23, 28, 0.05);

  /* ── 层级 ────────────────────────────────────────────────
     语义化，禁止出现 999 / 9999 这类魔数。                  */

  --z-base:            0;
  --z-raised:          10;
  --z-sticky:         100;
  --z-dropdown:       200;
  --z-modal-backdrop: 300;
  --z-modal:          400;
  --z-toast:          500;
  --z-tooltip:        600;

  /* ── 动效 ────────────────────────────────────────────────
     指数型 ease-out，不用 bounce 不用 elastic。             */

  --ease-out:      cubic-bezier(0.25, 1, 0.5, 1);      /* quart */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);     /* cubic */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  /* ── 版面 ────────────────────────────────────────────────  */

  --w-page:    1180px;   /* 页面最大宽度 */
  --w-prose:   40em;     /* 文章正文行长上限，中文约 40 字 */
  --w-sidebar: 260px;    /* 旧版 320px，收窄给正文让位 */
}

/* 减少动效偏好：把时长归零，保留状态变化本身。
   龙眼组件在 JS 里另有降级路径（直接静态）。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur:      0.01ms;
    --dur-slow: 0.01ms;
  }
}