/* ============================================================================
   ChatBabe 品牌层 (brand.css) —— 纯增量叠加层，不改站点 style.css 一行。
   ----------------------------------------------------------------------------
   对应品牌定稿 D:\代码库\探索\chatbabe-brand\README.md：
     · 第五节 色板      —— --brand-gold:/--ink-900/--paper-50/--site-*/--hairline 全部落地
     · 第一节 1         —— 金色横杠 → 金色句号；句号是本文件唯一新增的装饰
     · 第六节 2         —— 深色底统一为 #12100e（暖黑），与图标底板同色
     · 第一节 3         —— 用真字体：自寄 Instrument Serif（同源 /vendor/fonts/）

   约束：
     · 同源、无第三方域、无 @import、无内联 style、无 JS。
     · 只做「覆盖 token + 补一个句号 + 一处金色状态点」，不重排任何布局。
     · 所有颜色分支都在 :root 层，靠 prefers-color-scheme 或 pwa.js 打到
       <html> 上的 pwa-dark / pwa-light class 决定，不用 style=""。
   ============================================================================ */

/* ---------------------------------------------------------------- 1. 自寄字体 */
/* 站点 style.css 的字标字体栈第一顺位就是 "Instrument Serif"（h1 / header .title
   / #room-title）。此前站点没有 @font-face，用户设备上必然退化成
   Newsreader / Georgia —— 这两个 @font-face 就是在修那个真实问题。 */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/instrument-serif-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---------------------------------------------------------------- 2. 色板 token */
/* 浅色是既有值（README 第五节 --site-bg/--site-fg 一致），深色换成暖黑体系。
   --fg 取品牌 --site-fg 的 #0a0a0a（站点原值 #0f0f0f 是同一族的轻微出入）。 */

:root {
  --brand-gold: #c9a227;   /* README 第五节：品牌金 · 句号 */
  --ink-900:    #12100e;   /* README 第五节：底板暖黑 */
  --paper-50:   #f2f0eb;   /* README 第五节：深色底上的字色 */

  --bg:   #fbfaf8;
  --fg:   #0a0a0a;
  --muted:#9a9a96;
  --hair: #e8e6e1;
  --bg2:  #ffffff;
}

/* color-scheme 只声明「跟随」，不钉死 light ——
   钉死会让浅色底下的表单控件在深色系统里仍然是浅色外观（站点原本是跟随的）。 */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
}

/* pwa.js 会把显示模式写进 <html> class；深色/浅色以它的判断优先，
   并在 --force-dark / --force-light（仅测试用）时无条件生效。 */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
  :root,
  :root.pwa-dark {
    --bg:   #12100e;
    --fg:   #f2f0eb;
    --muted:#9a9a96;
    --hair: #1e1e1c;
    --bg2:  #1a1917;
  }
}

html.pwa-dark {
  color-scheme: dark;
}

/* 浅色不靠媒体查询兜底，而是显式钉回品牌浅色值 ——
   这样「系统浅色 + pwa.js 判定深色」或「系统深色 + pwa.js 判定浅色」都成立。 */

@media (prefers-color-scheme: light) {
  html { color-scheme: light; }
}

html.pwa-light { color-scheme: light; }
html.pwa-light,
html.pwa-light body {
  --bg:   #fbfaf8;
  --fg:   #0a0a0a;
  --muted:#9a9a96;
  --hair: #e8e6e1;
  --bg2:  #ffffff;
}

/* 品牌验收用：--force-dark / --force-light 直接拼在 URL 后面即可钉死明暗方案
   （Chrome 无头截图无法从命令行切 prefers-color-scheme，加这两条是为了让
   prefers-color-scheme 分支在无头下也能被真实拦截，而不是只靠 pwa.js 的 class）。
   零 JS、零布局影响，只改 token；pwa.js 判定优先于系统偏好，这两条排在最后压过它。 */
#force-dark,
#force-dark body {
  --bg:   #12100e;
  --fg:   #f2f0eb;
  --muted:#9a9a96;
  --hair: #1e1e1c;
  --bg2:  #1a1917;
}

#force-light,
#force-light body {
  --bg:   #fbfaf8;
  --fg:   #0a0a0a;
  --muted:#9a9a96;
  --hair: #e8e6e1;
  --bg2:  #ffffff;
}

/* ---------------------------------------------------------------- 3. 金色句号 */
/* README 第一节 1：句号是语言 —— 说完必要的，就停。
   仅补在字标上，且用 content:"."（真文本，不是图形），字体与字标同源同族同字号，
   颜色取 --brand-gold，无下划线、无 hover 装饰。

   刻意不加句号的两处：
     · #room-title —— 它按房间名动态变化、是否带 # 前缀由 app.js 决定，
       加尾点会变成「#room.」，语义错误。
     · <title>/og 文本 —— 句号只属于字标，不进标题栏。 */

h1::after,
header .title::after,
header strong.title::after {
  content: ".";
  color: var(--brand-gold);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  border: 0;
}

/* 字标不换行：句号必须留在字标行尾，不能单独掉到第二行。
   h1 在 clamp() 最小值 2.2rem 时整词宽约 8ch，任何视口都放得下，
   所以这里只是禁止折行，不改任何尺寸。 */
h1 {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 4. 字标字体 */
/* 名字必须与 style.css 栈里的第一顺位一致（保留引号写法），否则命中不了。
   Georgia 留在栈尾只作最后兜底。 */

h1,
header .title,
#room-title {
  font-family: "Instrument Serif", Georgia, serif;
}

/* ---------------------------------------------------------------- 5. 唯一一处金色点缀 */
/* README 第一节 2「quiet place 是一间有框的屋子」/ 第六节「克制」：
   全站只给「未读」这一个状态上金 —— 它是真状态，不是装饰。
   .unread 在有未读时由 app.js 挂到房间条的进入按钮上（虚线 2px 边框）。 */

#room-list .enter.unread {
  border-color: var(--brand-gold);
}

/* ---------------------------------------------------------------- 7. 离线页 */
/* offline.html 同样由本文件驱动：它是「同一间屋子」的另一种门牌号。
   注意：offline.html 与主站共用 style.css 的 <meta name="color-scheme" content="light dark">，
   因此它的底色分支与主站完全一致（见第 8 节），不额外钉死深色。 */

.offline-mark {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- 6. 页脚链接去掉浏览器默认蓝 */
/* 站点 style.css 只给了 #pagefoot a { color:inherit }（页脚那条），
   但 #login-view .foot a 与 guide 页 .guide .foot a 都吃浏览器默认链接色 ——
   Chrome 的默认链接蓝 #0000EE 在品牌暖黑底 #12100e 上实测对比度只有 2.02:1，
   基本读不清（在浅底 #fbfaf8 上反而是 9.01:1）。

   范围刻意收窄，不写全局 a{}：
     · 聊天消息里的链接（.body a，style.css 已给 color:inherit）必须保留，
       全局改色会波及外链 / Matrix ID / 文件链接的可辨识度。
     · 只处理三处「页脚类」链接：#pagefoot、#login-view .foot、.guide .foot。

   颜色取父元素的既有 muted（#pagefoot / .foot / .guide .foot 在 style.css 里
   本来就是 var(--muted)），所以这里用 inherit 而不是写死 --muted：
   深色下 --muted vs --bg 实测 6.72:1（远超 4.5:1），浅色下 2.71:1。
   浅色档没有更好的选择：父元素本来就是 muted，唯一更暗的档位是 --fg（18.98:1），
   那会让「说明性页脚」抢成正文；差异交给下划线与 hover 表达。 */

#pagefoot a,
#login-view .foot a,
.guide .foot a {
  color: inherit;
  text-decoration-color: var(--hair);
  text-underline-offset: 2px;
}

#pagefoot a:hover,
#login-view .foot a:hover,
.guide .foot a:hover,
#pagefoot a:focus-visible,
#login-view .foot a:focus-visible,
.guide .foot a:focus-visible {
  color: var(--brand-gold);
  text-decoration-color: currentColor;
}

/* hover 金色实测：--brand-gold vs --bg 深色 7.85:1 / 浅色 2.32:1。
   浅色下 2.32:1 只是「提示色」而非正文，且同时有下划线变化，可接受；
   真要更稳可把浅色 hover 换成 --fg（18.98:1）—— 按品牌「句号是唯一装饰」的取舍，保留金色。 */

/* 指南页眉那行「CHATBABE — guide / 指南」里的返回链接同样是浏览器默认蓝，
   且它就在字标正上方，是全页最显眼的违规点。同样只在本页范围内处理。 */

.guide .eyebrow a {
  color: inherit;
  text-decoration-color: var(--hair);
  text-underline-offset: 2px;
}

.guide .eyebrow a:hover,
.guide .eyebrow a:focus-visible {
  color: var(--brand-gold);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- 8. 暖黑底回归 */
/* #12100e 比站点的 #0a0a0a 暖，混用会在整页同色时「浮」出色块（README 第六节 2）。
   这里把 body 与 ::before 内框一起钉到 var(--bg)/var(--hair)，保证两者永远同源。
   #login-view 的 .card 本来就 background:var(--bg)，无需改动。 */

body {
  background: var(--bg);
}

body::before {
  border-color: var(--hair);
}