/* ==========================================================================
   Qi House · Design Tokens
   --------------------------------------------------------------------------
   定调：轻奢雅致（Luxury / refined）
   材质：暖白宣纸 × 砚墨 × 朱砂一点
   记忆点：竖排汉字的"东方引文栏" + 超大 Didot 序号 + 朱砂印章式标记
   ========================================================================== */

:root {
  /* ---------- 色彩 · 宣纸与墨 ---------- */
  --paper:        #F7F4ED;                 /* 主背景 · 暖白宣纸 */
  --paper-deep:   #F0EBE0;                 /* 次级区块底 */
  --paper-warm:   #EDE6D8;                 /* 卡片 / 悬浮底 */
  --ink:          #16130F;                 /* 主文字 · 砚墨（暖调近黑，非纯黑） */
  --ink-soft:     #2E2821;                 /* 次级墨色 */
  --muted:        #6E675C;                 /* 辅助文字 · 5.1:1 on --paper */
  --faint:        #A79E90;                 /* 序号 / 占位 */
  --rule:         rgba(22, 19, 15, 0.12);  /* 发丝线 */
  --rule-strong:  rgba(22, 19, 15, 0.26);

  /* ---------- 强调色 · 朱砂（全站唯一强调色，仅用于关键动作） ---------- */
  --cinnabar:      #B03A2A;                /* 5.5:1 on --paper */
  --cinnabar-deep: #8A2C1F;
  --cinnabar-wash: rgba(176, 58, 42, 0.07);

  /* ---------- 反色区块 · 夜墨 ---------- */
  --ink-bg:        #14110D;
  --ink-bg-soft:   #1F1A14;
  --ink-text:      #F4F0E8;
  --ink-muted:     #A79D8D;
  --ink-rule:      rgba(244, 240, 232, 0.16);
  --cinnabar-lift: #D2705E;                /* 深底上的朱砂提亮版 · 5.6:1 on --ink-bg */
  --on-accent:     #14110D;                /* 深底上朱砂色块内的文字色 · 5.6:1 on --cinnabar-lift */

  /* ---------- 字体 ----------
     展示字：Didot（macOS 系统自带，与品牌字标同源）→ Bodoni Moda（Web 兜底）
     正文字：Jost（几何人文无衬线，克制不抢戏）
     中文兜底：展示走宋体系（Songti SC / 思源宋体），正文走黑体系（PingFang / 苹方）
     —— 不加载中文字体包，靠系统字体保证首屏性能 */
  --font-display: 'Didot', 'Bodoni Moda', 'Songti SC', 'STSong', 'Noto Serif SC', Georgia, serif;
  --font-sans:    'Jost', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, monospace;

  /* ---------- 字阶（流体，基于 clamp） ---------- */
  --fs-hero:    clamp(2.9rem, 9.2vw, 8.25rem);
  --fs-display: clamp(2.15rem, 5.2vw, 4.5rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.75rem);
  --fs-h3:      clamp(1.2rem, 1.7vw, 1.6rem);
  --fs-h4:      clamp(1.0625rem, 1.2vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.75rem;
  --fs-num:     clamp(3.25rem, 7vw, 6.25rem);

  /* ---------- 行高 ---------- */
  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-base:  1.68;
  --lh-loose: 1.88;

  /* ---------- 字距 ---------- */
  --ls-display: -0.025em;
  --ls-tight:   -0.012em;
  --ls-label:    0.2em;
  --ls-cjk:      0.02em;

  /* ---------- 间距节奏 ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 144px;
  --section-y: clamp(76px, 10.5vw, 156px);
  --gutter:    clamp(20px, 5vw, 64px);
  --maxw:      1280px;
  --maxw-text: 66ch;

  /* ---------- 圆角（轻奢方向：近乎直角） ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 12px;
  --r-pill: 999px;

  /* ---------- 阴影（带环境暖色，不用纯黑） ---------- */
  --shadow-1: 0 2px 10px rgba(52, 40, 26, 0.05);
  --shadow-2: 0 10px 34px rgba(52, 40, 26, 0.09);
  --shadow-3: 0 28px 70px rgba(52, 40, 26, 0.15);

  /* ---------- 动效 ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 340ms;
  --dur-slow: 680ms;

  /* ---------- 层级 ---------- */
  --z-atmosphere: 0;
  --z-grain:      1;
  --z-content:    2;
  --z-header:     50;
  --z-overlay:    90;
}

/* 深色区块内部反向令牌 —— 组件代码不变，只换语义别名 */
[data-surface='ink'] {
  --paper:       var(--ink-bg);
  --paper-deep:  var(--ink-bg-soft);
  --paper-warm:  #262019;
  --ink:         var(--ink-text);
  --ink-soft:    #E4DED2;
  --muted:       var(--ink-muted);
  /* --faint 在深底上必须提亮：原 #7C7364 只有 4.05:1，不达正文标准 */
  --faint:       #8C8271;
  --rule:        var(--ink-rule);
  --rule-strong: rgba(244, 240, 232, 0.32);
  --cinnabar:    var(--cinnabar-lift);
  --cinnabar-deep: #E08D7C;
  --cinnabar-wash: rgba(210, 112, 94, 0.12);
  color: var(--ink);
  background: var(--paper);
}

/* 深底上的朱砂按钮必须用深色字：白字压在提亮朱砂上只有 3.2:1 */
[data-surface='ink'] .btn { --btn-fg: var(--on-accent); }
[data-surface='ink'] .seal { color: var(--on-accent); }
[data-surface='ink'] .btn--ghost { --btn-fg: var(--ink-text); border-color: var(--rule-strong); }
[data-surface='ink'] .btn--ghost::after { background: var(--ink-text); }
[data-surface='ink'] .btn--ghost:hover { --btn-fg: var(--ink-bg); border-color: var(--ink-text); }