/* ==========================================================================
   variables.css — 设计令牌（Design Tokens）
   小宇的九个世界 · 视觉基线
   原则：UI 克制，让作品成为页面中最鲜艳的部分。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     一、纸张与墨 —— 主色板
     背景为米白／暖白纸张色，不使用纯白科技官网风。
     ------------------------------------------------------------------ */
  --paper:          #faf7f1;   /* 页面主背景：暖白纸 */
  --paper-warm:     #f4efe6;   /* 次级区块背景 */
  --paper-deep:     #ebe4d6;   /* 更深区块（衍生品区） */
  --paper-card:     #fffdfa;   /* 卡片／浮层 */

  --ink:            #211d18;   /* 主文字：暖黑，非纯黑 */
  --ink-2:          #57504a;   /* 次级文字 */
  --ink-3:          #8b8378;   /* 辅助文字 */
  --ink-4:          #b3a99c;   /* 极弱文字／编号 */
  --ink-inverse:    #f6f2ea;   /* 深底上的文字 */

  /* 分隔线：暖灰细线 */
  --rule:           rgba(33, 29, 24, 0.13);
  --rule-soft:      rgba(33, 29, 24, 0.07);

  /* ------------------------------------------------------------------
     二、点缀色 —— 极少量使用
     仅用于焦点态、下划线、色点等微小面积。
     ------------------------------------------------------------------ */
  --accent:         #b4553a;   /* 赭红 */
  --accent-deep:    #8f3f2a;
  --accent-soft:    rgba(180, 85, 58, 0.12);

  /* ------------------------------------------------------------------
     三、尾声区深色 —— 用于最后一屏的沉浸背景
     ------------------------------------------------------------------ */
  --dusk:           #17130f;
  --dusk-2:         #241e18;

  /* ------------------------------------------------------------------
     四、字体族
     标题：宋体系（展览／书刊感）
     正文：黑体系（清晰）
     英文数字：现代无衬线
     ------------------------------------------------------------------ */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
                "Songti SC", "STSong", "STZhongsong", "SimSun", Georgia, "Times New Roman", serif;
  --font-sans:  "Noto Sans SC", "Source Han Sans SC", "Source Han Sans CN",
                "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui,
                -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-en:    "Inter", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ------------------------------------------------------------------
     五、字号阶梯
     桌面端：Hero 64–88px / 章节标题 42–56px / 作品标题 26–34px / 正文 16–18px
     使用 clamp 保证移动端自适应。
     ------------------------------------------------------------------ */
  --fs-hero:     clamp(2.55rem, 6.1vw, 5.5rem);      /* 41 → 88px */
  --fs-h2:       clamp(1.8rem, 3.5vw, 3.375rem);     /* 29 → 54px */
  --fs-h3:       clamp(1.28rem, 1.85vw, 1.75rem);    /* 20 → 28px */
  --fs-art:      clamp(1.22rem, 1.6vw, 1.75rem);     /* 作品标题 20 → 28px */
  --fs-lead:     clamp(1.05rem, 1.25vw, 1.22rem);    /* 导语 */
  --fs-body:     clamp(1rem, 1.02vw, 1.0625rem);     /* 16 → 17px */
  --fs-sm:       0.875rem;
  --fs-xs:       0.8125rem;
  --fs-label:    0.6875rem;                          /* 英文小字标签 11px */

  /* 行高与字距 */
  --lh-hero:     1.14;
  --lh-tight:    1.2;
  --lh-title:    1.34;
  --lh-body:     1.95;
  --ls-label:    0.2em;
  --ls-cn-title: 0.03em;

  /* ------------------------------------------------------------------
     六、间距 —— 4px 基准网格
     ------------------------------------------------------------------ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --section-y:  clamp(4.5rem, 9vw, 9.5rem);   /* 章节垂直节奏 */
  --block-gap:  clamp(2rem, 4vw, 4.5rem);

  /* ------------------------------------------------------------------
     七、布局
     ------------------------------------------------------------------ */
  --container:      1280px;
  --container-wide: 1560px;
  --measure:        44rem;        /* 正文最大行宽 ≈ 704px */
  --measure-narrow: 34rem;
  --gutter:         clamp(1.25rem, 4.2vw, 4.5rem);
  --nav-h:          74px;

  /* ------------------------------------------------------------------
     八、圆角 / 阴影 / 缓动
     圆角极小，避免“圆角卡片堆”的通用 AI 审美。
     ------------------------------------------------------------------ */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   10px;
  --r-full: 999px;

  /* 作品图浮起感：模拟纸张微微离墙 */
  --shadow-art:       0 1px 2px rgba(33, 29, 24, 0.05), 0 14px 34px -14px rgba(33, 29, 24, 0.24);
  --shadow-art-hover: 0 2px 4px rgba(33, 29, 24, 0.06), 0 30px 64px -22px rgba(33, 29, 24, 0.34);
  --shadow-lift:      0 24px 70px -28px rgba(33, 29, 24, 0.32);

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-fast:  220ms;
  --dur:       480ms;
  --dur-slow:  720ms;

  /* 作品画幅比例（九幅作品统一 1279×1553） */
  --art-ratio: 1279 / 1553;
}