/* =============================================================
* xuan-theme-fortune.css — 命理子域扩展层（YAO v2.3 地基包 · 前端补完版）
* -------------------------------------------------------------
* 加载契约（B2 级联契约，必须照做）：
* 1. 在 xuan-theme.css 之后引入本文件（入口顺序）：
*
*
* 2. 本层【只新增】命理 token，【绝不重定义】xuan 既有 token；
* 因无同名变量冲突，纯靠加载顺序即可保证无覆盖歧义。
* 3. 不使用 @layer：xuan-theme.css 为「未分层（unlayered）」样式，
* 若把本文件包进 @layer yao，会被 unlayered 的 xuan 反压制（层外 > 层内）。
* 故级联稳健性依赖「入口加载顺序」而非 @layer——打包器/构建工具须保证
* xuan 先于 yao 注入（F6 修正：以契约约束替代 @layer）。
* 4. 若未来必须覆写某 xuan token，须在本文件用同名变量并确保加载在后，
* 且同步在 §十 M1 登记，禁止在组件内就地硬编码。
*
* 暗色锚点（B1 修复）：xuan 的 --x-stage-rgb 是 "42, 26, 15" 通道三元组，
* 不是合法 ，无法直接用于 color-mix。本层新增 --x-stage 完整色，
* 所有暗色派生一律从 --x-stage 走 color-mix（带 @supports 兜底）。
*
* 玄模式范围：仅卡片/区块级反转（.yao-invert），禁整页深底
* —— xuan 浅色铁律「禁用黑系背景」+ 用户决策「暂不需要独立暗色调色板」。
* 不提供整页 light/dark/system 切换（与本架构师默认相悖，但服从项目律法）。
*
* 前端补完（v2.3 审查 F1–F9）：
* F1 全局焦点环 / F3 字体 font-display / F4 罗盘 3 列移动端
* F5 reduced-motion + print 基线 / F7 seal token 拆分 / F9 暗底五行对比保险
* ============================================================= */
/* ---------- 字体加载（F3：本地字体须 font-display:swap 防 FOIT/CLS） ----------
* 注：xuan 字体族 --x-font-cn / --x-font-sans 已在基座定义并指向本地字体栈。
* 若项目改用 @font-face 自托管 Source Han Serif / KaiTi，按下方模板启用，
* 必须带 font-display:swap（U9 性能要求），否则会触发 CLS 与首屏阻塞。
* 路径替换为实际字体文件位置（相对本 CSS 或绝对 CDN-less 本地路径）。
*/
/* @font-face {
* font-family: "Source Han Serif SC";
* src: url("../fonts/SourceHanSerifSC-Regular.woff2") format("woff2");
* font-weight: 400; font-style: normal; font-display: swap;
* }
* @font-face {
* font-family: "KaiTi Local";
* src: url("../fonts/KaiTi.woff2") format("woff2");
* font-weight: 400; font-style: normal; font-display: swap;
* } */
/* ---------- 暗色锚点（修正 B1：三元组 → 完整色） ---------- */
:root {
--x-stage: rgb(42 26 15); /* = #2A1A0F，xuan --x-stage-rgb 的合法色版 */
--x-text-on-dark: #FFF8F0; /* 沿用 xuan 既有值 */
/* 暗色派生（卡片级反转用）：面=提亮12%，线=提亮24% */
--yw-stage-surface: #3C3026; /* 兜底 ≈ stage 88% + 白 12% */
--yw-stage-line: #4E4138; /* 兜底 ≈ stage 76% + 白 24% */
}
@supports (color: color-mix(in srgb, red, blue)) {
:root {
--yw-stage-surface: color-mix(in srgb, var(--x-stage) 88%, #FFF8F0);
--yw-stage-line: color-mix(in srgb, var(--x-stage) 76%, #FFF8F0);
}
}
/* ---------- 字体（S-D：楷体命理展示字体，xuan 无此 token） ---------- */
:root {
--x-font-kai: "KaiTi", "STKaiti", "Kaiti SC", "楷体", serif;
}
/* ---------- 受控阴影（放开禁令 v2.4：软投影表达层级，基于玄色锚点同色系） ----------
* 仅用低透明度 rgba(42,26,15,*) 软投影，禁止大投影 / 彩色光晕 / 拟物。
* 组件按需引用，禁止在组件内写死新 box-shadow 值（U15 token 化）。 */
:root {
--yw-shadow-sm: 0 1px 2px rgba(42,26,15,.06);
--yw-shadow-md: 0 2px 8px rgba(42,26,15,.10);
--yw-shadow-lg: 0 8px 24px rgba(42,26,15,.14);
}
/* ---------- 焦点态（v2.4.1：放开强制后补基线 · WCAG 2.4.7 不可放开） ----------
* 采用「纸底内圈 + 朱砂外圈」双层环，保证在任意底色（纸底 / 暗底 / 朱砂印方）均可见。
* 组件用 .yw-focusable 类 opt-in（不强制全局统一样式，但底线是 MUST 可见）。 */
:root {
--yw-focus-ring: 0 0 0 2px var(--x-paper), 0 0 0 4px var(--x-cinnabar); /* 浅底可见 */
--yw-focus-ring-on-dark: 0 0 0 2px var(--yw-stage-surface), 0 0 0 4px var(--x-cinnabar); /* 暗底可见 */
--yw-focus-outline: 2px solid var(--x-cinnabar);
}
.yw-focusable:focus-visible {
box-shadow: 0 0 0 2px var(--x-cinnabar);
outline: none;
border-radius: inherit;
}
.yao-invert .yw-focusable:focus-visible {
box-shadow: 0 0 0 2px var(--x-cinnabar);
}
/* ---------- 间距系统（S-A：4px 基数，消除散装数字） ---------- */
:root {
--yw-space-1: 4px;
--yw-space-2: 8px;
--yw-space-3: 12px;
--yw-space-4: 16px;
--yw-space-5: 20px;
--yw-space-6: 24px;
--yw-space-8: 32px;
--yw-space-10: 40px;
--yw-space-12: 48px;
--yw-space-16: 64px;
}
/* ---------- 字阶系统（S-A：type ramp，复用 xuan 字体族） ---------- */
:root {
--yw-text-xs: 12px; /* 神煞/纳音/卦名标签 */
--yw-text-sm: 14px; /* 次级说明 */
--yw-text-base: 16px; /* 正文 */
--yw-text-lg: 18px; /* 小节标题 */
--yw-text-xl: 20px; /* 区块标题 */
--yw-text-2xl: 24px; /* 卡标题 */
--yw-text-3xl: 30px; /* 天干（D2 主视觉） */
--yw-text-gz: 24px; /* 地支（D2 次视觉，色阶非阴阳） */
}
/* =============================================================
* 命理增量 Token（4.1 五行 · 双档：色块态 / 文字态）
* 命名规范：--yw-{行}-block / --yw-{行}-text
* 文字态已按纸底(#FFFDF9)对校 ≥4.5:1；色块不承载文字（火行标签改墨色，见组件层）
* ============================================================= */
:root {
--yw-wood-block: #4E6E60; --yw-wood-text: #3D5749; /* 木·苍青 */
--yw-fire-block: #C9402F; --yw-fire-text: #8A3730; /* 火·同朱砂 */
--yw-earth-block: #C9A24A; --yw-earth-text: #7A6231; /* 土·正黄（归正，原与金撞色） */
--yw-metal-block: #B4B7B8; --yw-metal-text: #616668; /* 金·银白（白虎色） */
--yw-water-block: #2C3946; --yw-water-text: #1E2A35; /* 水·玄青 */
/* 0 值语义：水 0 → 显「缺」，由组件层渲染，不配色块 */
/* 暗底专用五行色（F9：火 block 与 --x-cinnabar 同值，置 .yao-invert 暗底时须提亮以保对比） */
--yw-fire-block-on-dark: color-mix(in srgb, var(--yw-fire-block) 70%, #FFF8F0);
}
/* =============================================================
* 命理增量 Token（4.2 八卦方位色 · 后天文王位）
* 传统有意对应（勿当重复删）：土↔坤(#C9A24A) / 金↔乾(#B4B7B8)
* 木↔震(#4E6E60) / 火↔离(#C9402F) / 水↔坎(#2C3946)
* ============================================================= */
:root {
--yw-qian: #B4B7B8; /* 乾·银白（=金） */
--yw-dui: #DCD5C4; /* 兑·浅金灰（与土拉开） */
--yw-li: #C9402F; /* 离·朱（=火） */
--yw-zhen: #4E6E60; /* 震·苍青（=木） */
--yw-xun: #5E8C7B; /* 巽·偏青绿（原偏蓝已修） */
--yw-kan: #2C3946; /* 坎·玄青（=水） */
--yw-gen: #AC8C58; /* 艮·山石 */
--yw-kun: #C9A24A; /* 坤·正黄（=土） */
}
/* =============================================================
* 命理增量 Token（4.3 紫气与印方）
* reserved 标注：当前尚无组件消费，但为道家命理固定视觉，禁止当冗余清理（S-J）
* ============================================================= */
:root {
--yw-ziqi: #756283; /* 紫气东来 */
--yw-ziqi-deep: #5D4470; /* 深态 */
--yw-seal-radius: 2px; /* 印方：方章非圆章 */
/* F7：拆速记 token，便于 hover/态变只改色不破坏宽型 */
--yw-seal-bw: 1px;
--yw-seal-bs: solid;
--yw-seal-bc: var(--x-cinnabar);
}
/* =============================================================
* 全局基础基线（F5 reduced-motion + print；焦点环放开 v2.4）
* 焦点样式交还组件/设计系统定义，不再统一定死朱砂 outline。
* 底线（WCAG 2.4.7，不可放开）：任何可聚焦元素 MUST 保留可见焦点指示，
* 禁止 `outline:none` 后无替代。下方为可选全局兜底（默认关闭，组件自定即可覆盖）。
* ============================================================= */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
/* 放开强制：如需要全局兜底焦点样式，取消下行注释即可
outline: 2px solid var(--x-cinnabar); outline-offset: 2px; */
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
@media print {
/* U8：打印隐导航 + 防断 */
nav, [data-nav], .yw-bottom-bar, .yw-main-nav { display: none !important; }
.yw-main-card, .yao-invert, .yw-wuxing-bar, .yw-luopan { break-inside: avoid; }
.yw-main-card { box-shadow: none !important; }
}
/* =============================================================
* 玄模式 / 反转区（§4.4 · 仅卡片/区块级，禁整页深底）
* 派生自 --x-stage，不写新 hex；单容器建议 max-height 限制
* ============================================================= */
.yao-invert {
background: var(--yw-stage-surface);
color: var(--x-text-on-dark);
border: 1px solid var(--yw-stage-line);
border-radius: var(--x-r-md);
max-height: 70vh; /* 防整页化（范围约束） */
overflow: auto;
}
.yao-invert .yw-fire-label,
.yao-invert .yw-label { color: var(--x-text-on-dark); } /* 暗底上标签走浅色，不压色块 */
/* 暗底朱强调（由 --x-cinnabar 提亮派生，单一朱源） */
.yao-invert .yw-cinnabar-em { color: color-mix(in srgb, var(--x-cinnabar) 72%, #FFF8F0); }
/* F9：暗底上五行块用提亮版，避免火行同朱压暗底不可辨 */
.yao-invert .yw-wuxing-dot.yw-fire { background: var(--yw-fire-block-on-dark); }
/* =============================================================
* 组件基础层（S-G 组件↔token 映射的 CSS 落地 · 仅样式契约，不写死命理值）
* ============================================================= */
/* 五行条：24 高 + tabular-nums + 图例（色点+中文名）；色块只作图形，中文名用墨色避免火行压红 */
.yw-wuxing-bar { display:flex; gap:var(--yw-space-3); align-items:center; height:24px; font-variant-numeric:tabular-nums; }
.yw-wuxing-dot { width:8px; height:8px; border-radius:var(--x-r-full); flex:0 0 auto; }
.yw-wuxing-name { font-size:var(--yw-text-xs); color:var(--x-ink); } /* 墨色标签，不压色块（火行必瞎问题修复） */
/* 九宫罗盘：3×3，格 44；F4 移动端保持 3 列（格改 min 防溢出），不降 2 列错位 */
.yw-luopan { display:grid; grid-template-columns:repeat(3, min(44px, 28vw)); grid-template-rows:repeat(3, min(44px, 28vw)); gap:var(--yw-space-2); }
.yw-luopan .cell { width:min(44px, 28vw); height:min(44px, 28vw); display:flex; align-items:center; justify-content:center; font-size:var(--yw-text-xs); font-weight:500; font-family:var(--x-font-kai); border:1px solid var(--x-ink-3); border-radius:var(--x-r-sm); }
/* 大运条：行高 40，当前行左 4px 朱线 */
.yw-dayun-row { height:40px; display:flex; align-items:center; padding:0 var(--yw-space-4); }
.yw-dayun-row.is-current { border-left:4px solid var(--x-cinnabar); }
/* 印方：方章（F7 用拆分 token） */
.yw-seal { display:inline-flex; align-items:center; justify-content:center; padding:var(--yw-space-2) var(--yw-space-4); border-radius:var(--yw-seal-radius); background:var(--x-cinnabar); color:var(--x-paper); border:var(--yw-seal-bw) var(--yw-seal-bs) var(--yw-seal-bc); outline:1px solid var(--x-paper); outline-offset:-5px; font-family:var(--x-font-kai); }
/* 免责声明：浅红虚线框 + 非朱文字（D8） */
.yw-disclaimer { border:1px dashed var(--x-cinnabar); background:rgba(201,64,47,.06); color:var(--x-ink-2); padding:var(--yw-space-3) var(--yw-space-4); border-radius:var(--x-r-md); font-size:var(--yw-text-sm); }
/* 主卡：460 居中但小屏收口（S-E：min() 防手机溢出） */
.yw-main-card { width:min(460px, 92vw); margin:0 auto; background:var(--x-paper); border:1px solid var(--x-ink-3); border-radius:var(--x-r-lg); box-shadow:var(--x-shadow); padding:var(--yw-space-6); }
/* 720 响应式断点（U8）：五行条在窄屏换行，罗盘保持 3 列（F4） */
@media (max-width:720px) {
.yw-wuxing-bar { flex-wrap:wrap; }
}