/**
 * 天机命理 Design Tokens (tokens.css)
 * 国风现代标准体系 v2：宣纸白底 + 黛青墨色 + 朱砂红重点 + 收敛雅致金
 * —— 视觉减负：收敛状态色/强调色，嵌套区块改用浅色块替代边框
 */
:root {
  /* 基础色彩变量（收敛后的统一色板） */
  --bg: #F9F7F2;            /* 宣纸白 / 暖灰米 —— 主背景 */
  --card: #FFFFFF;          /* 卡片表面 */
  --bg-subtle: #F3F0EA;     /* 嵌套区块色差（替代内层边框） */
  --line: #ECE8E1;          /* 分隔线（更淡，减切割感） */
  --card-border: #E8E3DA;   /* 卡片描边（更淡） */
  --ink: #2C3E50;           /* 黛青墨色 —— 主文字/主品牌 */
  --ink-soft: #666666;      /* 次级文字 */
  --ink-subtle: #999999;    /* 辅助说明 */

  --accent: #B8893A;        /* 收敛的雅致金（替代刺眼明黄） */
  --accent-2: #C9A05A;
  --accent-deep: #2C3E50;
  --brand: #C24F3D;         /* 朱砂红 —— 重点/强调 */
  --brand-2: #A8363F;
  --brand-light: rgba(194, 79, 61, 0.08);
  --accent-light: rgba(184, 137, 58, 0.10);

  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-surface-subtle: var(--bg-subtle);
  --color-surface-hover: rgba(44, 62, 80, 0.04);
  --color-surface-active: rgba(44, 62, 80, 0.07);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-subtle: var(--ink-subtle);
  --color-line: var(--line);
  --color-line-soft: var(--line);
  --color-border: var(--card-border);

  /* 品牌色系 */
  --color-brand: var(--brand);
  --color-brand-deep: var(--brand-2);
  --color-brand-light: var(--brand-light);
  --color-accent: var(--accent);
  --color-accent-deep: var(--accent-deep);
  --color-accent-light: var(--accent-light);
  --color-accent-2: var(--accent-2);

  /* 状态反馈色（收敛，仅保留必要语义） */
  --color-success: #3A8A4E;
  --color-success-bg: #EDF7EF;
  --color-warning: #B8893A;
  --color-warning-bg: #FBF4E9;
  --color-error: #C24F3D;
  --color-error-bg: #FBEDEA;
  --color-info: #2C3E50;
  --color-info-bg: #EEF1F5;

  /* 按钮语义层：颜色表达操作优先级，而不是装饰 */
  --btn-primary: #2C5E6E;
  --btn-primary-hover: #234B59;
  --btn-secondary: #B8893A;
  --btn-secondary-hover: #986F2B;
  --btn-tertiary-bg: #F7F3EA;
  --btn-tertiary-border: #D6C9B6;
  --btn-tertiary-text: #5D5140;
  --btn-success: #52733D;
  --btn-success-hover: #3F602F;
  --btn-warning: #B8781E;
  --btn-warning-bg: #FFF7E6;
  --btn-danger: #A33B32;
  --btn-danger-bg: #FFF4F1;
  --btn-disabled-bg: #D9D4CA;
  --btn-disabled-text: #817967;

  /* 五行标准配色（命理语义，保留） */
  --wu-mu: #4E7B5C;
  --wu-huo: #C24F3D;
  --wu-tu: #B8893A;
  --wu-jin: #82929E;
  --wu-shui: #2B5876;
  --color-wu-mu: var(--wu-mu);
  --color-wu-huo: var(--wu-huo);
  --color-wu-tu: var(--wu-tu);
  --color-wu-jin: var(--wu-jin);
  --color-wu-shui: var(--wu-shui);

  /* 双字体排印体系：标题衬线（国风雅致），正文无衬线（现代通透） */
  --font-title: "Noto Serif SC", "Source Han Serif SC", "思源宋体", "Songti SC", "STSong", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Inter", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  /* —— 区块级字体变量（后台主题可逐块覆盖） —— */
  --f-title: var(--font-title);          /* 标题/品牌/卦象：默认衬线宋体 */
  --f-title-size: var(--fs-display, 19px);
  --f-title-color: var(--ink, #2C3E50);
  --f-body: var(--font-body);            /* 正文/数据：默认无衬线 */
  --f-body-size: var(--fs-body, 13px);
  --f-body-color: var(--ink-soft, #666);
  --f-score: var(--font-title);          /* 分数/断语：衬线，凸显命理感 */
  --f-score-size: 23px;
  --f-score-color: var(--brand, #C24F3D);
  --f-tag: var(--font-body);              /* 宜忌标签：无衬线，清晰 */
  --f-tag-size: var(--fs-body, 13px);
  --f-tag-color: var(--ink-soft, #666);
  --f-btn: var(--font-body);              /* 按钮 */
  --f-btn-size: 14px;
  --font-family: var(--font-body);
  --font-family-serif: var(--font-title);

  /* 3 级字阶（压缩字重，建立视觉锚点） */
  --fs-display: 19px;   /* 一级大标题 */
  --fs-title: 15px;     /* 二级小标题/标签 */
  --fs-body: 13px;      /* 正文/副文本 */
  --fw-display: 600;    /* Semi-bold */
  --fw-title: 500;      /* Medium */
  --fw-body: 400;       /* Regular */

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.72;   /* 中文正文 1.6–1.75 */

  /* 间距与尺寸 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 圆角（统一 12/16，去掉琐碎小圆角） */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-card: 16px;
  --radius-full: 9999px;

  /* 阴影（更轻） */
  --shadow-sm: 0 1px 2px rgba(44, 62, 80, 0.04);
  --shadow-md: 0 4px 14px rgba(44, 62, 80, 0.06);
  --shadow-lg: 0 8px 24px rgba(44, 62, 80, 0.08);
  --shadow-drawer: 0 -4px 20px rgba(44, 62, 80, 0.10);

  /* 移动端与交互标准 */
  --touch-target: 44px;
  --touch-target-lg: 48px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --bottom-nav-height: 60px;
  --top-bar-height: 52px;
  --z-sticky: 100;
  --z-nav: 500;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}