/* ============================================================
   Grimoire Noctis「暗夜魔典」— BookStack v26.05.4 主题覆盖
   深渊墨底 / 鎏金强调 / 羊皮纸文字 · 黑暗奇幻典籍质感
   ------------------------------------------------------------
   机制：APP_THEME=grimoire → themes/grimoire/modules/skin/head/css.html
         注入本文件（服务路径 /css/grimoire.css，物理位置 public/css/）。
   原则：纯覆盖、零核心改动；删除 .env 中 APP_THEME 即整体回滚。
   变量层：--color-* 与 --font-heading 由 BookStack 原生消费，亮暗自动切换。
   表面层：暗色样式在 BookStack 中为编译期硬编码，需按选择器定向覆盖。
   亮暗切换：由同模块的 head/scheme.html 脚本在首绘前决定 html.dark-mode
   （用户显式选择 > 实例默认 > 系统 prefers-color-scheme），本文件只负责
   「有 .dark-mode 时如何着色」，不参与切换决策。
   改 CSS 后：bump 版本号（本文件头 + head/css.html 的 ?v=）并同步
   bookstack-module.json 的 version（head 缓存键含模块版本 hash）。
   版本：v1.1.0（2026-09-09 增加系统配色跟随）
   ============================================================ */

/* ---------- 字体钩子（亮暗通用，仅标题衬线化） ---------- */
:root {
  --font-heading: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
}

/* ============================================================
   亮色态 · 羊皮纸（默认模式）
   ============================================================ */
:root:not(.dark-mode) {
  --color-primary: #8a6d14;                     /* 鎏金（暗化，保对比度） */
  --color-primary-light: rgba(138, 109, 20, 0.15);
  --color-link: #8a6d14;
  --color-bookshelf: #6b4fa0;                   /* 书架 = 暗紫 */
  --color-book: #8a6d14;                        /* 书 = 鎏金 */
  --color-chapter: #a05a20;                     /* 章节 = 铜橙 */
  --color-page: #2e7d6e;                        /* 页面 = 青玉 */
  --color-page-draft: #6f6390;                  /* 草稿 = 灰紫 */
  --color-positive: #3f7d44;
  --color-negative: #a83a3a;
  --color-info: #2b6f9e;
  --color-warning: #b06a1f;
}

html { background-color: #efe9da; }             /* 原 #F2F2F2 → 陈纸底 */

html:not(.dark-mode) body { color: #3b3222; }   /* 墨棕正文 */

/* 羊皮纸表面：卡片 / 列表项 / 下拉 / 弹层 */
html:not(.dark-mode) .card,
html:not(.dark-mode) .entity-list-item {
  background-color: #faf6ea;
}
html:not(.dark-mode) .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
  background-color: #f1ead8;
}
html:not(.dark-mode) .dropdown-container ul {
  background-color: #faf6ea;
}
html:not(.dark-mode) .popup-body {
  background-color: #faf6ea;
}

/* 表单 */
html:not(.dark-mode) .input-base {
  background-color: #fdfaf1;
  border-color: #c9bfa4;
  color: #3b3222;
}

/* 代码与引用块 */
html:not(.dark-mode) pre,
html:not(.dark-mode) code,
html:not(.dark-mode) .CodeMirror {
  background-color: #f4eedd;
  border-color: #d8cdb2;
}
html:not(.dark-mode) blockquote {
  border-inline-start: 3px solid #8a6d14;
  background-color: rgba(138, 109, 20, 0.06);
}
html:not(.dark-mode) hr { border-color: #d8cdb2; }

/* 标题墨色 */
html:not(.dark-mode) h1, html:not(.dark-mode) h2, html:not(.dark-mode) h3,
html:not(.dark-mode) h4, html:not(.dark-mode) h5, html:not(.dark-mode) h6 {
  color: #2e2417;
}

/* ============================================================
   暗色态 · 深渊墨（:root.dark-mode）
   ⚠ 变量块必须用 :root.dark-mode（0,2,0）：custom-styles.blade.php
   会以同选择器输出实例默认实体色，且其 <style> 在本文件之前——
   若用 html.dark-mode（0,1,1）会被其压过，导致实体色回落默认绿/蓝。
   ============================================================ */
:root.dark-mode {
  --color-primary: #c9a227;                     /* 鎏金 */
  --color-primary-light: rgba(201, 162, 39, 0.18);
  --color-link: #d4af37;                        /* 亮金链接（暗底对比 ~8:1） */
  --color-bookshelf: #8b6fc9;
  --color-book: #c9a227;
  --color-chapter: #c77d3a;
  --color-page: #52a89a;
  --color-page-draft: #9a8fb0;
  --color-positive: #6fbf73;
  --color-negative: #d06a6a;
  --color-info: #5a9bc4;
  --color-warning: #d99a52;
}

html.dark-mode { background-color: #16131f; }   /* 原 #111 → 深渊墨 */

html.dark-mode body { color: #b8ae9e; }         /* 羊皮纸灰 */

/* 深渊墨表面映射：原 #222/#333/#444/#2d2d2d → 紫墨系 */
html.dark-mode .card,
html.dark-mode .entity-list-item,
html.dark-mode .dropdown-container ul,
html.dark-mode .popup-body {
  background-color: #1f1a2e;
}
html.dark-mode .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
  background-color: #2a2340;
}

/* 表单 */
html.dark-mode .input-base {
  background-color: #241e35;
  border-color: #3a3154;
  color: #d8d0c0;
}

/* 代码与引用块 */
html.dark-mode pre,
html.dark-mode code,
html.dark-mode .CodeMirror {
  background-color: #221c31;
  border-color: #3a3154;
}
html.dark-mode blockquote {
  border-inline-start: 3px solid #c9a227;
  background-color: rgba(201, 162, 39, 0.07);
}
html.dark-mode hr { border-color: #3a3154; }

/* 标题羊皮白 */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
  color: #e6ddca;
}

/* ============================================================
   顶栏 · 典籍封皮（亮暗同色，压过 app-color 生成的样式）
   ============================================================ */
header,
.primary-background {
  background-color: #241c38 !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);  /* 鎏金描边 */
}

/* ============================================================
   按钮：鎏金底配深墨字（白字在金色上对比不足）
   仅命中默认实心按钮；.button.outline 等变体特异性更高不受影响
   ============================================================ */
.button { color: #1c1710; }