/* =====================================================================================
   PA 设计 token：全站外观的总开关。只改这个文件，就能整体调颜色、字号、间距、圆角、阴影、动效。

   分三层，越往下越具体；改外观时优先改上层：
   1. 基础刻度（色板、字号阶梯、间距单位、圆角、阴影、时长、层级）——原材料，本身不表达用途。
      想换一种绿、整体放大字号、让界面更松或更紧，改这一层。
   2. 语义 token（--bg、--text、--accent、--text-body……）——说的是「用在哪」，亮色、暗色各指一套基础值。
      想让「次要文字」更淡、「主色」换成别的色，改这一层。
   3. 组件变量（--r-card、--sidebar-w、--r-bubble……）——某类组件专用的尺寸。
      只想动卡片圆角、侧栏宽度这类局部，改这一层。

   怎么改：
   - 直接改冒号后面的值，保存后刷新页面即可（文件带内容版本号，浏览器会自动取新的）。
   - 暗色模式只在下面的 @media (prefers-color-scheme:dark) 里改语义 token；基础刻度两种模式共用。
   - 主色 --accent、--accent-soft、--ok、--ok-soft、--pet-fx 会被总管宠物的主题色覆盖（pets.js 的 applyTheme）：
     宠物 SVG 写了 data-accent 或身体色时，页面跟着宠物走；这里的值是没有宠物主题时的默认值。
   - 页面里引用的变量名（--bg、--panel、--text、--muted、--line、--accent、--ok、--warn、--bad 等）脚本里也在用，
     只改值，别改名。
   - 间距刻度 --sp-N 默认等于 N × 2px，改 --space-unit 可以整体调松紧；动效时长都乘以 --motion-scale，
     设成 0.5 全站动效快一倍，设成 2 慢一倍。
   - 没进刻度的零碎值（1px、3px、5px 这类细线和光学微调、组件专属的固定尺寸）仍直接写在各样式文件里。
   ===================================================================================== */

:root{
  /* ---------- 1. 基础刻度 ---------- */

  /* 色板：中性色（偏一点青灰）。数字越大越深 */
  --neutral-0:#fff;
  --neutral-50:#f6f7f8;
  --neutral-75:#edf3f3;
  --neutral-100:#e3e8e7;
  --neutral-300:#a5b3bc;
  --neutral-500:#6b747e;
  --neutral-700:#33424b;
  --neutral-800:#20272d;
  --neutral-900:#1a242c;
  --neutral-950:#10171d;
  /* 色板：绿（品牌主色、「正常」） */
  --green-50:#e3f0ea;
  --green-200:#9bd9bd;
  --green-600:#27765d;
  --green-700:#246d55;
  --green-900:#1f3a31;
  --green-950:#1b3029;
  /* 色板：琥珀（需要留意） */
  --amber-50:#faf0df;
  --amber-300:#edc381;
  --amber-700:#936222;
  --amber-900:#3a2f1a;
  /* 色板：红（出问题、危险操作） */
  --red-50:#f8e8e7;
  --red-300:#f1a5a0;
  --red-700:#a44848;
  --red-900:#3b2423;
  /* 色板：紫（助理相关） */
  --violet-50:#f1eefa;
  --violet-300:#c4b5fd;
  --violet-700:#6d28d9;
  --violet-900:#231b36;
  /* 色板：黑白与半透明灰（灰叠在任何底色上都适用，亮暗模式共用） */
  --black:#000;
  --white:#fff;
  --gray-a10:rgba(127,127,127,.1);
  --gray-a12:rgba(127,127,127,.12);
  --gray-a15:rgba(127,127,127,.15);
  --gray-a20:rgba(127,127,127,.2);
  --gray-a35:rgba(127,127,127,.35);
  --shade-a08:rgba(0,0,0,.08);
  --shade-a18:rgba(0,0,0,.18);
  --shade-a45:rgba(0,0,0,.45);

  /* 字体 */
  --font-sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;   /* 代码块、日志 */
  --font-mono-alt:ui-monospace,Menlo,monospace;                  /* 卡片里的行内代码 */

  /* 字号阶梯 */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-lg:15px;
  --fs-xl:16px;
  --fs-2xl:17px;
  --fs-3xl:18px;
  --fs-4xl:20px;
  --fs-display:30px;

  /* 字重 */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:650;
  --fw-heavy:700;

  /* 行高 */
  --lh-body:1.55;
  --lh-code:1.5;
  --lh-msg:1.9;

  /* 间距：--sp-N = N × --space-unit（默认 2px），即 sp-4 = 8px、sp-8 = 16px */
  --space-unit:2px;
  --sp-1:calc(var(--space-unit) * 1);
  --sp-2:calc(var(--space-unit) * 2);
  --sp-3:calc(var(--space-unit) * 3);
  --sp-4:calc(var(--space-unit) * 4);
  --sp-5:calc(var(--space-unit) * 5);
  --sp-6:calc(var(--space-unit) * 6);
  --sp-7:calc(var(--space-unit) * 7);
  --sp-8:calc(var(--space-unit) * 8);
  --sp-9:calc(var(--space-unit) * 9);
  --sp-10:calc(var(--space-unit) * 10);
  --sp-11:calc(var(--space-unit) * 11);
  --sp-14:calc(var(--space-unit) * 14);
  --sp-20:calc(var(--space-unit) * 20);

  /* 圆角（正圆 50% 是几何形状，不进刻度） */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:12px;
  --radius-2xl:16px;
  --radius-pill:999px;

  /* 阴影 */
  --shadow-menu:0 4px 16px var(--shade-a08);     /* 下拉菜单、右上角菜单面板 */
  --shadow-dialog:0 8px 24px var(--shade-a18);   /* 弹窗、模型选择列表 */
  --shadow-window:0 8px 28px var(--shade-a18);   /* 远程桌面浮窗 */

  /* 动效：时长都乘 --motion-scale；缓动曲线 */
  --motion-scale:1;
  --dur-press:calc(.12s * var(--motion-scale));     /* 按下缩一下 */
  --dur-hover:calc(.15s * var(--motion-scale));     /* 悬停变色、菜单弹出 */
  --dur-scrim:calc(.18s * var(--motion-scale));     /* 弹窗遮罩淡入 */
  --dur-fade:calc(.2s * var(--motion-scale));       /* 淡入淡出、提示条 */
  --dur-pop:calc(.22s * var(--motion-scale));       /* 弹窗上浮、助理列表展开 */
  --dur-enter:calc(.25s * var(--motion-scale));     /* 切页淡入、头像反馈 */
  --dur-msg:calc(.28s * var(--motion-scale));       /* 新消息上浮 */
  --dur-rise:calc(.3s * var(--motion-scale));       /* 内容上浮、弹性展开 */
  --ease-emphasized:cubic-bezier(.2,.7,.2,1);       /* 快出慢停：进场 */
  --ease-spring:cubic-bezier(.3,1.4,.5,1);          /* 略带回弹 */

  /* 层级（数字大的盖住小的） */
  --z-dock:3;        /* 对话输入区 */
  --z-header:5;      /* 页内顶栏 */
  --z-agents:6;      /* 对话页左上的助理头像 */
  --z-menu:20;       /* 右上角菜单、下拉菜单 */
  --z-float:30;      /* 远程桌面、底栏、模型选择列表 */
  --z-modal:50;      /* 弹窗 */
  --z-toast:60;      /* 提示条 */

  /* ---------- 2. 语义 token（亮色） ---------- */

  /* 底与线 */
  --bg:var(--neutral-50);          /* 页面底色，也用作面板里的浅底 */
  --panel:var(--neutral-0);        /* 卡片、侧栏、弹窗等面板 */
  --line:var(--neutral-100);       /* 分隔线、边框、空进度条 */
  /* 文字 */
  --text:var(--neutral-800);       /* 正文 */
  --muted:var(--neutral-500);      /* 次要文字、说明 */
  /* 主色与状态色：*-soft 是同色的浅底 */
  --accent:var(--green-700);
  --accent-soft:var(--green-50);
  --on-accent:var(--white);        /* 主色底上的文字 */
  --ok:var(--green-700);
  --ok-soft:var(--green-50);
  --warn:var(--amber-700);
  --warn-soft:var(--amber-50);
  --bad:var(--red-700);
  --bad-soft:var(--red-50);
  --agent:var(--violet-700);
  --agent-soft:var(--violet-50);
  --pet-fx:var(--green-600);       /* 宠物的特效色（星星、汗滴等） */
  /* 叠加色 */
  --hover:var(--gray-a12);         /* 文字按钮悬停底 */
  --code-bg:var(--gray-a15);       /* 对话里的行内代码 */
  --code-block-bg:var(--gray-a10); /* 对话里的代码块 */
  --file-on-accent-bg:var(--gray-a20);    /* 主色气泡里的附件 */
  --file-on-accent-line:var(--gray-a35);
  --scrim:var(--shade-a45);        /* 弹窗遮罩 */
  --media-bg:var(--black);         /* 视频、远程桌面画面的底 */
  --doc-bg:var(--white);           /* PDF 的底（PDF 自己是白纸） */

  /* 字号用途 */
  --text-micro:var(--fs-2xs);               /* 徽标、状态标签 */
  --text-caption:var(--fs-xs);              /* 说明小字、时间、卡片页脚 */
  --text-note:calc(var(--fs-xs) + .5px);    /* 文件信息、代码、表格 */
  --text-small:var(--fs-sm);                /* 次要正文、按钮组、列表说明 */
  --text-small-plus:calc(var(--fs-sm) + .5px);
  --text-body:var(--fs-md);                 /* 正文 */
  --text-body-plus:calc(var(--fs-md) + .5px);   /* 要你处理的卡片 */
  --text-lead:var(--fs-lg);                 /* 列表标题、小标题 */
  --text-heading:var(--fs-xl);              /* 页标题、弹窗标题、输入框 */
  --text-brand:var(--fs-2xl);               /* 侧栏 PA 字样 */
  --text-title:var(--fs-3xl);               /* 大标题 */
  --text-sheet-title:calc(var(--fs-3xl) + 1px);
  --text-glyph:var(--fs-4xl);               /* 「⋯」这类字符图标 */
  --text-display:var(--fs-display);         /* 看板大数字 */
  --text-msg:calc(var(--fs-xl) + .5px);     /* 对话气泡 */
  /* 手机（≤600px）上放大一档 */
  --text-body-mobile:calc(var(--fs-lg) + .5px);
  --text-small-mobile:calc(var(--fs-sm) + .5px);
  --text-msg-mobile:var(--fs-2xl);

  /* ---------- 3. 组件变量 ---------- */

  --r-card:var(--radius-xl);       /* 卡片、面板、弹窗 */
  --r-btn:var(--radius-md);        /* 按钮、输入框 */
  --r-item:var(--radius-lg);       /* 列表里的条目卡（任务、点子、要你处理的） */
  --r-menu:var(--radius-lg);       /* 下拉菜单 */
  --r-bubble:var(--radius-xl);     /* 对话气泡 */
  --r-bubble-tail:var(--radius-xs);   /* 气泡靠说话人那一角 */
  --r-composer:var(--radius-2xl);  /* 输入框外框 */
  --control-h:34px;                /* 普通按钮最小高度 */
  --sidebar-w:184px;               /* 桌面侧栏宽度 */
  --content-max:1040px;            /* 主内容最大宽度 */
  --chat-max:820px;                /* 对话栏最大宽度 */
  --bnav-h:58px;                   /* 竖屏底栏高度（不含刘海安全区） */
  /* 下面两个是布局运行时的值（竖屏时被改成底栏高度 / 0），不用改 */
  --bn:0px;
  --sbw:var(--sidebar-w);
}

/* ---------- 2'. 语义 token（暗色）：只换语义层，基础刻度和组件变量沿用上面 ---------- */
@media (prefers-color-scheme:dark){:root{
  --bg:var(--neutral-950);
  --panel:var(--neutral-900);
  --line:var(--neutral-700);
  --text:var(--neutral-75);
  --muted:var(--neutral-300);
  --accent:var(--green-200);
  --accent-soft:var(--green-900);
  --on-accent:var(--neutral-950);
  --ok:var(--green-200);
  --ok-soft:var(--green-950);
  --warn:var(--amber-300);
  --warn-soft:var(--amber-900);
  --bad:var(--red-300);
  --bad-soft:var(--red-900);
  --agent:var(--violet-300);
  --agent-soft:var(--violet-900);
  --pet-fx:var(--green-200);
}}