/*!
 * 字体：寒蝉圆黑体（ChillRoundF v3.0）—— 与小程序同一份、同一个地址。
 *
 * 圆体是这个产品"温润"的主要来源：字面圆、重心低，读族谱称谓不像读表格。
 * 6.17MB 的 TTF 不小，所以 font-display: swap —— 先用系统栈把字显示出来，
 * 下载完再换；断网 / file:// 拿不到就一直是系统栈，功能不受影响（小程序同样如此）。
 * 只放这一个 @font-face；换字体改这里一处。
 */
@font-face {
  font-family: "AppFont";
  src: url("https://cdn.jsdelivr.net/gh/Warren2060/ChillRound@main/ChillRoundF%20v3.0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*!
 * tokens.css —— 令牌唯一源（母题甲 · 布线图 · 温润版）
 *
 * 这个世界是一张族系布线图：人是端子、关系是走线、世代是横向走线槽、称谓总表是接线表。
 * 2026-10-23：纸从「制图纸冷灰」转**温润暖纸**（对齐小程序 2026-10-18 的拍板）——
 * 仍是纸，只是不再发蓝；圆角放宽一档，硬线减少，走线槽退为背景层次。
 * 全部可调项都收在这一个文件里，其余样式一律 var() 引用，不写死值。
 *
 * 两处暗色声明（系统偏好一处、data-theme="dark" 一处）必须逐值一致：
 * 它们没有公共选择器可用（一处包在 @media 里），只能成对写。
 * test/check.js 有一条用例逐值比对这两块，改了一处漏另一处会直接红。
 *
 * 手动「浅色」靠 html[data-theme="light"]：它让系统暗色那条规则落空，
 * 于是回到 :root 的亮色，不需要第三份调色板。
 */
:root {
  color-scheme: light;

  /* 纸：温润暖纸，不是冷灰也不是米白 */
  --paper:    #F3F0EA;
  --card:     #FFFDF9;
  --card-2:   #EEE9E1;
  --card-3:   #E2DBD0;
  --rail:     #E4DCD0;
  --rail-2:   #A79E93;

  /* 暖纸渐变：只给概览的家族主卡。不是新的通用强调色，
   * 而是把「纸」再往前推一档，让首屏先读到家族本身。 */
  --hero-1:   #FBF7EF;
  --hero-2:   #F1E6D4;
  --hero-3:   #E9D8BE;
  --hero-ink: #241B12;
  --hero-sub: #6D5C49;
  --hero-ln:  #D4BE9D;

  /* 墨 */
  --ink:      #1A1714;
  --ink-2:    #514A43;
  --ink-3:    #6F675D;

  /* 唯一强调色：制图墨水的普鲁士蓝 */
  --blue:     #1B4A8C;
  --blue-2:   #143A70;
  --blue-bg:  #E7EEF7;
  --blue-ln:  #B6C9E2;
  /* 强调色上的文字。浅色底用白，暗色底必须翻成深色才够 AA */
  --on-accent: #FFFFFF;

  /* 选中：松绿。选中态要和「视角中心 / 关系路径」的强调蓝区分开 */
  --sel:     #227A44;
  --sel-2:   #1B6236;
  --sel-bg:  #E4F1E8;
  --sel-ln:  #B4DAC1;

  /* 性别：男蓝女粉。走描边与实心色块，不走浅色文字（过不了 4.5:1） */
  --male:     #5B8DBE;
  --female:   #C77A9B;

  /* 朱笔：只用于警告与不可逆操作，出现频率 <5% */
  --rubric:     #A8342A;
  --rubric-bg:  #FBEFED;
  --rubric-ln:  #E8C9C4;

  /* 圆角：温润版比制图版放宽一档（卡片 8 / 控件 7 / 小标记 5 / 浮层 14） */
  --r-card: 10px;
  --r-ctrl: 9px;
  --r-tag:  7px;
  --r-modal: 16px;

  /* 深度：内容卡一档极轻，浮层一档柔和；平面仍靠发丝线分隔 */
  --sh-1: 0 4px 12px rgba(57, 39, 18, .07);
  --sh-2: 0 2px 6px rgba(57, 39, 18, .05);
  --sh-3: 0 14px 34px rgba(30, 22, 14, .16), 0 2px 6px rgba(30, 22, 14, .06);

  /* 缓动：快出慢收，停下来的动作更软（原来是机械收尾） */
  --ease: cubic-bezier(.25, .8, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* 时长三档：状态切换 / 元素入场 / 浮层进出 */
  --dur-1: .14s;
  --dur-2: .22s;
  --dur-3: .34s;

  /* 遮罩两档：普通浮层 / 强焦点（启动题记、层内再弹层） */
  --mask: rgba(24, 20, 16, .30);
  --mask-strong: rgba(24, 20, 16, .42);

  --font-ui: "AppFont", "PingFang SC", "苹方-简", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  /* 等宽只用于真实的元数据：年号、辈分、关系链、编号 */
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ---------- 骨架尺寸（web 两套：PC 左侧栏 / 移动底栏） ---------- */
  --bar-h: 56px;          /* 世系屏顶栏 */
  --rail-w: 88px;         /* PC 左侧导航（展开态） */
  --rail-w-collapsed: 60px; /* PC 左侧导航（收起态，只留图标） */
  --nav-h: 58px;          /* 移动端底栏 */
  --page-pad: 20px;       /* 页面左右内边距 */
  --maxw: 1240px;         /* 内容最大宽度 */
  --drawer-w: 372px;      /* PC 详情抽屉 */

  /* 字号六档 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-hero: 34px;

  /* 行高四档（排版节奏）：大字收紧、正文舒展、长文更松 */
  --lh-display: 1.24;
  --lh-tight: 1.5;
  --lh-body: 1.7;
  --lh-prose: 1.86;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #161413;
    --card:    #1F1C19;
    --card-2:  #2A2622;
    --card-3:  #35302B;
    --rail:    #3B352E;
    --rail-2:  #554D43;

    --hero-1:   #261F18;
    --hero-2:   #2E241A;
    --hero-3:   #372A1D;
    --hero-ink: #FFF7EB;
    --hero-sub: #D4C3AB;
    --hero-ln:  #6A5844;

    --ink:     #F3EEE7;
    --ink-2:   #B7AFA5;
    --ink-3:   #8F877C;

    --blue:    #7FB2F0;
    --blue-2:  #A6C6F4;
    --blue-bg: #1B2A3F;
    --blue-ln: #35506F;
    --on-accent: #101828;

    --sel:     #55B884;
    --sel-2:   #74C99C;
    --sel-bg:  #17301F;
    --sel-ln:  #315C41;

    --male:   #86AED6;
    --female: #E0A0BB;

    --rubric:    #E58D82;
    --rubric-bg: #3A211C;
    --rubric-ln: #63403A;

    --sh-1: 0 4px 12px rgba(0, 0, 0, .26);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .2);
    --sh-3: 0 28px 68px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);

    color-scheme: dark;
  }
}

/* ?theme=dark 或「我的 → 外观 → 深色」：无视系统偏好强制暗色。
 * 调色与上面的 prefers-color-scheme 块完全一致（check.js 逐值比对，改漏一处会红）。 */
html[data-theme="dark"] {
  color-scheme: dark;

  --paper:   #161413;
  --card:    #1F1C19;
  --card-2:  #2A2622;
  --card-3:  #35302B;
  --rail:    #3B352E;
  --rail-2:  #554D43;

  --hero-1:   #261F18;
  --hero-2:   #2E241A;
  --hero-3:   #372A1D;
  --hero-ink: #FFF7EB;
  --hero-sub: #D4C3AB;
  --hero-ln:  #6A5844;

  --ink:     #F3EEE7;
  --ink-2:   #B7AFA5;
  --ink-3:   #8F877C;

  --blue:    #7FB2F0;
  --blue-2:  #A6C6F4;
  --blue-bg: #1B2A3F;
  --blue-ln: #35506F;
  --on-accent: #101828;

  --sel:     #55B884;
  --sel-2:   #74C99C;
  --sel-bg:  #17301F;
  --sel-ln:  #315C41;

  --male:   #86AED6;
  --female: #E0A0BB;

  --rubric:    #E58D82;
  --rubric-bg: #3A211C;
  --rubric-ln: #63403A;

  --sh-1: 0 4px 12px rgba(0, 0, 0, .26);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .2);
  --sh-3: 0 28px 68px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
}