/* ============================================================
   佛山木版年画数字图谱 · 设计令牌
   色板经 OKLab / CVD 验证器校验，非目测取色。
   校验记录见 research/色板校验.md
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 表面与墨色（宣纸 / 松烟墨） ---------- */
  --paper:        #F7F1E3;   /* 宣纸本色 · 页面底 */
  --paper-raised: #FDFAF1;   /* 纸面 · 卡片 */
  --paper-sunk:   #EFE6D3;   /* 压印 · 分区底 */
  --ink:          #1C1A17;   /* 松烟墨 · 主文字 */
  --ink-2:        #4A453D;   /* 次文字 */
  --ink-3:        #6F675A;   /* 弱文字 · 轴线（对纸底 4.95:1） */
  --rule:         #DED3BC;   /* 界线 */
  --rule-soft:    #E8DFCC;   /* 弱界线 */

  /* ---------- 年画本色（用于内容再现，不作数据编码） ---------- */
  --dan:          #D2532E;   /* 广丹（朱）· 装饰填充  3.72:1 */
  --dan-ink:      #B93A22;   /* 广丹 · 正文安全        5.05:1 */
  --teng:         #DFA02F;   /* 藤黄 */
  --qing:         #2F6084;   /* 石青 */
  --mo:           #1C1A17;   /* 墨线版 */

  /* ---------- 证据等级 · 有序色阶（石青单色相） ----------
     浅 → 深 = 弱 → 强。明暗两模式锚点翻转。 */
  --ev-4: #194060;   /* 一手文物 */
  --ev-3: #2F6084;   /* 古籍原文 */
  --ev-2: #4E7896;   /* 学术研究（对纸白 4.52:1） */
  --ev-1: #7FA3BA;   /* 二手转述 */
  --ev-on: #FDFAF1;  /* 深色阶上的文字色 */
  --ev-on-1: #131210; /* 最浅一阶改用深字：7.00:1 */

  /* ---------- 幕背景照片的纸色蒙版 ----------
     背景图只作气氛，不承载论据。蒙版保证正文与控件的对比度
     不因底图深浅而变化；数值按各幕底图的疏密分别给。 */
  --photo-veil-see:     rgba(247, 241, 227, .58);
  --photo-veil-source:  rgba(247, 241, 227, .70);
  --photo-veil-craft:   rgba(247, 241, 227, .86);
  --photo-veil-opera:   rgba(247, 241, 227, .86);
  --photo-veil-legacy:  rgba(247, 241, 227, .66);
  /* 时间轴底图自带一根轴线与几枚圆点，压到 .90 才不至于被
     误认成真实的年代节点；山形留白仍可辨。中段再叠一道更厚的
     蒙版，把底图自带的轴线与圆点盖掉，只留底部两侧的山形。 */
  --photo-veil-timeline:      rgba(247, 241, 227, .90);
  --photo-veil-timeline-band: rgba(247, 241, 227, .965);
  --photo-veil-timeline-clear: rgba(247, 241, 227, 0);


  /* ---------- 排版 ---------- */
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
                "SimSun", "宋体", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", "PingFang SC",
                "Microsoft YaHei", "微软雅黑", sans-serif;

  /* 级差拉大：标题走大字，正文压回 1rem，中间不设过渡档。
     极简不是「都变细」，是「少的更少、大的更大」。 */
  --fs-hero:  clamp(3rem, 9vw, 6.8rem);
  --fs-h1:    clamp(2rem, 5.2vw, 3.6rem);
  --fs-h2:    clamp(1.45rem, 3vw, 2.15rem);
  --fs-h3:    clamp(1.06rem, 1.7vw, 1.3rem);
  --fs-body:  clamp(1rem, 1.1vw, 1.06rem);
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;

  --lh-body: 1.9;
  --lh-tight: 1.25;

  /* 字号间距（中文正文需要更松的字距） */
  --ls-body: 0.02em;
  --ls-title: 0.06em;

  /* ---------- 空间 ---------- */
  --gap-s:  clamp(.5rem, 1vw, .8rem);
  --gap:    clamp(1rem, 2vw, 1.5rem);
  --gap-m:  clamp(1.5rem, 3vw, 2.4rem);
  --gap-l:  clamp(2.4rem, 6vw, 5rem);
  --gap-xl: clamp(5rem, 12vw, 11rem);   /* 「留白」是版面成分，不是边距 */
  --pad-x:  clamp(1.25rem, 6vw, 6rem);
  --measure: 34rem;          /* 正文最大行宽，收紧到 34rem 更耐读 */

  --radius: 1px;             /* 近乎直角：年画是方的，界面不该圆 */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .42s;
}

/* ============================================================
   暗色 · 深墨
   锚点翻转：证据色阶在暗底上「亮 = 强」
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --paper:        #1A1814;
    --paper-raised: #232019;
    --paper-sunk:   #131210;
    --ink:          #EFE9DB;
    --ink-2:        #C4BCA9;
    --ink-3:        #8B8371;
    --rule:         #3A362C;
    --rule-soft:    #2B2822;

    --dan:     #D2622E;
    --dan-ink: #E08A5E;
    --teng:    #D9A344;
    --qing:    #6695B4;
    --mo:      #EFE9DB;

    --ev-4: #C3D9E6;
    --ev-3: #94B7CE;
    --ev-2: #6695B4;
    --ev-1: #3E7093;
    --ev-on: #131210;
    --ev-on-1: #FDFAF1;

    --photo-veil-see:     rgba(26, 24, 20, .94);
    --photo-veil-source:  rgba(26, 24, 20, .95);
    --photo-veil-craft:   rgba(26, 24, 20, .96);
    --photo-veil-opera:   rgba(26, 24, 20, .96);
    --photo-veil-legacy:  rgba(26, 24, 20, .94);
    --photo-veil-timeline:      rgba(26, 24, 20, .975);
    --photo-veil-timeline-band: rgba(26, 24, 20, .988);
    --photo-veil-timeline-clear: rgba(26, 24, 20, 0);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #1A1814;
  --paper-raised: #232019;
  --paper-sunk:   #131210;
  --ink:          #EFE9DB;
  --ink-2:        #C4BCA9;
  --ink-3:        #8B8371;
  --rule:         #3A362C;
  --rule-soft:    #2B2822;

  --dan:     #D2622E;
  --dan-ink: #E08A5E;
  --teng:    #D9A344;
  --qing:    #6695B4;
  --mo:      #EFE9DB;

  --ev-4: #C3D9E6;
  --ev-3: #94B7CE;
  --ev-2: #6695B4;
  --ev-1: #3E7093;
  --ev-on: #131210;
  --ev-on-1: #FDFAF1;

  --photo-veil-see:     rgba(26, 24, 20, .94);
  --photo-veil-source:  rgba(26, 24, 20, .95);
  --photo-veil-craft:   rgba(26, 24, 20, .96);
  --photo-veil-opera:   rgba(26, 24, 20, .96);
  --photo-veil-legacy:  rgba(26, 24, 20, .94);
  --photo-veil-timeline:      rgba(26, 24, 20, .975);
  --photo-veil-timeline-band: rgba(26, 24, 20, .988);
  --photo-veil-timeline-clear: rgba(26, 24, 20, 0);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01s; }
}