/* ==========================================================================
   设计令牌 · 方案 A「黄铜与瓷白」
   参考《重返未来:1999》视觉语言：Art Deco 几何、细金线、低饱和复古色。
   亮色为主基调；[data-theme="dark"] 手动覆盖，或跟随系统。
   ========================================================================== */

:root {
  /* ---- 字体 ---- */
  --font-serif: "Songti SC", "SimSun", "Source Han Serif SC", Georgia, serif;
  --font-sans:  "Inter", "HarmonyOS Sans SC", "PingFang SC",
                "Microsoft YaHei", sans-serif;
  --font-mono:  "JetBrains Mono", Consolas, "Cascadia Mono", monospace;

  /* ---- 字号 ---- */
  --fs-label: 10px;   /* 等宽小标签 */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  13px;
  --fs-body:  14px;   /* 合同正文 */
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    25px;   /* 首屏招呼语 */

  /* ---- 间距 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- 布局 ---- */
  --sidebar-w:    212px;  /* 会话列表 */
  --dock-w:       48px;   /* 常驻窄条（头像、新对话、收放、主题） */
  --composer-max: 720px;  /* 输入区最大宽 */
  --chat-max:     760px;  /* 对话流最大宽 */
  --radius:       11px;
  --radius-sm:    6px;
  --radius-pill:  20px;

/* ---- 风险语义色（昼夜不变） ----
     mid 从 #A5761F 压深到 #8A6017：原值在瓷白卡面上只有 3.83:1,
     而它标的是「中风险条款」—— 风险等级是这个产品的核心输出,
     读不清等于没标。压深后 5.30:1。色相没动,仍是同一支土黄。 */
  --high: #9C3A30;
  --mid:  #8A6017;
  --low:  #5B7550;

  --dur:  160ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   装饰层。参考《1999》那张「几何记忆」：极淡的手写公式底纹，
   加边角上两三个大几何色块。

   这一族只用于装饰，**不承载任何语义**。风险等级、状态、层级一律走
   上面那些色 —— 装饰色一旦被拿去表意，用户就得分辨「这个蓝是状态
   还是花纹」，那是自找的歧义。

   为什么底纹是手写笔迹而不是几何循环：密铺的图案每一格权重相同，
   铺满整屏就是一片均匀的噪音，没有落点，看着就是「乱」。手写公式
   不规则，淡到 3% 只剩纸面质感。这是上一版做密铺撞出来的结论。
   ========================================================================== */
:root {
  /* 纸张肌理。用 SVG 的 feTurbulence 生成分形噪点 —— 不是图案。

     手搓路径模拟手写公式那条路走死了：符号是我一条条写的,写多少个
     就有多少个,420px 一循环肉眼直接数得出重复,比密铺还乱。参考图里
     中间大片区域的质感其实**不是可辨认的图案**,是纸的颗粒。

     feTurbulence 出的是伪随机场,没有可识别的形状、也就没有「重复感」——
     循环边界看不出来。baseFrequency .8 给细颗粒（值越小颗粒越大越像
     云雾）,numOctaves 3 让颗粒有层次。

     透明度 .045。这个值是试出来的上限：.38 那一版整片像电视雪花,
     正文像被磨砂玻璃盖住 —— 噪点铺满全屏,任何肉眼「看得清」的浓度
     都已经在干扰阅读了。只能弱到「说不出哪里不同,但纸不像纯色」。

     深浅通用：中性灰噪点在浅底上显脏一点、深底上显亮一点,两边都读作
     纸面颗粒,不需要为深色再抄一份。 */
  --formula-wash:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");

  /* 三张大几何。每张都是「填充 + 内描线」：
     radial-gradient 做填充,再叠一层同形状但缩小一点的透明中心 ——
     那圈亮线是它显得设计过而不是贴了个色块的关键。
     clip-path 在背景图里用不了,所以形状仍走 SVG polygon。 */
  --deco-star-tr:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23A8834A' stop-opacity='.46'/%3E%3Cstop offset='1' stop-color='%23A8834A' stop-opacity='.20'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpolygon points='50,3 61,32 92,32 67,50 78,79 50,61 22,79 33,50 8,32 39,32' fill='url(%23a)'/%3E%3Cpolygon points='50,11 59,35 84,35 64,49 73,72 50,58 27,72 36,49 16,35 41,35' fill='none' stroke='%23FBF9F3' stroke-opacity='.7' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E");

  --deco-star-br:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233C5A72' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%233C5A72' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpolygon points='50,3 61,32 92,32 67,50 78,79 50,61 22,79 33,50 8,32 39,32' fill='url(%23b)'/%3E%3Cpolygon points='50,11 59,35 84,35 64,49 73,72 50,58 27,72 36,49 16,35 41,35' fill='none' stroke='%23FBF9F3' stroke-opacity='.65' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E");

  /* 三角只有描线、不填充 —— 那张图里的青色三角就是空心的,
     用来在两个实心大形之间做一个轻的呼吸点。 */
  --deco-tri-r:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='6,16 94,30 44,90' fill='none' stroke='%235B8F82' stroke-opacity='.5' stroke-width='4'/%3E%3C/svg%3E");
}

/* ------------------------------- 亮色（主） ------------------------------ */
:root,
:root[data-theme="light"] {
  --bg:       #F3F0E8;   /* 瓷白偏暖的底 */
  --surface:  #FBF9F3;   /* 卡片面 */
  --surface-2:#F7F4EC;   /* 抬升面 / hover */
  --paper:    #FDFCF8;   /* 合同纸面 */

  --ink:      #221F1A;   /* 主文字 */
  --ink2:     #6B6459;   /* 次文字 */
  --ink3:     #9A9285;   /* 三级文字 / 占位 */

  --brass:    #A8834A;   /* 黄铜，主强调 */
  --brass-l:  #C9A96A;   /* 黄铜浅，装饰线 */
  --blue:     #3C5A72;   /* 蓝图蓝，冷点缀 */

  --line:     rgba(168,131,74,.30);
  --line-s:   rgba(168,131,74,.16);

  /* 标注底色 */
  --mk-high-bg: rgba(156,58,48,.10);
  --mk-mid-bg:  rgba(165,118,31,.12);
  /* AI 改写：蓝，与风险红/黄区分 */
  --ai-bg:      rgba(60,90,114,.12);
  --ai-bd:      #3C5A72;
  /* AI 新增条款：绿，与改写的蓝区分 */
  --gen-bg:     rgba(91,117,80,.13);
  --gen-bd:     #5B7550;

  --shadow: none;
  --shadow-lift: 0 4px 18px rgba(34,31,26,.08);
}

/* ------------------------------- 暗色 ---------------------------------- */
:root[data-theme="dark"] {
  --bg:       #12171A;
  --surface:  #1A2125;
  --surface-2:#212A2F;
  --paper:    #171E22;

  --ink:      #E6E0D2;
  --ink2:     #938D7E;
  --ink3:     #6A655B;

  --brass:    #C9954A;
  --brass-l:  #E0B878;
  --blue:     #6E93AB;

  --line:     rgba(201,149,74,.28);
  --line-s:   rgba(201,149,74,.13);

/* high 从 #C4564A 提亮到 #D4756A：原值在深色卡面（#1A2125）上
     只有 3.71:1。深色下要提亮而不是压深 —— 与浅色那边反向。
     提亮后 5.09:1。标注背景 --mk-high-bg 跟着换成新色的 rgba。 */
  --high: #D4756A;
  --mid:  #C99A45;
  --low:  #7D9A6C;

  --mk-high-bg: rgba(212,117,106,.16);
  --mk-mid-bg:  rgba(201,154,69,.16);
  --ai-bg:      rgba(110,147,171,.18);
  --ai-bd:      #6E93AB;
  --gen-bg:     rgba(125,154,108,.18);
  --gen-bd:     #7D9A6C;

  --shadow: 0 6px 26px rgba(0,0,0,.32);
  --shadow-lift: 0 8px 30px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:       #12171A;
    --surface:  #1A2125;
    --surface-2:#212A2F;
    --paper:    #171E22;
    --ink:      #E6E0D2;
    --ink2:     #938D7E;
    --ink3:     #6A655B;
    --brass:    #C9954A;
    --brass-l:  #E0B878;
    --blue:     #6E93AB;
    --line:     rgba(201,149,74,.28);
    --line-s:   rgba(201,149,74,.13);
    /* 与上面 [data-theme="dark"] 那份必须一致 —— 这里是「跟随系统」
       走的分支,两份取值分开写着,改一处忘另一处的表现是
       「手动切深色好了、系统自动切没好」。 */
    --high: #D4756A;
    --mid:  #C99A45;
    --low:  #7D9A6C;
    --mk-high-bg: rgba(212,117,106,.16);
    --mk-mid-bg:  rgba(201,154,69,.16);
    --ai-bg:      rgba(110,147,171,.18);
    --ai-bd:      #6E93AB;
    --gen-bg:     rgba(125,154,108,.18);
    --gen-bd:     #7D9A6C;
    --shadow: 0 6px 26px rgba(0,0,0,.32);
    --shadow-lift: 0 8px 30px rgba(0,0,0,.4);
  }
}