/* =========================================================
   Studio Tokens - 首页 V2 视觉系统令牌
   依据: docs/_meta/HOMEPAGE_DESIGN_AND_IMPLEMENTATION.md §4.4–4.8
   作用: 提供首页新视觉系统的色/字/空间/圆角/线条/焦点/动效令牌
   注意: 仅定义令牌与基础变量, 不写组件规则(组件规则在 homepage-v2.css)
   ========================================================= */

:root {
  /* —— 暖石墨(封面) —— 禁止纯黑 #000 —— */
  --studio-ink-950: #0d100e;
  --studio-ink-900: #131713;
  --studio-ink-800: #1b201c;

  /* —— 灰纸白(内页) —— 禁止纯白 #fff 作为整段背景 —— */
  --studio-paper-100: #e9e5dc;
  --studio-paper-50: #f2eee5;
  --studio-paper-line: #c9c3b7;

  /* —— 文字 —— */
  --studio-text: #20211d;
  /* #5c5e56: 原值 #66685f 在 --studio-paper-100 上实测 4.503:1 —— 虽踩线通过 AA,
     但零余量(全站 732 处元素落在这个组合上, 任何取整/叠加都会翻到 4.5 以下)。
     加深后在三个实测底上分别为: paper-100 → 5.24, paper-50 → 5.68,
     5% 墨色叠加态 → 4.77, 均有余量。
     该令牌**只在浅底使用**(深底一律走 --studio-on-dark-muted), 故加深只提升对比度。 */
  --studio-text-muted: #5c5e56;
  --studio-on-dark: #f2efe7;
  --studio-on-dark-muted: #a9aea7;

  /* —— 信号色(克制使用) —— */
  --studio-green: #24d18f;
  --studio-green-dark: #159867;
  --studio-gold: #c8a96b;
  --studio-vermilion: #b64b45;
  --studio-cyan: #58b7c7;
  --studio-rust: #a66b45;
  --studio-focus: #7ee8bc;

  /* —— 纸白底专用深色变体 ——
     原信号色(green-dark 2.92:1 / rust 3.47:1 / notion-link-blue 4.20:1)在纸白
     --studio-paper-100 上不满足 WCAG AA 4.5:1。以下变体专供纸白底小字使用,
     深色底请继续使用上方原色。 */
  --studio-green-ink: #0f6b4a;   /* 纸白底 5.18:1 */
  --studio-rust-ink: #8f5738;    /* 纸白底 4.66:1 */
  --studio-link-ink: #0a5aa8;    /* 纸白底 5.49:1, 替代 --notion-link-blue 的正文链接 */
  --studio-link-on-dark: #4a9eff; /* 深墨底 6.95:1, 深色区域链接用 */
  --studio-vermilion-ink: #a8423d; /* 纸白底 5.17:1, 原 #b64b45 只有 4.44:1 */
  /* 纸白底专用深金。原 --studio-gold(#c8a96b) 在纸白底只有 1.60–1.94:1,
     远低于小字所需的 4.5:1 —— 而它承载的不只是装饰水印, 还包括时间轴年份
     ("2019–2020")、笔记序号、目录编号等**真实信息**, 属实质可读性缺陷。
     本变体保持原金色相(h≈41°)压暗, 三种实测底上为 5.40 / 5.86 / 4.82, 均达标。
     深墨底请继续使用 --studio-gold(在深底上与墨水色对比充足)。 */
  --studio-gold-ink: #6f5820;

  /* —— 领域编码色(仅小面积: 图谱图标/主题列表点/连线端点/hover 描边, 依据参考图 V1.2) —— */
  --kg-0: #22c55e;  /* 计算机基础 绿 */
  --kg-1: #58b7c7;  /* 后端开发 青 */
  --kg-2: #34d399;  /* 云原生/运维 翠绿 */
  --kg-3: #f59e0b;  /* 前端 琥珀 */
  --kg-4: #a78bfa;  /* AI 与 Agent 紫(参考图同款, 仅限小面积编码) */
  --kg-5: #60a5fa;  /* 软件工程 蓝 */
  --kg-6: #e6663e;  /* 求职 朱砂 */
  --kg-7: #c084fc;  /* 过时技术归档 兰紫(参考图同款, 仅限小面积编码) */
  --kg-8: #c8a96b;  /* 开发工具 旧金 */
  --kg-9: #f43f5e;  /* 项目实战 玫瑰红(仅限小面积编码) */

  /* —— 终端预览底色(带绿调的石墨) —— */
  --studio-terminal-bg: #0f1713;

  /* —— 字体 ——
     本站**不加载任何 webfont**（有意决策）：中文字体即使子集化也有数百 KB，
     而唯一能被 CDN 提供的 Roboto Mono 来自 fonts.gstatic.com —— 该域名在中国大陆
     访问不稳定，一旦失败，`pre` 会退到 `Monaco, courier` 甚至 Windows 上的 courier。
     因此字体栈统一采用「本机存在的字体优先」写法，各栈首项在三大平台的实际落点：

       --studio-font-display  Windows→SimSun  macOS→Songti SC  Linux→Source Han Serif SC
       --studio-font-body     Windows→Microsoft YaHei  macOS→PingFang(经 Noto/Songti 回退链)  Linux→Source Han Sans
       --studio-font-mono     三平台→Cascadia Mono / SF Mono / DejaVu Sans Mono

     即「衬线标题 + 无衬线正文 + 系统等宽代码」的意图在各平台都能达成；
     栈里的 Source Han / Noto 项是给已装 Adobe/Google 字体的机器提升观感用的，
     不是「声明了却没用上」的失效声明 —— 改动前请先读本节说明。 */
  --studio-font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", "Source Han Serif CN", serif;
  --studio-font-body: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  /* 不含 Roboto Mono: 它只由 docsify 主题经 fonts.gstatic.com 引入, 国内不可靠,
     不该成为代码字体的实际依赖; 用系统等宽字体可保证三平台一致且零网络成本 */
  --studio-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* —— 空间 —— */
  --studio-space-1: 4px;
  --studio-space-2: 8px;
  --studio-space-3: 12px;
  --studio-space-4: 16px;
  --studio-space-5: 24px;
  --studio-space-6: 32px;
  --studio-space-7: 48px;
  --studio-space-8: 64px;

  /* —— 圆角(最大 6px, 首页禁胶囊) —— */
  --studio-radius-sm: 3px;
  --studio-radius-md: 6px;

  /* —— 线条 —— */
  --studio-line-dark: rgba(242, 239, 231, 0.14);
  --studio-line-paper: rgba(32, 33, 29, 0.18);

  /* —— 纸张纹理(极轻) —— */
  --studio-paper-noise: rgba(32, 33, 29, 0.025);

  /* —— 动效 —— */
  --studio-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --studio-dur-fast: 150ms;
  --studio-dur-base: 220ms;
  --studio-dur-enter: 280ms;

  /* —— 内容宽度 —— 外层盒上限(含 gutter): <=1920 视口全出血, >1920 居中(V1.4) —— */
  --studio-content-max: 1920px;
  --studio-gutter: 40px;
}

/* =========================================================
   断点约定 (2026-09 归一)

   CSS 媒体条件里**不能写 var()**，所以断点无法做成令牌；这里以文档形式
   固定约定，新增响应式规则一律照此取值：

     分界        ≤ 值(移动/窄屏侧)      ≥ 值(桌面侧)
     768px      max-width: 768px       min-width: 769px
     1024px     max-width: 1024px      min-width: 1025px
     1279/1280  max-width: 1279px      min-width: 1280px   (已一致，无需改动)
     480 / 1600 直接按 max-width / min-width 写在两侧，同样保持互补。

   为什么是 768 与 1024：768 对应平板竖屏、1024 对应侧栏抽屉化的临界宽度，
   均与 `--studio-content-max` / 侧栏 280px / TOC 240px 的几何推导一致。

   历史坑（已修）：
   · 曾同时存在 `max-width: 1023px` 与 `min-width: 1025px` —— 恰好 1024px 的
     视口两边都不命中，形成规则死区；768px 处也曾有 `max-width: 767px` 与
     `min-width: 768px` 同时命中导致的桌面/移动规则打架。
   · `me-page.css` 曾把 1024/768 当作桌面侧，与文章页的抽屉边界相反，
     导致同一视口下「导航是桌面态、正文却是移动态」。

   其余断点值(360/390/420/460/540/580/620/720/760/820/860/900/960/980/
   1010/1100/1120/1200/1400/1440)是各组件按自身几何推导的历史取值，
   未经重设计不要随意归并 —— 收敛为 5 档需要逐个组件重做响应式。
   ========================================================= */

/* 动效偏好: 尊重 reduced-motion(规范 §9.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}