/* briffy · 纸。整套视觉语言的唯一来源，每个 renderer 页面在自己的 css 之前 link 它。
   标准：.claude/skills/paper-ui/SKILL.md；样张：dev/preview/lang.html（版面）与 system.html（层级）。

   一句话：窗口是一张暖灰的底纸，每条记录是一张躺在上面的白便签。
   界面本身（导航、按钮、筛选、输入框）是**印在**底纸上的字，永远不浮起来；
   只有记录是真实物件，它才有影子，才会被抬起、被拿走。

   四把梯子，没有第五种。线、框、底纹都不是层级手段：
     层  离纸面多远    --e1..--e4，只有真实物件能爬
     墨  写得多黑      五级黑墨 + 荧光笔 + 两瓶专色
     空  周围留多少气  --a1..--a5，这是唯一的分隔手段
     字  多大多重      六级 --fs-*，一种字体
*/
:root {
  /* ---- 字：一种字体。拉丁在前，中文在后，系统字垫底 ---- */
  --sans: "Source Sans 3", "Noto Sans SC", -apple-system, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* 只给日志和代码，界面不用 */
  --content: var(--sans);            /* 用户自己写的、说的、拍下来的字 */

  /* 六级字阶。层级来自字号 / 字重 / 墨色 / 留白，没有别的手段 */
  --fs-day: 21px;   --w-day: 600;    /* 1 · 日期。全页最大的东西——产品的主语是「一天」 */
  --fs-title: 13px; --w-title: 600;  /* 2 · 记录标题 */
  --fs-body: 13px;                   /* 2 · 记录正文、正文 */
  --fs-nav: 13px;                    /* 3 · 你在哪一页 */
  --fs-act: 12px;                    /* 4 · 工具、筛选。比导航小一档：动作不是地点 */
  --fs-meta: 11px;                   /* 5 · 时间 / 来源 / 大小 */
  --fs-brand: 12px;                  /* 6 · 品牌。它永远不变，所以永远不需要被读 */
  --fs-h2: 16px;                     /* 设置页的分组标题 */

  /* ---- 空：唯一的分隔手段 ---- */
  --a1: 4px;    /* 同一行字之间 */
  --a2: 8px;    /* 便签里正文和元数据之间 */
  --a3: 14px;   /* 便签内边距 */
  --a4: 26px;   /* 便签之间；侧栏两组之间 */
  --a5: 54px;   /* 一天和下一天之间 */
  --pad: 40px;  /* 页边 */

  /* ---- 墨与纸，日光下 ---- */
  /* 底板：近白，纸摞在纸上（Steidl / Teenage Engineering / Cosmos 都是这条）。
     --page 是它的平均色，给那些需要一块实色的地方（打穿的装订孔、墨底按钮上的字）；
     整扇窗用 --ground——一块绝对平的色是色板，不是面，真实的桌面有光 */
  --page: #f3f1f0;
  --ground: linear-gradient(#f7f5f4, #eeeceb);       /* 底纸：整个窗口。中性石灰，不带黄——截图里的真实颜色不该被底色拖偏 */
  --slip: #fbf9f8;       /* 便签：每条记录 */
  --slip-2: #f0eeed;     /* 便签上再深一点：预览图的底、代码块 */
  --ink: #32302f;        /* 墨：日期、标题、正文、当前页 */
  --ink-2: #52504f;      /* 淡墨：摘要、工具、说明 */
  --ink-3: #747271;      /* 铅笔：时间、来源、标签、未选中的导航、placeholder */
  --hair: rgba(50, 48, 47, .20);   /* 发丝：全应用仅剩的一条线，输入框底下那道 */
  --tone: rgba(50, 48, 47, .07);   /* 印在纸上、能按的地方（按钮） */
  --tone-2: rgba(50, 48, 47, .13); /* 按下 */
  --marker: #f2e9a8;     /* 荧光笔：选中。不是层级，是记号 */

  /* 五种记录只剩一种纸色：随手记的黄（便利贴本来就黄，也是唯一你自己写的）。
     其余四种都是那张白纸——身份靠形状，不靠颜色；五种淡色混在一屏只会浑。
     -2 结尾的是物证用的深一档：磁带的磁粉、折角的纸背、书签舌 */
  --evid: #494746;     /* 物证的材料色：磁带、书签舌、装订孔——它们是东西，不是底纹，所以是深的 */
  /* 五种纸各有各的颜色（2026-09-09 用户定的：「颜色区分明显一下」）。
     在这之前只有随手记是黄的、其余四种都等于 --slip——形状区分得再好，一屏扫过去还是四张白方块。
     **五个都留在 L* 93–98、彩度 ≤ 8**：再往下走就不是纸了，是彩色卡片，而且会把嵌在纸里的
     截图缩略图的真实颜色拖偏。挑的是现实里真有的那五种纸。 */
  --p-voice: #f6efe3;  --p-voice-2: #e2d6c2;   /* 录音：牛皮纸 */
  --p-shot:  #fdfcfb;                          /* 截图：相纸——五种里最白的一张 */
  --p-note:  #fbf6dc;  --p-note-2:  #ece2b4;   /* 随手记：便利贴的黄；比 --marker 淡，不然和「选中」撞车 */
  --p-mark:  #edf2f5;  --p-mark-2:  #ccd7de;   /* 收藏：带蓝格的索引卡 */
  --p-clip:  #f1eeea;                          /* 剪贴板：复写纸 / 新闻纸的灰 */
  --accent: #3c5470;     /* 蓝墨：只给「正在发生」——识别中 / 下载中 / 链接 */
  --stamp: #b2503f;      /* 印泥：只给三件事——录音 / 出错 / 删除 */
  --ok: #3d6b47; --warn: #9a6a24;

  /* ---- 层：贴合影（贴得多紧）＋ 投影（离多远）。光在上方，影子都向下落 ---- */
  --e1: 0 1px 2px rgba(0, 0, 0, .10), 0 6px 16px rgba(0, 0, 0, .10);    /* 躺着：一条记录的常态 */
  --e2: 0 2px 4px rgba(0, 0, 0, .13), 0 12px 26px rgba(0, 0, 0, .14);   /* 抬起：鼠标经过 */
  --e3: 0 4px 9px rgba(0, 0, 0, .16), 0 22px 46px rgba(0, 0, 0, .19);   /* 拿在手上：拖拽 */
  --e4: 0 8px 22px rgba(0, 0, 0, .22), 0 44px 96px rgba(0, 0, 0, .24);  /* 摊在眼前：详情窗 */
  /* 托盘：一只 30px 的小方块，用不上给一张 200px 便签调的影子——那道 26px 的模糊比托盘本身
     还宽，看着就是一团脏。影子的大小要跟着物件走，不是跟着层级走。 */
  --e-tray: 0 1px 2px rgba(0, 0, 0, .07), 0 4px 10px rgba(0, 0, 0, .08);
  --scrim: rgba(20, 20, 18, .42);   /* 层 4 底下压暗的底纸 */

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1b1918;
    --ground: linear-gradient(#1f1d1c, #171514);
    --slip: #32302f;
    --slip-2: #3d3b3a;
    --ink: #eae8e7;
    --ink-2: #bbb9b8;
    --ink-3: #989695;
    --hair: rgba(255, 255, 255, .16);
    --tone: rgba(255, 255, 255, .07);
    --tone-2: rgba(255, 255, 255, .13);
    --marker: #3f3a2a;   /* 暗色里的荧光笔：暖、低彩度，不能是橄榄绿 */
    --evid: #797776;
    /* 暗色里同样五种，色相坐标一样，只是明暗相反 */
    --p-voice: #38332c; --p-voice-2: #464035;
    --p-shot:  #333130;
    --p-note:  #3a3526; --p-note-2:  #474030;
    --p-mark:  #2e3337; --p-mark-2:  #3a4249;
    --p-clip:  #302e2c;
    --accent: #93a8c6;
    --stamp: #d17f72;
    --ok: #6fbf85; --warn: #dba55c;
    /* 暗色里纸是自己发亮的一层，投影更深、更收 */
    --e1: 0 1px 1px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .4);
    --e2: 0 2px 3px rgba(0, 0, 0, .55), 0 10px 22px rgba(0, 0, 0, .45);
    --e3: 0 4px 8px rgba(0, 0, 0, .6), 0 20px 42px rgba(0, 0, 0, .5);
    --e4: 0 8px 20px rgba(0, 0, 0, .7), 0 40px 90px rgba(0, 0, 0, .55);
    --e-tray: 0 1px 1px rgba(0, 0, 0, .35), 0 3px 7px rgba(0, 0, 0, .3);
    --scrim: rgba(0, 0, 0, .55);
  }
}