/* ==========================================================================
   tokens.css —— 设计令牌层
   数据源：docs/design-spec.md 第 2 / 3 / 4 节
   纪律：本文件是全站唯一允许出现硬编码 HEX 的地方。
        任何组件/板块样式必须通过 var() 引用这里的令牌。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. 品牌原色（design-spec § 2.1）
     --------------------------------------------------------------------- */
  --primary: #5AA9FF;         /* 第五魔法的青蓝光：主按钮底/链接/当前项/数值/时间线主节点 */
  --primary-light: #8FC6FF;   /* 高光：悬停文字/卡片描边激活/<mark> */
  --primary-deep: #2E6FD4;    /* 青蓝实体：主按钮填充底（唯一能配白字的档位） */
  --primary-glow: #7FC4FF;    /* 辉光：焦点环/灯箱描边/box-shadow 色 */
  --accent: #FF6A6A;          /* 青子的朱红：强调文字/引用块左竖线/危险浪漫语义 */
  --accent-bright: #FF8A6A;   /* 茜色：B 基调过渡/悬停态 */
  --accent-deep: #C4312E;     /* 朱红实体：仪式性动作按钮底 */
  --copper: #C97A45;          /* 铜茶：C 基调强调/有珠标记 */
  --gold: #E8C583;            /* 久远寺黄铜：档案数据条分隔/古典描边 */
  --violet: #8E7BD6;          /* 青子蓝紫制服：角色卡背衬/visited */
  --violet-light: #B9A8EE;    /* 紫标文字（8.37:1 on --neutral-700） */
  --violet-tint-14: rgba(142, 123, 214, 0.14);  /* 紫标底 */
  --dusk-line: #6A4A6E;       /* B 基调夕烧卡片 1px 描边（design-spec § 7.1） */
  --flash-white: #EAF6FF;     /* 第五魔法爆发闪白（17.92:1，仅单帧） */

  /* 按钮派生态（design-spec § 5.1 四态表实测值） */
  --primary-hover: #2A62BE;
  --primary-active: #23529F;
  --accent-hover: #A82826;
  --accent-active: #8F1F1E;
  --on-primary: #FFFFFF;

  /* 悬停/按下时的半透明青蓝底 */
  --primary-tint-10: rgba(90, 169, 255, 0.10);
  --primary-tint-14: rgba(90, 169, 255, 0.14);
  --primary-tint-18: rgba(90, 169, 255, 0.18);
  --primary-tint-28: rgba(90, 169, 255, 0.28);
  --accent-tint-12: rgba(255, 106, 106, 0.12);
  --accent-tint-14: rgba(255, 106, 106, 0.14);
  --gold-tint-12: rgba(232, 197, 131, 0.12);

  /* ---------------------------------------------------------------------
     2. 中性色阶 · 暗色轨（全站默认，design-spec § 2.2）
     ⚠ 走样点 2：以下两枚令牌是下限，禁止再调暗
        --neutral-300 控件边框下限（4.77:1，非文字 ≥3:1）
        --neutral-200 文字下限     （6.47:1，文字 ≥4.5:1）
     --------------------------------------------------------------------- */
  --neutral-000: #070B14;     /* 页面背景 */
  --neutral-800: #0C121E;     /* 表格斑马行 */
  --neutral-750: #0E1626;     /* 输入框底 */
  --neutral-700: #101828;     /* 画廊缩略图底 / 内嵌块 */
  --neutral-650: #141C2C;     /* 表头底 */
  --neutral-600: #151E2E;     /* 卡片底（主力容器色） */
  --neutral-550: #1A2438;     /* 卡片悬停底 / 禁用按钮底 */
  --neutral-500: #232E44;     /* 禁用态底（浅档）/ 分段控件容器 */
  --neutral-400: #2E3A52;     /* 强分隔线 / 区块边界 / 滚动条槽 */
  --neutral-350: #3C4A61;     /* 表格行分隔 / 内层描边 */
  --neutral-300: #6E7E96;     /* 控件边框下限 —— 禁止再暗 */
  --neutral-200: #8695AC;     /* 文字下限 —— 禁止再暗 */
  --neutral-150: #A9B6CB;     /* 次要文字 */
  --neutral-100: #DCE4F0;     /* 正文默认色 */
  --neutral-050: #EDF2FA;     /* 高亮文字 H1–H4 / 按钮文字 */

  --disabled-fg: #8A99B0;     /* 禁用态文字（4.70:1 on #232E44，最紧的一组） */

  /* ---------------------------------------------------------------------
     3. 中性色阶 · 亮色轨（仅 C 基调书页段落，design-spec § 2.2）
     --------------------------------------------------------------------- */
  --paper: #F2E9D8;           /* 书页纸底 */
  --paper-deep: #EFE5D2;      /* 纸底次级 */
  --paper-line: #D8CBB2;      /* 纸面分隔线 */
  --ink: #3D2E1F;             /* 纸上正文（10.83:1） */
  --ink-2: #6B5136;           /* 纸上次要文字（6.10:1） */
  --paper-link: #7A4A22;      /* 纸上链接（6.16:1）—— 纸上禁止用 --primary */
  --paper-focus: #B85C24;     /* 纸上焦点环（3.79:1）—— 仅焦点环与图标 */
  --paper-tag-gold-fg: #7A4A22;  /* 纸上金标文字 —— 同 --paper-link，独立命名以便微调 */
  --paper-tag-gold-bg: rgba(201, 122, 69, 0.16);   /* 纸上金标底 */
  --paper-tag-red-fg: #8F1F1E;   /* 纸上朱标文字（暗一档，确保纸底 7.0:1） */
  --paper-tag-red-bg: rgba(196, 49, 46, 0.12);     /* 纸上朱标底 */
  --paper-tag-bg: rgba(61, 46, 31, 0.08);          /* 纸上中性标底 */
  --paper-chip-bg: rgba(61, 46, 31, 0.06);         /* 纸上 chip 底 */

  /* ---------------------------------------------------------------------
     4. 语义色（design-spec § 2.3，四态完整；均需配图标，不只靠颜色）
     --------------------------------------------------------------------- */
  --success: #5FD3A6;  --success-bg: #0C2B22;  --success-on-bg: #A8F0D2;
  --warning: #F5C24B;  --warning-bg: #2E2208;  --warning-on-bg: #FFE09A;
  --danger: #FF7B7B;   --danger-bg: #2E1114;   --danger-on-bg: #FFC0C0;
  --info: #7FC0FF;     --info-bg: #0F2237;     --info-on-bg: #CFE6FF;

  /* ---------------------------------------------------------------------
     5. 第五魔法 · 四季轮换色盘（design-spec § 2.4）
     用法：在 [data-season="s1..s4"] 容器上覆写。
     转场：800ms cubic-bezier(0.4,0,0.2,1)；reduced-motion → 240ms 纯 opacity。
     --------------------------------------------------------------------- */
  --season-transition: 800ms;
  --season-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --season-interval: 6000ms;

  /* 春 · 樱吹雪 */
  --s1-bg: #150F1E;
  --s1-glow: #FFB3D1;
  --s1-accent: #F7A8C4;
  --s1-shadow: #7A4A63;
  --s1-text: #F7EFF4;
  --s1-text-mut: #CFB8C8;

  /* 夏 · 雷雨霓虹 */
  --s2-bg: #060B1C;
  --s2-glow: #4DE8E0;
  --s2-accent: #FF5FD0;
  --s2-flash: #C9F7FF;        /* 仅 ≤120ms 单帧闪白，1s 内 ≤1 次（防光敏） */
  --s2-shadow: #182A4A;
  --s2-text: #E9F4FF;
  --s2-text-mut: #A9C3D8;

  /* 秋 · 红叶夕烧 */
  --s3-bg: #140A0C;
  --s3-glow: #FF8A3D;
  --s3-accent: #FFC46B;
  --s3-deep: #8C2F2A;
  --s3-text: #F6E9DA;
  --s3-text-mut: #D4BFA8;

  /* 冬 · 雪夜星空 */
  --s4-bg: #05080F;
  --s4-glow: #7FE3FF;
  --s4-accent: #DCE6F5;
  --s4-deep: #1E3350;
  --s4-text: #E8F1FF;
  --s4-text-mut: #A8C0DC;

  /* 当季指针：默认指向春季，由 [data-season] 覆写 */
  --season-bg: var(--s1-bg);
  --season-glow: var(--s1-glow);
  --season-accent: var(--s1-accent);
  --season-text: var(--s1-text);
  --season-text-mut: var(--s1-text-mut);

  /* 四季专属标签底/字（design-spec § 5.7，均 ≥8.5:1） */
  --chip-s1-bg: #3A1F2E; --chip-s1-fg: #F2B3CD;
  --chip-s2-bg: #0C2B33; --chip-s2-fg: #7FE9E3;
  --chip-s3-bg: #3A1B10; --chip-s3-fg: #FFC08A;
  --chip-s4-bg: #12283F; --chip-s4-fg: #A8D2FF;

  /* ---------------------------------------------------------------------
     6. B 基调 · 夕烧黄昏橙紫（design-spec § 7.1 区块 3）
     --------------------------------------------------------------------- */
  --dusk-grad: linear-gradient(160deg, #2A1338 0%, #1A1030 40%, #3A1A1E 100%);
  --dusk-card: rgba(26, 16, 48, 0.72);
  --dusk-card-hover: rgba(38, 24, 64, 0.86);
  --dusk-border: #6A4A6E;
  --dusk-border-hi: #9A6A9E;
  --dusk-text: #F5EDE4;       /* 15.61:1 */
  --dusk-text-mut: #C9B8C4;   /* 9.59:1 */
  --dusk-num: #FFA45C;

  /* ---------------------------------------------------------------------
     7. 字族栈（design-spec § 3.1）
     ⚠ 走样点 1：日文假名必须回落 Yu Mincho / Hiragino Mincho ProN。
       浏览器选字形依赖 lang 属性 —— 只堆字体名不标 lang 是无效的。
     --------------------------------------------------------------------- */
  --font-serif:
    "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun",
    "Source Han Serif JP", "Yu Mincho", "Hiragino Mincho ProN",
    Georgia, "Times New Roman", serif;
  --font-sans:
    "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:
    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* 日文专属栈：lang="ja" 元素上强制覆盖 */
  --font-serif-ja:
    "Source Han Serif JP", "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Serif JP", serif;

  /* ---------------------------------------------------------------------
     8. 字号阶梯（design-spec § 3.2，移动优先：此处为移动值，§9 处升档）
     --------------------------------------------------------------------- */
  --fs-display: 40px;  --lh-display: 1.1;   --ls-display: -0.02em;
  --fs-h1: 32px;       --lh-h1: 1.2;        --ls-h1: -0.01em;
  --fs-h2: 28px;       --lh-h2: 1.25;       --ls-h2: -0.01em;
  --fs-h3: 22px;       --lh-h3: 1.35;       --ls-h3: 0em;
  --fs-h4: 18px;       --lh-h4: 1.45;       --ls-h4: 0em;
  --fs-lead: 18px;     --lh-lead: 1.8;      --ls-lead: 0.01em;
  --fs-body-l: 18px;   --lh-body-l: 1.9;
  --fs-body: 16px;     --lh-body: 1.85;     --ls-body: 0.01em;
  --fs-body-ui: 16px;  --lh-body-ui: 1.5;
  --fs-caption: 14px;  --lh-caption: 1.6;   --ls-caption: 0.01em;
  --fs-label: 13px;    --lh-label: 1.5;     --ls-label: 0.08em;
  --fs-micro: 12px;    --lh-micro: 1.5;     --ls-micro: 0.06em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------------
     9. 间距刻度（严格 4 基数，design-spec § 4.1）
     --------------------------------------------------------------------- */
  --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;
  --sp-10: 128px;

  /* 区块纵向间距（§ 4.2，断点内升档） */
  --section-y: var(--sp-8);   /* < 640px = 64px */

  /* ---------------------------------------------------------------------
     10. 容器 / 栅格（design-spec § 4.3）
     --------------------------------------------------------------------- */
  --measure: 620px;           /* 正文窄栏 ≈ 38 汉字/行 */
  --content: 1120px;          /* 标准内容宽 */
  --wide: 1280px;             /* 含侧栏宽 */
  --gutter: 16px;             /* 移动 gutter；§9 升档 */
  --safe-x: 20px;             /* 移动安全边距 */
  --card-pad: var(--sp-4);    /* 移动卡片内距；§9 升档 */

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-full: 999px;

  --border-hair: 1px solid var(--neutral-350);

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.7);
  --glow-primary: 0 0 24px rgba(90, 169, 255, 0.35);
  --glow-accent: 0 0 24px rgba(255, 106, 106, 0.35);

  /* 导航高度（sticky 偏移与 scroll-margin 依据） */
  --nav-h: 56px;
  --tabbar-h: 56px;
  --lightbox-border: rgba(127, 196, 255, 0.28);
  --lightbox-glow: 0 0 64px rgba(90, 169, 255, 0.18);

  --overlay-nav: rgba(7, 11, 20, 0.86);
  --overlay-tabbar: rgba(7, 11, 20, 0.94);
  --overlay-lightbox: rgba(4, 6, 12, 0.94);
  --overlay-icon-btn: rgba(7, 11, 20, 0.72);
  --scrim-none: rgba(7, 11, 20, 0);
  --scrim-hover: rgba(7, 11, 20, 0.28);
  --scrim-press: rgba(7, 11, 20, 0.5);
  --scrim-caption: rgba(7, 11, 20, 0.92);
  --paper-3d: rgba(61, 46, 31, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

/* ==========================================================================
   断点升档 —— min-width 移动优先（design-spec § 6.2）
   四个断点：640 / 1024 / 1280，无 1280 以上
   ========================================================================== */

/* 640–1023px Tablet */
@media (min-width: 640px) {
  :root {
    --section-y: 80px;
    --gutter: 24px;
    --safe-x: 24px;
    --nav-h: 56px;
    /* H1 保持 48px 不缩，Display 46px（§ 3.2 移动值之上、桌面值之下） */
    --fs-display: 46px;  --lh-display: 1.08;
    --fs-h1: 48px;       --lh-h1: 1.15;
    --fs-h2: 30px;       --lh-h2: 1.25;
    --fs-h3: 23px;       --lh-h3: 1.35;
  }
}

/* 1024–1279px Desktop */
@media (min-width: 1024px) {
  :root {
    --section-y: 96px;
    --gutter: 24px;
    --safe-x: 32px;
    --nav-h: 72px;
    --card-pad: var(--sp-5);
    --fs-display: 64px;  --lh-display: 1.05;
    --fs-h1: 48px;       --lh-h1: 1.15;
    --fs-h2: 36px;       --lh-h2: 1.2;
    --fs-h3: 26px;       --lh-h3: 1.3;
    --fs-h4: 20px;       --lh-h4: 1.4;
    --fs-lead: 20px;     --lh-lead: 1.8;
    --fs-body: 16px;     --lh-body: 1.9;
    --fs-caption: 14px;  --lh-caption: 1.7;
  }
}

/* ≥ 1280px Wide */
@media (min-width: 1280px) {
  :root {
    --content: 1280px;   /* § 6.1-1：宽屏用 --wide 1280 居中，绝不无限拉伸 */
    --fs-display: 72px;  /* § 6 表格：Display 可到 72px */
  }
}

/* 换气缝：A→B / A→C 的章节缝，仅 ≥1280px（§ 4.2） */
@media (min-width: 1280px) {
  :root { --section-y-breath: var(--sp-10); }   /* 128px */
}
@media (max-width: 1279px) {
  :root { --section-y-breath: var(--section-y); }
}