/* ==========================================================================
   宣纸水墨 · Gramps Web 主题覆盖
   qianniu-theme.css  v1  2026-08-21
   目标：Gramps Web 26.7.1 (Gramps 6.0.8 / API 3.19.0)

   设计依据：04_视觉设计系统_宣纸水墨.md
   探测依据：design/令牌探测记录.md

   【本文件为什么这样写】
   1. 全文不加 @layer。上游 Web Awesome 把令牌定义在 @layer wa-theme /
      @layer wa-color-palette 内，按 CSS 级联层规则，无层样式恒胜有层样式。
      上游 global.css 自己就在用同一手法（见其第 19-31 行注释）。
      => 因此 --wa-* 与 --grampsjs-* 的覆盖不需要 !important。
   2. 唯一使用 !important 的是 §3 的 --md-sys-color-*。这些值由主 bundle 用
      element.style.setProperty() 写在 <html> 行内样式上，且浅色模式下被硬编码
      为 #ffffff。覆盖行内样式在 CSS 规范内只有 !important 一条路，不是 hack。
   3. 明暗切换靠 <html> 的 data-theme 属性，不是 prefers-color-scheme。
   ========================================================================== */


/* ==========================================================================
   §1  调色板原子值
   ========================================================================== */

:root {
  /* 纸 */
  --qn-paper:            #F7F2E8;
  --qn-paper-raised:     #FFFDF8;
  --qn-paper-lowered:    #EDE4D3;
  --qn-rule:             #DCD1BE;

  /* 墨 */
  --qn-ink:              #2E2925;
  --qn-ink-quiet:        #5B534B;
  --qn-ink-faint:        #776C60;  /* 占位文字，AA 4.59:1 */
  --qn-ink-ghost:        #8A7F73;  /* 装饰/禁用，不用于文字 */

  /* 朱砂 */
  --qn-cinnabar:         #A64B3C;
  --qn-cinnabar-deep:    #8E3D30;
  --qn-cinnabar-soft:    #C9705F;
  --qn-cinnabar-wash:    #F3E0DB;

  /* 辅助 */
  --qn-slate:            #3F5A63;
  --qn-jade:             #5F7250;  /* 文字用，AA 4.69:1 */
  --qn-jade-fill:        #6B7F5C;  /* 填充用，不用于文字 */
  --qn-amber:            #8F6529;  /* 文字用，AA 4.63:1 */
  --qn-amber-fill:       #B8873E;  /* 填充用，不用于文字 */

  /* 字体
     展示位用系统 CJK 衬线栈（0 字节、无 404 风险）：
       macOS/iOS → Songti SC / STSong
       Windows   → Source Han Serif SC / Noto Serif CJK SC / SimSun
       Android   → Noto Serif CJK SC
     自托管子集方案见 05 §2.3，待有 fonttools 环境时再切换。 */
  --qn-font-display: Georgia, "Songti SC", "STSong", "Source Han Serif SC",
                     "Noto Serif CJK SC", "Noto Serif SC", SimSun, serif;
  --qn-font-body: -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
                  "Helvetica Neue", Arial, sans-serif;
}

/* 暗色原子值改写。data-theme 由 Gramps 前端写在 <html> 上。 */
:root[data-theme='dark'] {
  --qn-paper:            #1C1917;
  --qn-paper-raised:     #262220;
  --qn-paper-lowered:    #14120F;
  --qn-rule:             #3A342E;

  --qn-ink:              #EDE6DA;
  --qn-ink-quiet:        #B5AC9E;
  --qn-ink-faint:        #7D7568;
  --qn-ink-ghost:        #5E574D;

  --qn-cinnabar:         #C9705F;
  --qn-cinnabar-deep:    #DA8878;
  --qn-cinnabar-soft:    #C9705F;
  --qn-cinnabar-wash:    #3A2622;

  --qn-slate:            #8FB0BC;
  --qn-jade:             #96AD84;
  --qn-jade-fill:        #6B7F5C;
  --qn-amber:            #D6A860;
  --qn-amber-fill:       #B8873E;
}


/* ==========================================================================
   §3  Material 3 系统色覆盖  【本文件唯一使用 !important 的区块】
   理由：主 bundle 用 element.style.setProperty() 把这些写在 <html> 行内样式，
        且浅色模式下 7 个纸面令牌被硬编码为 #ffffff。
        覆盖行内样式在 CSS 规范内只有 !important 一条路。
   ========================================================================== */

:root {
  /* —— 纸面：夺回被硬编码的纯白 —— */
  --md-sys-color-background:                var(--qn-paper)         !important;
  --md-sys-color-surface:                   var(--qn-paper)         !important;
  --md-sys-color-surface-container-lowest:  var(--qn-paper-raised)  !important;
  --md-sys-color-surface-container-low:     var(--qn-paper-raised)  !important;
  --md-sys-color-surface-container:         var(--qn-paper)         !important;
  --md-sys-color-surface-container-high:    var(--qn-paper-lowered) !important;
  --md-sys-color-surface-container-highest: var(--qn-paper-lowered) !important;
  --md-sys-color-surface-variant:           var(--qn-paper-lowered) !important;

  /* —— 中性色：上游用 chroma=0 生成纯灰，这里重新着色 —— */
  --md-sys-color-outline:                   var(--qn-ink-ghost)     !important;
  --md-sys-color-outline-variant:           var(--qn-rule)          !important;
  --md-sys-color-on-surface:                var(--qn-ink)           !important;
  --md-sys-color-on-background:             var(--qn-ink)           !important;
  --md-sys-color-on-surface-variant:        var(--qn-ink-quiet)     !important;

  /* —— 品牌色 —— */
  --md-sys-color-primary:                   var(--qn-cinnabar)      !important;
  --md-sys-color-on-primary:                #FFFFFF                 !important;
  --md-sys-color-primary-container:         var(--qn-cinnabar-wash) !important;
  --md-sys-color-on-primary-container:      var(--qn-cinnabar-deep) !important;
  --md-sys-color-secondary:                 var(--qn-slate)         !important;
  --md-sys-color-on-secondary:              #FFFFFF                 !important;
}


/* ==========================================================================
   §4  Web Awesome 令牌  —— 无 !important，靠无层胜有层
   ========================================================================== */

:root,
.wa-theme-default,
.wa-light {
  /* 颜色 */
  --wa-color-surface-default:      var(--qn-paper);
  --wa-color-surface-raised:       var(--qn-paper-raised);
  --wa-color-surface-lowered:      var(--qn-paper-lowered);
  --wa-color-surface-border:       var(--qn-rule);

  --wa-color-text-normal:          var(--qn-ink);
  --wa-color-text-quiet:           var(--qn-ink-quiet);
  --wa-color-text-link:            var(--qn-slate);

  --wa-color-brand-fill-quiet:     var(--qn-cinnabar-wash);
  --wa-color-brand-fill-normal:    var(--qn-cinnabar-wash);
  --wa-color-brand-fill-loud:      var(--qn-cinnabar);
  --wa-color-brand-border-quiet:   var(--qn-rule);
  --wa-color-brand-border-normal:  var(--qn-cinnabar-soft);
  --wa-color-brand-border-loud:    var(--qn-cinnabar);
  --wa-color-brand-on-quiet:       var(--qn-cinnabar-deep);
  --wa-color-brand-on-normal:      var(--qn-cinnabar-deep);
  --wa-color-brand-on-loud:        #FFFFFF;

  --wa-color-neutral-fill-quiet:   var(--qn-paper-lowered);
  --wa-color-neutral-fill-normal:  var(--qn-paper-lowered);
  --wa-color-neutral-border-quiet: var(--qn-rule);
  --wa-color-neutral-border-normal:var(--qn-rule);
  --wa-color-neutral-on-quiet:     var(--qn-ink-quiet);
  --wa-color-neutral-on-normal:    var(--qn-ink);

  --wa-color-focus:                var(--qn-cinnabar);

  /* 排版 */
  --wa-font-family-body:           var(--qn-font-body);
  --wa-font-family-heading:        var(--qn-font-display);
  --wa-font-family-longform:       var(--qn-font-display);
  --wa-font-weight-body:           400;
  --wa-font-weight-heading:        600;
  --wa-line-height-normal:         1.7;   /* 中文正文需要更松的行距 */

  /* 形状与间距 */
  --wa-border-radius-scale:        0.85;  /* 挺括，不圆润 */
  --wa-space-scale:                1.05;  /* 稀疏数据需要留白 */
  --wa-shadow-blur-scale:          0.5;   /* 层次靠纸色差与发丝线，不靠阴影 */
}

.wa-dark,
:root[data-theme='dark'] {
  --wa-color-surface-default:      var(--qn-paper);
  --wa-color-surface-raised:       var(--qn-paper-raised);
  --wa-color-surface-lowered:      var(--qn-paper-lowered);
  --wa-color-surface-border:       var(--qn-rule);
  --wa-color-text-normal:          var(--qn-ink);
  --wa-color-text-quiet:           var(--qn-ink-quiet);
  --wa-color-text-link:            var(--qn-slate);
  --wa-color-brand-fill-loud:      var(--qn-cinnabar);
  --wa-color-brand-on-loud:        #1C1917;
}


/* ==========================================================================
   §5  Gramps 自有令牌  —— 无 !important
   ========================================================================== */

:root {
  /* 顶栏：墨色。宣纸正文 + 墨色顶栏 = 家谱感的主要来源。 */
  --grampsjs-top-app-bar-background-color: var(--qn-ink);
  --grampsjs-top-app-bar-font-color:       var(--qn-paper);

  /* 链接 */
  --grampsjs-color-link-font:  var(--qn-slate);
  --grampsjs-color-link-hover: var(--qn-cinnabar-deep);

  /* 抽屉与图标 */
  --grampsjs-color-drawer-text:   var(--qn-ink-quiet);
  --grampsjs-color-icon-default:  var(--qn-ink-ghost);
  --grampsjs-color-icon-selected: var(--qn-cinnabar);

  /* 骨架屏：改成纸色系，默认灰在暖底上很脏 */
  --grampsjs-color-skeleton-background: var(--qn-paper-lowered);
  --grampsjs-color-skeleton-base:       var(--qn-paper-lowered);
  --grampsjs-color-skeleton-shine:      var(--qn-paper-raised);

  /* 提示条 */
  --grampsjs-alert-warn-font-color:    var(--qn-amber);
  --grampsjs-alert-success-font-color: var(--qn-jade);

  /* 笔记与地图 */
  --grampsjs-note-color:       var(--qn-ink);
  --grampsjs-map-marker-color: var(--qn-cinnabar);

  /* 家谱图 */
  --grampsjs-connection-chart-person-box: var(--qn-paper-lowered);
  --grampsjs-color-ytree-expand-background: var(--qn-paper-lowered);
  --grampsjs-color-ytree-expand-font:       var(--qn-ink-quiet);
  --grampsjs-color-ytree-default-person-icon-background: var(--qn-ink-ghost);

  /* 性别配色：替换上游现代蓝/粉。
     差异靠明度与冷暖，灰度打印与色觉障碍下同样可辨。 */
  --color-boy:     #6E8794;
  --color-girl:    #B08574;
  --color-unknown: #A8A29A;
  --color-other:   #8B8098;
}


/* ==========================================================================
   §6  组件细节
   仅使用上游已暴露的令牌与全局元素选择器。
   Shadow DOM 内部未暴露 ::part() 的样式不在此处尝试。
   ========================================================================== */

/* 页面底色兜底：global.css 的 html/body 用 --md-sys-color-background，
   §3 已覆盖；此处再显式声明一次，防止首帧闪白。 */
html,
body {
  background-color: var(--qn-paper);
  font-family: var(--qn-font-body);
}

/* 中文标题字距：过紧会显得局促 */
h1, h2, h3 {
  font-family: var(--qn-font-display);
  letter-spacing: 0.02em;
}

/* 选中文本 */
::selection {
  background: var(--qn-cinnabar-wash);
  color: var(--qn-cinnabar-deep);
}

/* 滚动条 */
* {
  scrollbar-color: var(--qn-ink-ghost) var(--qn-paper-lowered);
  scrollbar-width: thin;
}