@charset "UTF-8";
/* ============================================================
   tokens.css — 全站设计变量的唯一来源（Single Source of Truth）
   ------------------------------------------------------------
   必须最先加载（在 style.css / tool.css / 任何页面样式 之前）。

   使用规则（AI 与人工均需遵守）：
   1. 颜色、字号、间距、圆角、阴影、容器宽度、页脚高度 只在本文件定义。
   2. 其余 CSS 一律用 var(--x) 引用，禁止再写死数值/色值。
   3. 要改站点视觉：只改这里，全站一处生效。
   4. 新增 token 必须归入对应分组，并在右侧注明用途。
   5. 组件层只用「语义别名」区，不要直接用色阶（如 --brand-500）。
   ------------------------------------------------------------
   断点（CSS 变量不支持媒体查询，用数值 + 本注释约定）：
     md 959px — 三栏塌成单列
     sm 640px — 紧凑模式（缩略图改小、字号降一档）
     xs 380px — 极小屏（隐次要信息）
     页面级断点（如工具页一屏的 901px）必须在页面 CSS 头部声明。
   ============================================================ */

:root {
  /* ---------- 品牌色（紫） ---------- */
  --brand-900: #3B0F78;
  --brand-800: #4C1D95;
  --brand-700: #5B21B6;
  --brand-600: #6D28D9;
  --brand-500: #7C3AED;   /* 主色：链接 / 强调 / 按钮 */
  --brand-400: #A855F7;
  --brand-300: #A78BFA;
  --brand-100: #EDE9FE;   /* 标签底色 */
  --brand-50:  #F5F3FF;   /* 页面背景 */

  /* ---------- 强调色（黄 / 橙，UP主徽章、外链按钮） ---------- */
  --accent-400: #FBBF24;
  --accent-500: #F59F3B;
  --accent-600: #F59E0B;
  --accent-700: #F97316;
  --accent-800: #EA580C;

  /* ---------- 中性色（文字 / 边线 / 面） ---------- */
  --ink-900: #1E1B4B;   /* 正文、主标题 */
  --ink-800: #2D2A37;   /* 文章标题 */
  --ink-700: #5B5670;
  --ink-600: #6D6A8A;   /* 次要正文 */
  --ink-500: #7B7688;   /* 摘要 */
  --ink-400: #9B96AD;   /* 日期、弱化信息 */
  --ink-300: #B5B0C4;   /* 占位符 */
  --ink-200: #E5E4F5;   /* 浅边线 */

  /* ---------- 语义别名（组件层只准用这一层） ---------- */
  --color-primary:       var(--brand-500);
  --color-primary-dark:  var(--brand-700);
  --color-primary-light: var(--brand-100);
  --color-accent:        var(--accent-500);
  --color-text:          var(--ink-900);
  --color-text-title:    var(--ink-800);
  --color-text-muted:    var(--ink-600);
  --color-text-weak:     var(--ink-400);
  --color-ok:            #10B981;
  --color-warn:          #F59E0B;
  --color-danger:        #EF4444;

  /* ---------- 布局 ---------- */
  --container:       1280px;  /* 全站内容宽度（唯一） */
  --container-read:  1080px;  /* 阅读/窄栏宽度 */
  --header-h:        68px;
  --footer-h:        45px;    /* 页脚高度（全站唯一，两页共用） */
  --footer-gap:      32px;    /* 页脚与内容的安全间距 */
  --footer-reserve:  calc(var(--footer-h) + 67px); /* 内容底部需预留的空间 */
  --gutter:          20px;    /* 桌面左右留白 */
  --gutter-sm:       14px;    /* 移动端左右留白 */
  --grid-gap:        22px;

  /* ---------- 间距刻度（4px 基准，禁止随意写中间值） ---------- */
  --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-16: 64px;

  /* ---------- 圆角 ---------- */
  --r-sm: 10px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-pill: 999px;

  /* ---------- 阴影（紫色调，不用纯黑） ---------- */
  --sh-1: 0 1px 4px rgba(76, 29, 149, .06);    /* 卡片静止 */
  --sh-2: 0 10px 28px rgba(124, 58, 237, .14); /* 卡片悬停 */
  --sh-3: 0 10px 26px rgba(124, 58, 237, .18); /* 强调块 */

  /* ---------- 字号 ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 13.5px;
  --fs-md:   14.5px;
  --fs-lg:   16.5px;
  --fs-xl:   18.5px;
  --fs-2xl:  23px;
  --lh-tight: 1.5;
  --lh-base:  1.8;

  /* ---------- 层级 ---------- */
  --z-header: 30;
  --z-footer: 35;
  --z-modal:  100;

  /* ---------- 动效（规范 2026-10-30 · 全站唯一刻度表）----------
     时长四档，缓动三条，禁止裸写数值。
       --dur-1 120ms  按下反馈（scale / 颜色翻转）
       --dur-2 200ms  常规 hover（底色 / 位移 / 边框）
       --dur-3 380ms  元素转场（图片缩放 / 展开收起）
       --dur-4 550ms  版面级（轮播切页 / 整块位移）

     硬规则（改样式前先读）：
       1. 只动 transform / opacity；要动 width/height/top/left，先想能不能换 transform。
       2. 组件一律 var(--tr-hover) / var(--tr-press)，不准再写 transition: all 和裸数字。
       3. hover 效果必须包在 @media (hover:hover) 内；触摸端用 :active 给反馈。
       4. 新增动效必须在 prefers-reduced-motion: reduce 下有降级（见 style.css 末尾）。
     ------------------------------------------------------------ */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 380ms;
  --dur-4: 550ms;

  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* 进入 / 离开：快起缓收，hover 默认 */
  --ease-in:  cubic-bezier(.4, 0, 1, 1);      /* 退出画面 */
  --ease-std: cubic-bezier(.4, 0, .2, 1);     /* 对称位移：轮播 / 面板推拉 */

  --tr-hover: var(--dur-2) var(--ease-out);   /* 组合：常规交互反馈 */
  --tr-press: var(--dur-1) var(--ease-out);   /* 组合：按下 */
  --tr-fast: var(--dur-2) var(--ease-out);   /* 旧名：常规 hover，已收编为 dur-2 */
  --tr-base: var(--dur-3) var(--ease-out);   /* 旧名：元素转场，已收编为 dur-3 */

  /* ============================================================
     兼容别名（旧变量名）：保留旧名 → 指向新 token。
     目的：已有组件不改一行代码即可继承新体系；
     新代码请直接用上面的语义别名，不要再用这一层。
     ============================================================ */
  --purple:       var(--brand-500);
  --purple-dark:  var(--brand-700);
  --purple-light: var(--brand-100);
  --orange:       var(--accent-700);
  --orange-dark:  var(--accent-800);
  --bg:           var(--brand-50);
  --card:         #FFFFFF;
  --text:         var(--ink-900);
  --text2:        var(--ink-600);
  --line:         #E8E4F2;
  --ok:           var(--color-ok);
  --warn:         var(--color-warn);
}