/* ---------------------------------------------------------------------------
   纸与墨 —— 全站共用的配色、字体栈与圆角。

   这一份是唯一的来源。首页 (home.css) 和主界面 (styles.css) 都在它之后加载，
   各自只写自己的布局；两边都不再有第二套颜色。改这里就是改全站。

   **浅色在前，深色是覆盖**，和 CSS 的默认值方向一致。主界面原来是反过来写
   的（深色打底、浅色覆盖），因为它被当成「夜里的产品」来设计。两种写法对任何
   真实用户渲染出的结果是一样的——现代浏览器的 prefers-color-scheme 只会解析
   成 light 或 dark，没有第三种——所以合并成一份时选了和 CSS 同向的那种。
   深色那套仍然是照着夜里读的样子调的，只是不再需要写在最前面才成立。

   配色只有两族：
   - 纸（paper）与墨（ink）。暖白到炭黑，中间是几档灰。整个界面的底、面、
     线、字全在这里面，一点彩色都不掺。
   - 朱（shu）。鸟居和印泥的那个红，日式配色里唯一允许高饱和的位置。
     全站只有它一个彩色，且只花在**可以点的东西**上——主按钮、聚焦框、
     选中态。它出现在哪里，哪里就是能动的。

   例外是四个状态色和一个危险色。它们不是装饰，是必须一眼分开的语义：
   她在说 / 她在听 / 她在想 / 出错了 / 这一下撤不回来。都压到和纸墨同一个
   明度带里，不让它们比朱还响。 */

:root {
  /* 纸 —— 由底到面：页面底色、浮起来的面、再浮一层的面。 */
  --paper: #f4efe6;
  --paper-2: #fffdf8;
  --paper-3: #ece5d8;
  /* 「我说的话」那一侧。比 paper-3 再深一档的砂色，不靠边框区分左右。 */
  --paper-mine: #e2d7c1;
  /* 移动端照片的相纸白边（styles.css 的 .bubble--attachment）。
     不是 --paper-2：那是界面的底，这是画面里一个实物的颜色。 */
  --photo-paper: #fbf9f6;

  /* 墨 —— 由重到轻：正文、次要、再次要。 */
  --ink: #1b1a17;
  --ink-2: #514d45;
  --ink-3: #8d877a;

  /* 分隔线。用半透明而不是实色，压在纸上和压在浮起的面上都成立。 */
  --rule: rgba(27, 26, 23, 0.14);
  --rule-soft: rgba(27, 26, 23, 0.07);

  --shu: #b8442f;
  --shu-soft: rgba(184, 68, 47, 0.1);
  --on-shu: #fffdf8;
  --gold: #9c8449;

  /* 语义色。臙脂（えんじ）比朱更深更冷，才不会和主按钮混成一片红——
     「发送」和「清空记忆」不能是同一个颜色。 */
  --enji: #8a2b34;
  /* 若竹＝她在说，山吹＝她在听，縹＝她在想。既要当文字色也要当实心圆点，
     所以取的是中间调，不是浅色也不是深色。
     「在想」以前用的是主色，但主色是朱，而朱在这套里的意思是「这个能点」——
     一个只是在转圈的状态不该看起来像个按钮，所以它有了自己的颜色。 */
  --wakatake: #3f7d68;
  --yamabuki: #a8762a;
  --hanada: #4a7ba7;

  --shadow: 0 26px 60px -30px rgba(27, 26, 23, 0.55);

  /* 字什么都不画的时候，靠自己撑出对比。立绘上的文字没有背景可以依靠，
     而背后那张画每次都不一样，所以每个字自带一圈光。 */
  --halo: 0 1px 2px rgba(255, 253, 248, 0.95), 0 0 14px rgba(255, 253, 248, 0.8);

  /* 便签上的字（styles.css 的 .note-paper）。
     两套栈而不是一套：字体回退是按字符找的，一份混合栈会让一张中文便签落进
     日文的字形里——同一个汉字，日本字形和中国字形不是一回事，混着看就像纸是
     从别处拿来的。所以 .note-paper 按自己的 lang 选栈（note.ts 会把便签写
     下来时的语言标在元素上）。

     **两边不是同一种调子，这是有意的。** 日文走教科書体/Klee 这一路手写体，
     中文走宋体。楷体试过，太像书法作品；宋体是中文里「写在纸上给人看」的
     那个默认，落在格线上更像随手撕下来的一张，而不是一幅字。

     全部是系统自带的字，一个字节都不下载：这个产品到今天没有一个外部请求，
     为了一张便签去挂 CDN 字体，等于把每个用户的 IP 交给第三方（AGENTS.md
     §10 第一条）。所以两套栈的最后都落在 serif 上，退下去仍然是一张读得下去
     的纸。真要钉死某一款，下一步是自己托管一份子集化的字体，而不是外链。 */
  --note-font-ja: Klee, "Klee One", "YuKyokasho Yoko", YuKyokasho, "游教科書体",
    "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "HGP教科書体",
    "Hiragino Mincho ProN", "Yu Mincho", serif;
  --note-font-zh: "Songti SC", STSong, SimSun, NSimSun, "Songti TC",
    "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", serif;

  /* 便签那张纸。深色模式下它不跟着变暗——理由和 --photo-paper 一样：它是画面里
     一件实物，不是一块界面。夜里换成压过一档的米白，不用纯白。 */
  --note-paper: #fbf5e6;
  --note-ink: #2f2a22;
  --note-rule: rgba(47, 42, 34, 0.11);
  /* 原稿用纸左边那道红线。比 --shu 淡得多：它是纸上印好的，不是能点的东西。 */
  --note-margin: rgba(184, 68, 47, 0.32);

  /* 明朝体：标题、她的名字、动作描写。栈里必须留中文衬线，否则切到中文会掉回
     黑体，而这两页的调子全在明朝上。 */
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --gothic: "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP",
    "PingFang SC", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 圆角收得很紧。日式排版靠留白和细线分区，不靠圆角——原来的 16px 面板
     配 4px 的输入框是两种语言。999px 留给真正是圆的东西：状态点、
     手机上 44px 的圆按钮，那些是够不够得着的问题，不是风格问题。 */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-bubble: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131210;
    --paper-2: #1c1a17;
    --paper-3: #24211d;
    --paper-mine: #2f2a22;
    /* 夜里不用纯白：立绘是暗的，一块 #fff 会先于照片本身抢走视线。 */
    --photo-paper: #cfc9c0;

    --ink: #f2eee5;
    --ink-2: #bdb7aa;
    --ink-3: #857f73;

    --rule: rgba(242, 238, 229, 0.16);
    --rule-soft: rgba(242, 238, 229, 0.07);

    /* 暗底上的朱要提亮，原色会沉到看不出是红的。 */
    --shu: #e0674c;
    --shu-soft: rgba(224, 103, 76, 0.14);
    --on-shu: #1b1a17;
    --gold: #c3a664;

    --enji: #d98b8b;
    --wakatake: #7fc4a8;
    --yamabuki: #e0b366;
    --hanada: #86b0d4;

    --note-paper: #d9d2c1;
    --note-ink: #2b2720;
    --note-rule: rgba(43, 39, 32, 0.14);
    --note-margin: rgba(150, 52, 36, 0.36);

    --shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9);
    --halo: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.65);
  }
}

* { box-sizing: border-box; }

/* 和纸的纤维。用 SVG 现生成而不是贴一张图：一张能无缝平铺的 PNG 底纹，
   字节数比这整个文件还大。

   z-index 是负的：它压在 body 自己的底色之上、所有内容之下。主界面上
   只有面板之间那几条缝里看得见，正是那几条缝原来最像「网页」的地方。 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@media (prefers-color-scheme: dark) {
  body::after { opacity: 0.18; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}