/* ============================================================
   映丞周易 · 品牌设计令牌（Brand Tokens）
   域名：YCZY.TOP          版本：V1.0（2026-10-24）
   ------------------------------------------------------------
   用途：平台（站点 / 工作台 / 报告 / 打印件）的唯一色板与字体来源。
   规则：
   ① 界面 chrome（页头/导航/按钮/卡片）一律用本文件的品牌色与中性色；
   ② 命理**内容**着色（天干/地支/十神/藏干）仍走 engine/docs/配色标准.md
      的五行色板 —— 两套色各司其职，不混用；
   ③ 新增组件不许写死色值，一律引用这里的变量。
   ============================================================ */

:root {
  /* ---- 一、品牌色 ---- */
  --brand-indigo:        #1B3B6F;   /* 主色 · 靛青（玄天色）：页头/主按钮/标题 */
  --brand-indigo-deep:   #12294C;   /* 靛青·深：hover/按下/大标题 */
  --brand-indigo-soft:   #E8EEF6;   /* 靛青·浅底：选中态/信息底 */
  --brand-cinnabar:      #C0392B;   /* 辅色 · 朱砂（印泥）：强调/警示/关键操作 */
  --brand-cinnabar-deep: #9E2B20;   /* 朱砂·深：hover */
  --brand-cinnabar-soft: #FBEEEC;   /* 朱砂·浅底：命中/聚焦底 */
  --brand-bronze:        #9A7B2D;   /* 第三色 · 铜金：点缀/分隔/成就 */
  --brand-bronze-soft:   #F7F1E3;   /* 铜金·浅底 */

  /* ---- 二、中性色 ---- */
  --ink:                 #1F2937;   /* 墨 · 正文 */
  --ink-2:               #4B5563;   /* 次级文字 */
  --ink-3:               #8A94A6;   /* 弱化/占位/辅助说明 */
  --paper:               #F7F4EE;   /* 宣纸 · 页面底色/深底上的反白字 */
  --surface:             #FFFFFF;   /* 卡片面 */
  --surface-2:           #F4F6F9;   /* 次级面（表头/格/沉底） */
  --line:                #E3E8F0;   /* 分隔线/表格线 */
  --line-strong:         #C9D2E0;   /* 强分隔线 */

  /* ---- 三、语义色（界面状态，非命理判断）---- */
  --ok:                  #1F7A4D;   /* 通过/成立 */
  --ok-soft:             #E9F5EE;
  --warn:                #B26A00;   /* 待复核/注意 */
  --warn-soft:           #FDF6E9;
  --danger:              #C0392B;   /* 拦截/未通过（与朱砂同源）*/
  --danger-soft:         #FBEEEC;

  /* ---- 四、字体 ---- */
  --font-brand: "STKaiti", "KaiTi", "Kaiti SC", "楷体", serif;                 /* 品牌字：标志/口号/页面大标题 */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;  /* 衬线：栏目标题/报告抬头 */
  --font-sans:  "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;  /* 正文/界面 */
  --font-num:   "DengXian", "等线", "Arial", sans-serif;                        /* 数字/表格（等宽字形）*/

  /* 字号阶梯（rem 相对 16px 基准）*/
  --fs-12: .75rem;  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem;

  /* ---- 五、间距 / 圆角 / 阴影 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;  --sp-12: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(27, 59, 111, .06), 0 1px 3px rgba(27, 59, 111, .04);
  --shadow-2: 0 4px 12px rgba(27, 59, 111, .10);

  /* ---- 六、内容色板（命理内容专用，见 engine/docs/配色标准.md）----
     天干：甲乙丙丁戊己庚辛壬癸 → 木木火火土土金金水水
     十神：按日主五行取代表色
     这里只做「索引说明」，实际取色一律走 wuxing-color.js，不在此处重复定义。 */
}

/* ============================================================
   组件基元（平台统一控件，原型与实现共用）
   ============================================================ */

/* 主按钮：靛青底白字 */
.yc-btn {
  font: 600 var(--fs-14)/1 var(--font-sans);
  color: #fff; background: var(--brand-indigo);
  border: 1px solid var(--brand-indigo); border-radius: var(--r-md);
  padding: 9px 18px; cursor: pointer;
}
.yc-btn:hover { background: var(--brand-indigo-deep); }
/* 次按钮：靛青描边 */
.yc-btn.ghost { color: var(--brand-indigo); background: transparent; }
.yc-btn.ghost:hover { background: var(--brand-indigo-soft); }
/* 关键操作：朱砂（仅用于「定版/拦截/删除」等少数动作）*/
.yc-btn.key { background: var(--brand-cinnabar); border-color: var(--brand-cinnabar); }
.yc-btn.key:hover { background: var(--brand-cinnabar-deep); }

/* 页头：靛青底 + 反白标志 */
.yc-topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--brand-indigo); color: var(--paper);
  padding: var(--sp-3) var(--sp-6);
}
.yc-topbar .yc-brand { font-family: var(--font-brand); font-size: var(--fs-22); letter-spacing: .04em; }

/* 卡片 */
.yc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-5);
}

/* 导航分段（角色切换/页签）*/
.yc-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px; }
.yc-seg button {
  font: 600 var(--fs-13)/1 var(--font-sans); color: var(--ink-2);
  background: transparent; border: 0; border-radius: var(--r-full); padding: 7px 16px; cursor: pointer;
}
.yc-seg button.is-on { background: var(--brand-indigo); color: #fff; }

/* 徽标：朱砂=命中/关键，靛青=信息，铜金=成就 */
.yc-badge { font: 600 var(--fs-12)/1 var(--font-sans); padding: 4px 10px; border-radius: var(--r-full); }
.yc-badge.hit  { color: var(--brand-cinnabar); background: var(--brand-cinnabar-soft); }
.yc-badge.info { color: var(--brand-indigo);  background: var(--brand-indigo-soft); }
.yc-badge.gold { color: var(--brand-bronze);   background: var(--brand-bronze-soft); }