/* 设计令牌：颜色 / 字号 / 间距 / 圆角 / 阴影
 * 前后端分离下，前端只依赖这套令牌，换肤不影响业务代码。
 *
 * ============================================================================
 * 【视觉模式两层结构】V1.7 新增
 * ----------------------------------------------------------------------------
 * 本文件是**唯一**的视觉来源，两种模式互斥，都只改这里的变量，业务代码零改动：
 *
 *   1) 高级前端模式（默认）= :root 里的莫兰迪色系 + 少量玻璃效果
 *      没有 body 上的额外 class，就是"什么都不加"的状态，因此：
 *      · 旧的 HTML / 截图 / 早期版本行为天然兼容
 *      · 万一模式 class 没加上，页面仍是可读的高级模式，不会掉进"无样式"
 *
 *   2) 简易模式 = body.simple-mode 覆盖（见 base.css 末尾那一段）
 *      保留原有高对比、大字号的适老化取值，**不套莫兰迪**。
 *
 * 为什么莫兰迪不放在 body.visual-advanced 下？
 *   默认态少一层 class，可以避免"JS 出问题时整个界面失去配色"这类单点故障。
 *
 * 【莫兰迪取值纪律】（改色时务必遵守，否则会失掉"高级灰"或伤到可读性）
 *   · 只有"背景 / 边线 / 面板"允许低饱和（饱和度约 6%~18%、明度 60%~88%）
 *   · **正文与次要文字不许跟着降对比**，必须保持 WCAG AA（正文 ≥ 4.5:1）
 *   · 颜色必须带色相锚点，禁止用 hsl(0,0%,x%) 的纯灰 —— 纯灰和带色相的灰并排会"跳"
 *   · 状态色（成功/警告/危险）只小幅降饱和，可辨识度优先于美观
 *   · 血统语义色（父/母/本鸽/公/母）是领域信息，只做统一化，不改色相
 * ========================================================================== */
:root {
  /* ---------- 底色与面板（莫兰迪：带冷色相的灰，非纯灰） ---------- */
  --c-bg: #eef1f3;            /* 页面底：hsl(200, 12%, 94%) 雾灰 */
  --c-panel: #fbfcfc;         /* 卡片面：近白，微冷 */
  --c-panel-2: #f5f7f8;       /* 次级面：hsl(200, 10%, 96%) */
  --c-line: #d3d9dd;          /* 描边：减弱"硬线"感 */
  --c-line-strong: #b3bdc4;

  /* ---------- 文字（对比度不许降，保证长文阅读） ---------- */
  --c-text: #1b2329;          /* 对 --c-bg 对比度约 14.0:1 */
  --c-text-2: #38454e;        /* 约 9.6:1 */
  --c-muted: #55636d;         /* 约 6.0:1 */
  --c-faint: #67757f;         /* 约 4.6:1 —— 见下方"最弱文字"说明 */

  /* ---------- 主色：与主题模块默认设置保持同一组取值 ---------- */
  --c-accent: #38668a;        /* 与主题模块的默认雾蓝一致；重置后不跳色 */
  --c-accent-hover: #2f5674;
  --c-accent-soft: #e7eef3;

  /* ---------- 状态色：仅小幅降饱和，保住语义辨识 ---------- */
  --c-ok: #3f7355;
  --c-ok-soft: #e6efe9;
  --c-warn: #7f6129;          /* 比直觉上的莫兰迪黄棕再深一档，否则压不住浅底 */
  --c-warn-soft: #f7f1e3;
  --c-danger: #9c4a45;
  --c-danger-soft: #f6e9e8;
  --c-info-soft: #eef3f6;

  /* ---------- 血统语义色：色相不动，只把饱和度压到莫兰迪区间 ---------- */
  --c-father: #e7edf3;
  --c-father-line: #b3c4d3;
  --c-mother: #f4e9ee;
  --c-mother-line: #d8bcc8;
  --c-self: #e8efe9;
  --c-self-line: #b0c6b6;
  --c-male: #e6edf4;
  --c-male-line: #a9bfd4;
  --c-female: #f4e9ee;
  --c-female-line: #d3b4c2;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* ---------- 阴影：改为中性灰、透明度更低（莫兰迪"阴影不说出来"） ---------- */
  --shadow-sm: 0 2px 3px rgba(43, 51, 58, .025), 0 6px 22px rgba(43, 51, 58, .035);
  --shadow: 0 4px 6px rgba(43, 51, 58, .035), 0 14px 32px rgba(43, 51, 58, .07);
  --shadow-lg: 0 8px 16px rgba(43, 51, 58, .06), 0 24px 64px rgba(43, 51, 58, .14);
  --c-aura: rgba(56, 102, 138, .13);
  --c-aura-soft: rgba(56, 102, 138, .05);
  --focus-ring: 0 0 0 3px var(--c-accent-soft);

  /* ---------- 玻璃（L1 基础毛玻璃 / L2 边缘羽化） ----------
   * 只在"背后有内容流动"的位置使用：顶栏、账户弹层、登录面板。
   * 卡片/表格/血统图**禁止**使用 —— 那是长文阅读区，且性能代价最高。
   * --glass-blur 默认 14px，与主题模块的「标准」档一致；
   * 更高档位仅用于用户明确选择后的装饰性表面。
   *
   * ⚠️ 这里的取值是**不透明兜底**，不是最终效果。
   * 真正的半透明值写在下方 @supports 块里，只有浏览器确认支持
   * backdrop-filter 时才生效。这样一来：
   *   · 不支持 → 走这里的不透明值，界面是"实色面板"，可用、不破损
   *   · 支持   → 走 @supports 里的半透明值，玻璃生效
   * 若把半透明值直接写在这里，老环境会停在"半透明但没有模糊"的破损态。 */
  --glass-blur: 14px;
  --glass-sat: 170%;          /* 与主题模块默认标准档一致 */
  --glass-bg: #fbfcfc;               /* 兜底：等于卡片面，不透明 */
  --glass-bg-strong: #fbfcfc;        /* 兜底：同上 */
  --glass-border: rgba(255, 255, 255, .58);
  --glass-edge: rgba(179, 189, 196, .55);
  --glass-shadow: 0 12px 30px rgba(43, 51, 58, .11);

  --sidebar-w: 224px;
  --topbar-h: 76px;
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui,
          -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

/* ---------------------------------------------------------------------------
 * 玻璃效果的**能力与偏好闸门**
 * ---------------------------------------------------------------------------
 * 只有同时满足下面两点，玻璃变量才会被替换成真实半透明值：
 *   1) 浏览器支持 backdrop-filter（用 @supports 探测，含 -webkit- 前缀）
 *   2) 用户没有要求"减少透明度"（prefers-reduced-transparency: reduce）
 *
 * 不满足时，:root 里给的 --glass-bg 等本身就是**不透明的近白色**，
 * 所以整套界面会自动退化成"实色面板"，不存在低对比的破损态。
 *
 * 注：prefers-reduced-transparency 目前支持面仍不完整（部分浏览器未实现），
 * 因此它只作为"增强"，真正的安全底线是上面那条"默认值即兜底"的设计。
 * ------------------------------------------------------------------------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    /* 只有走到这里，才把"实色兜底"换成真正的半透明玻璃。
       saturate 必须同时给出：只做 blur 会把背后的颜色平均掉，
       出来是"脏塑料"而不是"高级霜面"。 */
    --glass-bg: rgba(251, 252, 252, .62);
    --glass-bg-strong: rgba(251, 252, 252, .78);   /* L2 弹层字多，需要更实的底 */
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    /* 用户明确要求"减少透明度"：退回实色并停掉模糊。
       注意这个媒体特性目前支持面仍不完整，所以它只是"增强"，
       真正的安全底线是上面那条"@supports 之外即实色兜底"。 */
    --glass-bg: #fbfcfc;
    --glass-bg-strong: #fbfcfc;
    --glass-blur: 0px;
  }
}

/* ---------------------------------------------------------------------------
 * 简易模式：**只**做视觉令牌覆盖，不引入任何玻璃
 * ---------------------------------------------------------------------------
 * 这一段与"高级模式"是严格互斥的两套值。简易模式的目标是"看得清、点得准"，
 * 与莫兰迪低对比、玻璃半透明的方向正好相反，因此这里：
 *   · 底色回纯白、文字回高对比（对比度 ≥ 12:1）
 *   · 字号放大、间距放大（适老化）
 *   · 玻璃变量全部还原为**不透明**，等于把玻璃关掉
 * 其余大字、大热区、焦点框等非颜色规则放在 base.css 末尾，
 * 以便"颜色"与"尺寸"两类改动能分别维护。
 * ------------------------------------------------------------------------- */
body.simple-mode {
  --c-bg: #ffffff;
  --c-panel: #ffffff;
  --c-panel-2: #f3f6fb;
  --c-line: #aebaca;
  --c-line-strong: #7f90a5;
  --c-text: #101820;
  --c-text-2: #172333;
  --c-muted: #34465d;
  --c-faint: #465970;
  --c-accent: #064a92;
  --c-accent-hover: #033a73;
  --c-accent-soft: #dcecff;
  --c-ok: #146c30;
  --c-ok-soft: #e3f3e7;
  --c-warn: #8a5c00;
  --c-warn-soft: #fff6e0;
  --c-danger: #a51c12;
  --c-danger-soft: #fdeae8;
  --c-info-soft: #e6f0ff;
  --c-father: #e5eefc;
  --c-father-line: #a8c3f0;
  --c-mother: #fce8f1;
  --c-mother-line: #f0b4d0;
  --c-self: #e6f5ea;
  --c-self-line: #9ad0a9;
  --c-male: #e5eefc;
  --c-male-line: #93b7e6;
  --c-female: #fce8f1;
  --c-female-line: #e5a5c3;
  --fs-xs: 15px;
  --fs-sm: 16px;
  --fs: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 28px;

  /* 简易模式 = 无玻璃：半透明全部收敛为实色 */
  --glass-blur: 0px;
  --glass-sat: 100%;
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-border: var(--c-line);
  --glass-edge: var(--c-line);
  --glass-shadow: var(--shadow-sm);
}