/* ============================================================
   设计令牌 —— 全站唯一视觉真源
   风格：宣纸 / 水墨 / 朱砂金 —— 国潮古韵，克制不土
   ============================================================
   【文件职责】
   本文件定义整个网站所有"设计变量"（CSS 自定义属性 / CSS Variables）。
   它是项目的"视觉宪法"——颜色、字体、字号、间距、圆角、阴影、动效速度、
   层级 z-index 等所有视觉参数都集中在这里统一管理。

   【在项目中的角色】
   - 其他所有 CSS 文件（base.css / cover.css / map.css / panel.css）都会通过
     var(--xxx) 的方式引用这里定义的变量，从而保证全站视觉风格一致。
   - 当需要调整某一种颜色或间距时，只需改这里一处，全站自动跟随变化。
   - 读者可以把这个文件理解成"调色盘 + 字号表 + 间距尺 + 速度表"的合集。

   【阅读提示】
   - "--" 开头的写法就是 CSS 变量，例如 --paper 表示"宣纸底色"。
   - 变量定义在 :root 里，意味着它是全局变量，所有元素都能用。
   ============================================================ */

/* —— 全局变量定义容器：所有设计令牌都装在这里 —— */
:root {
  /* —— 色板 ——
     #RRGGBB 是十六进制颜色：每两位分别表示红/绿/蓝的深浅（00 最暗，FF 最亮）。
     命名约定：基础色 + 数字后缀，数字越大颜色越浅或越亮（例如 paper < paper-2 < paper-3）。
     全站色系分四组：宣纸系(底色)/墨色系(文字)/朱砂系(强调)/描金系(点缀)。 */
  --paper:        #F2ECE0;   /* 宣纸底 —— 全站背景主色 */
  --paper-2:      #E8DFCE;   /* 宣纸暗部 —— 次级背景 */
  --paper-3:      #DCD0B8;   /* 描边 / 分隔 —— 卡片边框、横线 */
  --ink:          #14120F;   /* 浓墨 —— 主要正文文字色 */
  --ink-2:        #3A342C;   /* 次级文字 —— 次级正文 */
  --ink-3:        #6A6056;   /* 弱文字（调暗，对比度达 WCAG AA 4.5:1） */
  --cinnabar:     #A8342A;   /* 朱砂 —— 主强调色（印章/按钮/标题装饰） */
  --cinnabar-2:   #C4453A;   /* 朱砂亮 —— 高光版本 */
  --gold:         #C9A227;   /* 描金 —— 副强调色（点缀） */
  --gold-2:       #E3C25A;   /* 描金亮 —— 金光高光 */
  --celadon:      #5C7A6E;   /* 青瓷 —— 备用配色 */
  --azure:        #2B6CB0;   /* 内蒙古点位色 —— 地图上特别标注 */
  --night:        #0E0D0B;   /* 深色场景底 —— 视频背景等暗处 */
  --night-2:      #1A1815;   /* 深色次级 —— 视频背景渐变 */

  /* —— 半透明 ——
     rgba(红, 绿, 蓝, 透明度)：前三个是 RGB 颜色值，最后一位是透明度（0=全透明，1=不透明）。
     命名规则：颜色名 + a + 透明度百分比，比如 ink-a10 表示"墨色 10% 透明度"。
     这类半透明色用于：阴影叠加、玻璃模糊背景、悬浮提示等场景。 */
  --ink-a10:      rgba(20, 18, 15, 0.10);    /* 墨色 10%：极淡阴影 */
  --ink-a20:      rgba(20, 18, 15, 0.20);    /* 墨色 20%：淡阴影 / 分隔线 */
  --ink-a60:      rgba(20, 18, 15, 0.60);    /* 墨色 60%：次要遮罩 */
  --ink-a85:      rgba(20, 18, 15, 0.85);    /* 墨色 85%：深遮罩 */
  --paper-a80:    rgba(242, 236, 224, 0.80); /* 宣纸 80%：HUD 半透背景 */
  --gold-a30:     rgba(201, 162, 39, 0.30);  /* 描金 30%：金边光晕 */
  --cinnabar-a25: rgba(168, 52, 42, 0.25);   /* 朱砂 25%：印章红晕 */

  /* —— 字体 ——
     字体栈写法：浏览器会从左往右挨个找，找到第一个用户电脑里装了的字体就用它。
     所以顺序很重要：先写最理想的美观字体，再写常见备选，最后写通用兜底（serif/sans-serif）。
     --font-serif 宋体类（衬线，传统正式）；--font-sans 黑体类（无衬线，现代清晰）；
     --font-kai 楷体类（手写感，用于标题、印章、装饰文字）。 */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", STZhongsong, STSong, SimSun, "宋体", serif;
  --font-sans:  "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "微软雅黑", system-ui, sans-serif;
  --font-kai:   "Kaiti SC", KaiTi, STKaiti, "楷体", var(--font-serif); /* 找不到楷体时降级到 serif */

  /* —— 字号（流体） ——
     clamp(最小值, 首选值, 最大值) 是一个流式字号函数：
     屏幕窄时不小于"最小值"；屏幕宽时不大于"最大值"；
     中间尺寸时跟随"首选值"（这里用 vw 视口百分比）等比例缩放。
     好处：手机 / 平板 / 电脑上字号自动适配，不需要写多套媒体查询。 */
  --fs-hero:  clamp(2.6rem, 7vw, 6rem);   /* 超大标题：封面"南风"等核心字 */
  --fs-h1:    clamp(1.9rem, 3.6vw, 3rem); /* 一级标题：面板品牌名 */
  --fs-h2:    clamp(1.4rem, 2.2vw, 2rem); /* 二级标题 */
  --fs-h3:    clamp(1.1rem, 1.5vw, 1.35rem); /* 三级标题：章节小标题 */
  --fs-body:  clamp(0.94rem, 1.05vw, 1.06rem); /* 正文 */
  --fs-sm:    clamp(0.8rem, 0.9vw, 0.88rem);   /* 次要文字：副标语、提示 */
  --fs-xs:    0.74rem;                         /* 极小字：脚注、版权 */

  /* —— 间距 ——
     统一的全站间距阶梯（数字越大间距越宽）。
     所有 padding / margin / gap 都从这里取值，保证排版节奏一致。
     1px ≈ 1 像素；建议脑补：sp-1=小缝，sp-4=一段空隙，sp-8=明显留白。 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* —— 圆角 / 阴影 ——
     圆角：r-sm≈几乎直角，r-xl=明显圆弧，呼应"印章"的圆润感。
     阴影：每一档叠加两层投影（一层近、一层远），让元素看起来"浮"在纸上，
     而不是单调的一片黑影。rgba 中最后一位是透明度（.10=10%黑）。 */
  --r-sm: 3px; --r-md: 6px; --r-lg: 12px; --r-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(20,18,15,.10), 0 1px 2px rgba(20,18,15,.06); /* 微浮：按钮、标签 */
  --shadow-md: 0 4px 16px rgba(20,18,15,.12), 0 2px 6px rgba(20,18,15,.08); /* 中浮：卡片、面板 */
  --shadow-lg: 0 18px 48px rgba(20,18,15,.22), 0 6px 16px rgba(20,18,15,.12); /* 重浮：弹层 */
  --shadow-gold: 0 0 0 1px var(--gold-a30), 0 8px 32px rgba(201,162,39,.16); /* 描金光晕：高亮 */

  /* —— 动效 ——
     cubic-bezier(a,b,c,d) 叫"贝塞尔曲线"，描述动画快慢节奏：
     数字控制速度变化（先快后慢 / 先慢后快等），不用记参数，只需要知道：
     ease-out  = 出场（自然减速）；ease-in-out = 进出（两端缓）；ease-silk = 丝绸般顺滑。
     --t-* 是不同档位的动画时长（ms=毫秒，1000ms=1秒）。 */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* 自然减速 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 两端缓 */
  --ease-silk: cubic-bezier(0.22, 0.61, 0.36, 1);/* 丝绸顺滑（项目招牌） */
  --t-fast: 180ms;  --t-mid: 380ms;  --t-slow: 720ms;  --t-epic: 1400ms; /* 快/中/慢/史诗 */

  /* —— 层级 z-index ——
     z-index 控制"谁压在谁上面"，数字越大越上层。
     排列：地图底 < 顶/底栏 HUD < 详情面板 < 封面 < 加载层。
     这样设计能保证：加载时 loader 完全盖住一切；封面盖住地图但被加载层压住；
     详情面板高于 HUD，避免被顶栏遮挡。 */
  --z-map: 10; --z-hud: 20; --z-panel: 60; --z-cover: 90; --z-loader: 100;
}

/* —— 无障碍：尊重系统「减少动态效果」偏好 ——
   @media 是"媒体查询"，会根据用户设备/设置启用不同样式。
   prefers-reduced-motion: reduce 表示用户在系统里勾选了"减少动画"
   （常见于晕动症用户或省电模式）。本规则把所有动画时长缩到接近 0，
   让动画"瞬间完成"，但功能不受影响。!important 表示强制覆盖一切。 */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-mid: 1ms; --t-slow: 1ms; --t-epic: 1ms; } /* 把时长变量全清零 */
  *, *::before, *::after {
    animation-duration: .01ms !important;           /* 动画播放时长≈0 */
    animation-iteration-count: 1 !important;        /* 只播一次（不循环） */
    transition-duration: .01ms !important;          /* 过渡时长≈0 */
    scroll-behavior: auto !important;               /* 禁用平滑滚动 */
  }
}