/* ============================================================
   又见 · Design Tokens（全局唯一变量来源）
   ------------------------------------------------------------
   本文件是所有页面 / 组件取色、取尺度、取字号的唯一来源。
   规则：
   1. 五行色（--wood/--fire/--earth/--metal/--water）只允许用于
      天干、地支、五行统计、专业数据展示。
   2. 品牌金（--brand-gold*）只允许用于：当前选中 / 保存 / 重要状态 / 局部强调线。
   3. 禁止品牌金与五行土色（--earth）混用。
   4. 页面背景统一 --bg-page，卡片背景统一 --bg-card，禁止纯黑，深色统一 --ink。
   5. 圆角只保留三档：--radius-sm(10) / --radius-input(14) / --radius-lg(20)。圆形用 --radius-round(50%)。
   ============================================================ */
:root{
  /* —— 背景 / 表面 —— */
  --bg-page:   #F6F4EF;
  --bg-card:   #FFFFFF;
  --bg-soft:   #F1EEE7;
  --bg-input:  #FCFCFB;               /* 输入类控件底色（近白，弱区分） */

  /* —— 文字 —— */
  --text-primary:   #26231F;
  --text-secondary: #6F6A62;
  --text-tertiary:  #8A857C;
  --text-disabled:  #C9C4BC;
  --text-inverse:   #FFFFFF;          /* 深色/品牌底上的文字 */
  --text-inverse-dim: rgba(255,255,255,0.72);

  /* —— 描边 / 分隔 —— */
  --border:  #E5E0D7;
  --divider: #ECE8E1;

  /* —— 品牌金（仅：当前选中 / 保存 / 重要状态 / 局部强调线）—— */
  --brand-gold:       #B58A1D;
  --brand-gold-hover: #A77D16;
  --brand-gold-soft:  #F4EEDC;        /* 极淡金：高亮底色 */
  --brand-gold-line:  rgba(181,138,29,0.40); /* 淡金描边 */

  /* —— 墨（主按钮 / 强调背景 / 深色统一）—— */
  --ink:       #2B2723;
  --ink-hover: #1F1C19;

  /* —— 五行（命理语义色：仅天干/地支/五行统计/专业数据展示）—— */
  --wood:  #3FA273;
  --fire:  #DE6666;
  --earth: #C49A47;
  --metal: #B09A75;
  --water: #438FD0;
  /* 五行淡色（背景块 / 图例底） */
  --wood-soft:  rgba(63,162,115,0.10);
  --fire-soft:  rgba(222,102,102,0.10);
  --earth-soft: rgba(196,154,71,0.10);
  --metal-soft: rgba(176,154,117,0.10);
  --water-soft: rgba(67,143,208,0.10);

  /* —— 状态 —— */
  --success: #4F8B68;
  --warning: #C78C37;
  --danger:  #C95D5D;

  /* —— 奇门语义（空亡）—— */
  --kong-line: #9DB4C6;
  --kong-bg:   #F3F7FB;

  /* —— 叠加层 —— */
  --surface-blur:  rgba(255,255,255,0.92); /* 毛玻璃条底色 */
  --overlay-press: rgba(38,35,31,0.06);    /* 轻按压反馈 */
  --overlay-mask:  rgba(30,28,25,0.40);    /* 弹窗遮罩 */

  /* —— 底部导航 —— */
  --nav-bg:        rgba(255,255,255,0.96); /* 底导背景（略实于毛玻璃条） */
  --nav-divider:   #ECE8E1;                /* 底导顶部 1px 分割线 */
  --nav-inactive:  #8A857C;                /* 底导未选中图标/文字 */
  --nav-height:    56px;                    /* 底导内容高度（不含安全区） */

  /* —— 圆角（仅三档 + 圆形）—— */
  --radius-sm:    10px;   /* 小控件 */
  --radius-input: 14px;   /* 输入框 / 按钮 */
  --radius-lg:    20px;   /* 大卡片 / 弹窗 */
  --radius-round: 50%;    /* 圆形（头像 / 罗盘等） */

  /* —— 间距 scale（4pt 基准，保留向后兼容）—— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  /* —— 语义间距（来自规范）—— */
  --space-page:          20px;  /* 页面左右边距 */
  --space-card:          20px;  /* 卡片内边距 */
  --space-module:        24px;  /* 模块间距 */
  --space-form:          20px;  /* 表单项间距 */
  --space-tag:            8px;  /* 标签间距 */
  --space-bottom-reserve:96px;  /* 底部导航以上预留 */

  /* —— 字号（来自规范）—— */
  --fs-page:  24px;  /* 页面标题 */
  --fs-module:18px;  /* 模块标题 */
  --fs-card:  16px;  /* 卡片标题 */
  --fs-body:  15px;  /* 正文 */
  --fs-aux:   13px;  /* 辅助文字 */
  --fs-label: 12px;  /* 标签文字 */
  --fs-stem:  28px;  /* 干支重点（28–34 下限） */
  --fs-stem-lg:34px; /* 干支重点（上限） */

  /* —— 字重 —— */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* —— 阴影（仅两档）—— */
  --shadow-card:  0 1px 3px rgba(31, 27, 22, 0.04);   /* 普通卡片 */
  --shadow-modal: 0 -8px 32px rgba(31, 27, 22, 0.12); /* 弹窗 */

  /* —— 层级 —— */
  --z-nav:   100;
  --z-modal: 200;

  /* —— 动效 —— */
  --dur-fast: .15s;
  --dur-base: .25s;
  --ease:     ease;

  /* —— 布局 —— */
  --app-max: 480px;

  /* —— 字体族（规范栈）—— */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ==========================================================
     向后兼容别名（旧变量名 → 新 Token）
     存量样式继续可用；新页面请直接使用上方语义 Token。
     ========================================================== */
  --bg:    var(--bg-page);
  --card:  var(--bg-card);
  --gold:  var(--brand-gold);
  --muted: var(--text-secondary);
  --line:  var(--border);
  --wx-木: var(--wood);
  --wx-火: var(--fire);
  --wx-土: var(--earth);
  --wx-金: var(--metal);
  --wx-水: var(--water);
}