/* ===========================================================================
   frontend/assets/theme.css —— 应用界面的设计令牌层（:root 唯一色值真源）
   ---------------------------------------------------------------------------
   纪律：
     1. 本文件只放「可换肤的量」：颜色 / 字体族 / 字号 / 间距 / 圆角 / 阴影 /
        动效时长 / 侧栏宽度等；不写任何选择器规则、不碰结构与布局；
     2. 界面色值只许写在本文件的 :root 里，组件规则（app.css）只消费 var(...)，
        不散写十六进制或 rgba()；
     3. 交付图片的配色另有真源：data/theme/*.theme.json +
        templates/summary_a4_v1/styles/*.css。本文件与它无关，不参与出图。

   token：`--c-*` 颜色 / `--sp-*` 间距 / `--r-*` 圆角 / `--sh-*` 阴影 /
          `--fs-*` 字号 / `--dur-*` 时长。

   引入顺序：index.html 里本文件在 app.css **之前**；两边的 :root 不许声明同名
   token（重名时后加载者赢，等于把令牌真源变成两处）。
   =========================================================================== */

:root {
  /* ---------------- 主色（Executive Navy #1F3B57）---------------- */
  --c-primary: #1F3B57;
  --c-primary-700: #10222F;   /* 只给「按下（:active）」这一档用：比 600 再深一层，按下去看得见 */
  --c-primary-600: #17304A;
  --c-primary-400: #4A647C;
  --c-primary-300: #7189A0;
  --c-primary-200: #9DAFC0;
  --c-primary-100: #BCC9D5;
  --c-primary-50: #E2E8EE;
  --c-primary-soft: #EDF1F6;

  /* ---------------- 点睛金（装饰细线 + 选中项的底色与描边）---------------- */
  --c-gold: #B08D57;
  /*: 同一支浅金要按 6 档 alpha 叠在深蓝底上（选中菜单的渐变两头 + 描边，
       hover / 按下各一档），逐个写死的话换肤就得改 6 处。所以**三元组是唯一真源**，
       十六进制那两枚都是它的消费点：换色只改这一行。
       rgba(var(...), a) 是三大浏览器都支持的写法；不用 color-mix()——它在旧内核上
       把整条声明判为无效，选中项的高亮会整个消失。 */
  --c-gold-soft-rgb: 201, 174, 132;
  --c-gold-soft: rgb(var(--c-gold-soft-rgb));

  /* ---------------- 中性 / 瓷白 ---------------- */
  --c-page: #F4F6F8;
  --c-page-2: #EDF0F3;
  --c-surface: #FFFFFF;
  --c-surface-2: #F4F7FA;
  --c-surface-3: #EDF1F5;

  --c-border: #D8DEE5;
  --c-border-strong: #C9D2DC;
  --c-border-soft: #E2E7EC;
  --c-border-faint: #EBEEF2;

  --c-on-primary: #FFFFFF;   /* 深色填充（主按钮 / 选中菜单）上的文字 */

  --c-text: #151A21;
  --c-text-2: #39424E;
  --c-text-muted: #59626E;

  /* ---------------- 滚动条（细灰，hover 才显形）---------------- */
  /*: thumb 与 thumb-webkit 是**同一支灰的两份渲染**，不是笔误：标准 scrollbar-color
       （Firefox / 新 Chrome）与 ::-webkit-scrollbar-thumb 各读一份，WebKit 下同一支色
       画得更实，所以要淡一档。最后一枚是指针落到滑块上那一档。 */
  --c-scroll-thumb: rgba(148, 158, 170, .38);
  --c-scroll-thumb-webkit: rgba(148, 158, 170, .30);
  --c-scroll-thumb-hover: rgba(128, 140, 154, .48);

  /* ---------------- 深蓝外壳（侧栏）---------------- */
  --c-navy-950: #0E1C2C;
  --c-navy-900: #142639;
  --c-navy-line: rgba(255, 255, 255, .10);
  --c-on-navy: #E8EDF2;
  --c-on-navy-muted: #9FB2C4;
  --c-gold-on-navy: rgb(var(--c-gold-soft-rgb));
  /*: 深蓝底上的半透明白「面纱」，给 hover / 按下两档用。row（整行的组头与二级菜单）
       与 chip（30×30 的收开按钮）各一档：按下都比悬停浓 .10，而小方块要比同行浓 .02
       ——面积小，同样的 alpha 看着更淡。 */
  --c-navy-veil-row-hover: rgba(255, 255, 255, .14);
  --c-navy-veil-row-active: rgba(255, 255, 255, .24);
  --c-navy-veil-chip-hover: rgba(255, 255, 255, .16);
  --c-navy-veil-chip-active: rgba(255, 255, 255, .26);

  /* ---------------- 状态色 ---------------- */
  --c-ok: #1E7A46;

  --c-warn: #9A5B00;
  --c-warn-soft: #FBF0DC;
  --c-warn-line: #E8CFA0;

  --c-danger: #A3242E;
  --c-danger-soft: #FDECEA;
  --c-danger-line: #F3C2BC;
  --c-danger-ink: #96222B;

  --c-info: #2F5D8A;
  --c-info-line: #C7D8E6;

  --c-focus: #4A647C;
  /* 原先这里还有一枚 --c-border-control: #7E8794（输入框 / 幽灵按钮 / 排序方块的描边）。
     2026-09-27 那三处整体退到 --c-border-strong 之后它**一个消费者都不剩**，按
     「无消费者的东西就删」删掉——留一枚没人用的色值，等于给下一次改色留一个漏改点。 */

  /* ---------------- 间距（4 的倍数）---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ---------------- 圆角 ---------------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------------- 阴影 ---------------- */
  --sh-sm: 0 1px 2px rgba(15, 32, 50, .06);
  --sh-lg: 0 18px 44px rgba(15, 32, 50, .10), 0 4px 10px rgba(15, 32, 50, .05);
  --sh-lg-md: 0 8px 22px rgba(15, 32, 50, .10);

  /* ---------------- 字体 ---------------- */
  --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
             "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
             system-ui, sans-serif;
  --ui-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --ui-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", SimSun,
              "Source Han Serif", serif;

  /* ---------------- 字号（整数 px）---------------- */
  --fs-xs: 12px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 21px;

  /* ---------------- 动效 ---------------- */
  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
  /* 执行过程面板那枚光标 / 呼吸点的周期。⚠ 这是**装饰**周期，屏上没有任何「打字速度」可调：
     一行落屏就是落屏，节奏＝云端真实节奏，唯一的旋钮是轮询间隔 `POLL_MS`（住在 app.js）。 */
  --dur-blink: 1.05s;
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-inout: cubic-bezier(.645, .045, .355, 1);

  /* ---------------- 控件尺寸 ---------------- */
  /*: 全站**唯一一档**按钮高度：页面头 / 查询行 / 分页行 / 图片旁 / 表格行内全都吃这一个数。
       改这一行之前实测有四种高度并存（26 / 23.19 / 31 / 36.39 CSS px），同一屏里三颗按钮
       三种高度，右边沿对不齐。取值按「历史页那颗『刷新』的 31px 再稍矮一点」定：
       28px 装得下 --fs-base(14px) 正文，又不至于把表格行顶高。
       ⚠ 组件规则里不许再另写任何按钮高度（含 min-height / padding 撑高）。 */
  --btn-h: 28px;

  /* ---------------- 布局 ---------------- */
  --sidebar-w-default: 208px;
  --sidebar-w-collapsed: 60px;
  /*: 结果页图片的**显示宽**（一个具体像素数），由 app.js 算好后写在图片井上
       （见 .result-media .poster-image）。缩放百分比的基准是这张纸的**真实打印尺寸**
       （A4 宽 210mm；CSS 绝对单位 1in = 96px → 794px），所以 100% 就是「打印出来多大、
       屏幕上就多大」。这里的初值只是「JS 还没落笔时不塌」，真值永远来自 JS。 */
  --poster-w: 100%;
  --zoom-pad: 10px;

  color-scheme: light;
}
