/* ============================================================
   tokens.css —— 全站视觉参数总开关
   改这个文件里的值，全站跟着变。style.css 里不写死任何数值。
   ============================================================ */

:root {
  /* ---------- 颜色 ---------- */

  /* 页面底色，纯黑 */
  --bg: #000000;
  /* 主强调色，薄荷青。用于亮态数据、当前值、可点的东西 */
  --accent: #7FD4C1;
  /* 次级青灰。图表和分数条的中间层次 */
  --accent-dim: #3E6B6B;
  /* 更暗的青灰。图表和分数条的最底层 */
  --accent-dimmer: #2C4F4F;
  /* 主文字颜色 */
  --text: #FFFFFF;
  /* 次级文字：标签、说明、时间、单位 */
  --text-muted: #8A8A8A;
  /* 分隔线颜色，极暗的灰，几乎看不见 */
  --line: #1A1A1A;
  /* 哑光红。唯一的警报色，只用于真实故障：接口失败、超频被拒、服务不可用 */
  --alert: #C1443E;

  /* 数据在页面上的三档亮度：主值 / 次级 / 背景层。全部是薄荷青的亮度差，不用红色 */
  --data-strong: var(--accent);
  --data-mid: var(--accent-dim);
  --data-weak: var(--accent-dimmer);

  /* ---------- 表面层（浮在纯黑页面之上的深灰卡片） ----------
     只给「重点内容」用：首屏四格指标、我在做什么的三条。
     普通区块继续贴纯黑底，靠这个色差把视线拉到重点上。
     调亮一档 = 卡片更跳；调暗一档 = 更沉。别超过 #1E1E1E，否则整页会发灰。 */

  /* 卡片底色 */
  --surface: #181818;
  /* 卡片描边，比底色亮一点点，只用来收边，不抢注意力 */
  --surface-line: #262626;
  /* 卡片内边距（桌面） */
  --surface-pad: 20px;
  /* 卡片内边距（手机，窄屏留给文字的宽度更金贵） */
  --surface-pad-mobile: 14px;
  /* 卡片里的次级文字：底色变浅了，比页面上的 --text-muted 提一档补回对比度 */
  --text-on-surface: #9E9E9E;

  /* ---------- 字体 ----------
     两套字体分工，别混用：
     正文栈负责「读」——叙述、描述、需求文字，中文要清爽；
     等宽栈负责「看数据」——数字、参数、编号、时间戳、代码。
     这个分工是全站阅读层次的地基，加新样式时按内容性质挑，不要随手用 --font。 */

  /* 正文字体族：系统人文无衬线，无外链、无字体文件 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
    "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  /* 数据字体族：等宽，只给数字/参数/编号/时间戳/代码 */
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "PingFang SC", "Microsoft YaHei", monospace;
  /* 默认字体 = 正文栈。历史引用 var(--font) 的地方一律落到正文 */
  --font: var(--font-sans);

  /* 正文字号（换非等宽后中文字面变小，比原来提一档） */
  --fs-body: 15px;
  /* 小字：说明、描述、次级正文 */
  --fs-small: 13px;
  /* 极小字：标签、区块编号、来源标注 */
  --fs-micro: 11px;
  /* 区块标题字号 */
  --fs-section: 13px;
  /* 姓名字号 */
  --fs-name: 34px;
  /* 四格指标里的大数字字号 */
  --fs-metric: 28px;
  /* 首屏「本站即作品」那句的字号 */
  --fs-claim: 13px;
  /* 正文行高 */
  --lh: 1.8;
  /* 标题行高：比正文紧，拉开层次 */
  --lh-tight: 1.3;
  /* 标签与等宽内容的字间距（等宽质感的关键，非等宽正文不要用） */
  --tracking: 0.14em;
  /* 正文字间距：中文非等宽字体上，大字距会散，接近 0 */
  --tracking-body: 0.005em;
  /* 姓名字间距：标题收紧，跟正文反向拉开差异 */
  --tracking-name: -0.005em;
  /* 姓名字重 */
  --fw-name: 600;
  /* 区块标题字重 */
  --fw-title: 500;

  /* ---------- 间距 ---------- */

  /* 最小间距单位 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  /* 区块之间的垂直留白 */
  --sp-5: 44px;
  /* 大区块之间的垂直留白 */
  --sp-6: 72px;
  /* 第一屏的呼吸位：主入口前后用它，同时负责把「02 我在做什么」压到折线以下 */
  --sp-7: 104px;
  /* 窄屏第一屏的统一压缩间距：手机竖屏放不下「名字+定位+指标+入口」，
     只在首页容器内覆盖 --sp-4/5/6，Muninn 视图不受影响 */
  --home-gap-mobile: 28px;
  /* 页面左右内边距（桌面） */
  --page-pad: 40px;
  /* 页面左右内边距（手机） */
  --page-pad-mobile: 18px;
  /* 内容最大宽度，超过就居中留白 */
  --page-max: 940px;

  /* ---------- 线条与形状 ---------- */

  /* 分隔线粗细 */
  --line-w: 1px;
  /* 圆角。极小；改成 0 就是全直角 */
  --radius: 2px;
  /* 分数条 / 进度条的高度 */
  --bar-h: 3px;

  /* ---------- 交互 ---------- */

  /* 鼠标悬停等状态切换的时长；改成 0s 就完全没有动画 */
  --transition: 120ms;
  /* 输入框、按钮的高度 */
  --control-h: 38px;

  /* ---------- 个人智库 Muninn 入口与视图 ---------- */
  /* 只借用上面已有的颜色变量，不引入新色系 */

  /* 入口 bar 的内边距 */
  --muninn-bar-pad: 20px;
  /* 入口 bar 上的产品名字号 */
  --fs-brand: 22px;
  /* 入口 bar 左侧那颗提示点的直径 */
  --muninn-dot: 6px;
  /* 提示点的呼吸周期；改成 0s 就不闪 */
  --muninn-pulse: 2.4s;
  /* 路线图卡片的最小列宽（决定几列自动换行） */
  --muninn-col-min: 240px;

  /* ---------- 实时态势仪表盘 ---------- */

  /* 数据源卡片的最小列宽（决定几列自动换行） */
  --source-col-min: 300px;
  /* 数据源卡片最小高度：故障源和正常源等高，不跳版 */
  --source-card-min-h: 220px;
  /* 卡片左侧状态色边的粗细 */
  --source-edge-w: 3px;
  /* 刷新按钮高度 */
  --source-btn-h: 26px;
  /* 加载骨架每行的高度 */
  --source-skel-h: 10px;
  /* 骨架呼吸周期；改成 0s 就不闪 */
  --source-skel-pulse: 1.6s;
  /* 条目标题最多显示几行：统一行数，卡片才能等高不留巨大空白 */
  --source-item-lines: 2;

  /* ---------- 需求文档侧边栏 ---------- */

  /* 侧边栏宽度（桌面） */
  --doc-w: 400px;
  /* 侧边栏滑入滑出时长 */
  --doc-slide: 260ms;
  /* 把手竖排时的高度 */
  --doc-handle-h: 132px;
  /* 把手厚度 */
  --doc-handle-w: 30px;
  /* 需求条目被高亮时的底色：仍是薄荷青，只是加了透明度，不引入新颜色 */
  --doc-hl-bg: rgba(127, 212, 193, 0.13);
  /* 高亮条目左侧竖线粗细 */
  --doc-hl-edge: 2px;
  /* 高亮淡入淡出时长；改成 0s 就是硬切 */
  --doc-hl-fade: 260ms;
  /* 移动端底部抽屉高度 */
  --doc-drawer-h: 58vh;
}