/* ============================================================
   渡鸦攻略 · 设计系统 · Token 层
   design-system/tokens.css

   本文件只定义「设计变量」，不写任何选择器样式。
   目标是让全站的颜色 / 间距 / 圆角 / 字号 / 阴影 / 层级
   都有唯一来源，替代目前散落在 35 个 CSS 文件里的硬编码。

   接入方式：在页面 </head> 之前、theme-light.css 之后引入。
   回滚方式：删掉这一行 <link> 即可，不触碰任何原有文件。

   命名约定
     表面   --surface-*   页面底色 / 浮起面 / 下沉面
     描边   --line-*
     文字   --ink-*       由深到浅：主标题 → 正文 → 次要 → 弱
     品牌   --brand*      主色（电光蓝）与辅助色（蜜桃粉）
     语义   --success / --warning / --danger / --gold
     间距   --sp-{n}      n = 4px 栅格的倍数（1=4px … 12=48px）
     圆角   --r-*
     字号   --fs-{px}     数字即实际像素，不再出现 13.5 / 14.5 这类半档
     阴影   --sh-{1..4}   由浅到深
     动效   --ease / --dur*
   ============================================================ */

:root {
  /* ---------- 1. 中性色：表面 ---------- */
  --surface-page:   #f4f7fb;   /* 页面底色 */
  --surface-raised: #ffffff;   /* 卡片 / 浮起面板 */
  --surface-sunken: #eef3ff;   /* hover / 斑马纹 / 内嵌块 */
  --surface-hover:  #eef3ff;
  --surface-mask:   rgba(24, 34, 56, .45); /* 遮罩 */

  /* ---------- 2. 中性色：描边 ---------- */
  --line-subtle:  #e8edf5;   /* 分割线（最弱） */
  --line:         #d9e0ec;   /* 常规描边 */
  --line-strong:  #c3ccdb;   /* 强调描边 / hover */

  /* ---------- 3. 中性色：文字 ---------- */
  --ink:        #182238;   /* 标题 / 强强调 */
  --ink-body:   #33415c;   /* 正文 */
  --ink-muted:  #5b6883;   /* 次要信息 */
  --ink-faint:  #8793ad;   /* 弱提示 / 占位 */
  --ink-invert: #ffffff;   /* 深色底上的文字 */

  /* ---------- 4. 品牌色：冷（主） + 暖（辅） ----------
     2026-09-23 三次调整，最终选定方案 C「电光蓝 × 蜜桃粉」。
     演进：青紫 → 青蓝+琥珀棕 → 薄荷青+珊瑚橙 → 电光蓝+蜜桃粉。
     前两版用户反馈「太重、不够年轻」「青+琥珀不好看」。

     「重」的根因已定位：theme-light.css 第 19 行把强调色钉死为 #008fb3（暗青蓝），
     源码里 42 处 #4fd8e8 亮青是给深色底设计的，浅色下全被压暗。

     本版原则：
       1. 主色换成高明度蓝 #4d8dff —— 亮、通透、有科技与都市感
       2. 暖辅色用蜜桃粉 #ff6b9d —— 与冷蓝形成强撞色，年轻且柔和不脏
       3. 【重要】亮色底一律配深字，不配白字
          #4d8dff 在白底仅 2.95:1（不可读），深态 #1d4ed8 为 6.68:1；
          亮底上的文字用 --on-brand #03102e，达 6.30:1。
          这条同时带来观感收益：亮底深字比亮底白字更清爽、更年轻。 */
  --brand:        #4d8dff;                  /* 主色：电光蓝（边框 / 图标 / 实心底 / 渐变） */
  --brand-ink:    #1d4ed8;                  /* 主色：白底文字态（对比度 6.68:1） */
  --brand-soft:   rgba(77, 141, 255, .12);  /* 主色：浅底 */
  --brand-softer: rgba(77, 141, 255, .06);
  --brand-deep:   #3a76e8;                  /* 主色：hover 加深 */
  --on-brand:     #03102e;                  /* 亮主色底上的文字（深靛，6.30:1） */

  --warm:        #ff6b9d;                   /* 辅色：蜜桃粉（活动 / 热门 / 次级 CTA） */
  --warm-ink:    #be185d;                   /* 辅色：白底文字态（6.04:1） */
  --warm-soft:   rgba(255, 107, 157, .12);
  --warm-deep:   #f0568c;                   /* 辅色：hover 加深 */
  --on-warm:     #2b0412;                   /* 亮辅色底上的文字 */

  /* 旧名 --brand-2 保留，但语义从「紫」改为「暖辅色」。
     全站青→紫渐变因此自动变成青→琥珀的冷暖渐变。 */
  --brand-2:      var(--warm);
  --brand-2-soft: var(--warm-soft);

  /* ---------- 5. 语义色 ---------- */
  --gold:      #b57a16;                   /* S 级 / 稀有（比 --warm 更金黄明亮） */
  --gold-soft: rgba(181, 122, 22, .12);
  --success:   #2f9c6c;
  /* warning 是「语义警示」，不跟随装饰辅色走 —— 否则会和 danger 撞成一片红橙 */
  --warning:   #d97706;
  --danger:    #d64568;
  --silver:    #8793ad;                   /* A 级 */
  --bronze:    #a9713f;                   /* B 级 */

  /* ---------- 6. 兼容别名：让旧 CSS 里的 var() 自动接入新体系 ----------
     旧变量名全部保留，值改为指向新 token。
     这样做的收益：现有 35 个 CSS 文件一行不改，
     只要它们用的是 var(--xxx)，就会自动统一到新配色。 */
  --bg:         var(--surface-page);
  --bg-soft:    var(--surface-raised);
  --bg-card:    var(--surface-raised);
  --card:       var(--surface-raised);
  --card-hover: var(--surface-sunken);
  --border:     var(--line);
  --text:       var(--ink);
  --txt:        var(--ink);
  --text-dim:   var(--ink-muted);
  --accent:     var(--brand);
  --accent-2:   var(--brand-2);
  --ok:         var(--success);
  --green:      var(--success);

  /* ---------- 7. 间距（4px 栅格） ----------
     规范：页面上出现的任何 margin / padding / gap，
     都必须取自这一组，不允许出现 5 / 7 / 9 / 11 / 18 这类离群值。 */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;   /* 主区块之间（节奏层，见规范文档第五节） */
  --sp-16: 64px;   /* Hero 之后 / 页脚之前 */

  /* ---------- 8. 圆角（2026-09-23 改「紧实」档：4 / 8 / 12 / 16） ----------
     反 AI 味：AI 生成偏爱 16~24px 大圆角 + 柔阴影，看多了就是模板感。
     攻略站信息密集、查询导向，紧实圆角更精确利落。
     r-xs 2px   极小装饰（进度条、焦点环）
     r-sm 4px   标签 / chip / 小图标块 / 页码
     r-md 8px   按钮 / 输入框 / 列表项
     r-lg 12px  卡片
     r-xl 16px  大面板 / Hero
     r-full     胶囊 / 圆点指示 */
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     8px;
  --r-lg:     12px;
  --r-xl:     16px;
  --r-full:   999px;
  --r-circle: 50%;
  --radius:   var(--r-lg);   /* 兼容旧变量 */

  /* ---------- 9. 字号（10 级，无半档） ---------- */
  --fs-11: 11px;   /* 角标 / 说明 */
  --fs-12: 12px;   /* 元信息 / 时间 */
  --fs-13: 13px;   /* 辅助文字 */
  --fs-14: 14px;   /* 正文小 */
  --fs-16: 16px;   /* 正文 */
  --fs-18: 18px;   /* 小标题 */
  --fs-20: 20px;   /* 卡片标题 */
  --fs-24: 24px;   /* 区块标题 */
  --fs-28: 28px;   /* 页面标题 */
  --fs-32: 32px;   /* 首页大标题 */
  --fs-body: var(--fs-14);

  /* ---------- 10. 行高 ---------- */
  --lh-tight:  1.35;
  --lh-normal: 1.7;
  --lh-loose:  1.9;

  /* ---------- 11. 阴影（柔和扩散，禁止霓虹外发光） ---------- */
  --sh-1: 0 1px 2px rgba(24, 34, 56, .06);
  --sh-2: 0 2px 8px rgba(24, 34, 56, .07), 0 1px 2px rgba(24, 34, 56, .04);
  --sh-3: 0 8px 24px rgba(24, 34, 56, .10);
  --sh-4: 0 16px 48px rgba(24, 34, 56, .14);

  /* ---------- 12. 动效 ---------- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;
  --dur:      .2s;
  --dur-slow: .3s;

  /* ---------- 13. 层级 ---------- */
  --z-crumb:    40;
  --z-header:   50;
  --z-dropdown: 60;
  --z-toast:    80;
  --z-modal:    100;

  /* ---------- 14. 布局 ---------- */
  --container:      1200px;
  --container-pad:  var(--sp-5);   /* 20px */
  --header-h:       64px;

  /* ---------- 15. 字体 ---------- */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-mono: Consolas, Menlo, "SF Mono", monospace;
}