/* ==========================================================================
   心筑臻品装饰 · 设计 Token（CSS 变量）
   说明：全站主题集中管理，组件样式一律引用变量，禁止硬编码散落。
   字体策略（vanilla 方案拍板）：使用系统字体栈，不引入外部字体请求以保证 LCP。
   【接入点】如未来自托管字体（@fontsource 思源宋体/黑体字重子集），
   只需在此处替换 --font-serif / --font-sans 的取值（保留系统栈兜底）即可全站生效。
   ========================================================================== */
:root {
  /* ---- 色板：高级灰 + 品牌绛红 ---- */
  --color-bg:           #F6F6F5; /* 暖灰白背景 */
  --color-bg-alt:       #EFEFED; /* 区块交替背景 */
  --color-surface:      #FFFFFF; /* 卡片纯白 */
  --color-text:         #1C1C1C; /* 主文字 */
  --color-text-2:       #6E6E6E; /* 次文字 */
  --color-border:       #E4E4E2; /* 中性边界 */
  --color-brand:        #B11925; /* 品牌绛红：CTA / 标题点缀 / 下划线 / 图标 */
  --color-brand-hover:  #8E1420; /* 绛红 hover 加深 */
  --color-brand-tint:   #F7E9EA; /* 绛红极淡底色（占位封面 / 标签） */

  /* 页脚暗色主题（反相区块，独立一套避免与主色混用） */
  --color-footer-bg:       #1C1C1C; /* 页脚背景 */
  --color-footer-text:     #D9D9D9; /* 页脚主文字 */
  --color-footer-text-2:   #9A9A9A; /* 页脚次文字（标语 / 提示 / 版权） */
  --color-footer-text-3:   #B5B5B5; /* 页脚导航 / 联系文字 */
  --color-footer-border:   rgba(255, 255, 255, 0.08); /* 页脚分隔线 */

  /* 品牌红底之上的文字 / 描边（CTA 反白色按钮等） */
  --color-on-brand:        #FFFFFF;
  --color-on-brand-border: rgba(255, 255, 255, 0.7);

  /* 暗色渐变遮罩（首页 Hero 背景图上叠加，保证标题/CTA 对比度；【接入点】替换为真实图后通常保留） */
  --hero-scrim: linear-gradient(105deg, rgba(20, 18, 18, 0.82) 0%, rgba(20, 18, 18, 0.55) 48%, rgba(20, 18, 18, 0.28) 100%);
  /* 内页标题带（.page-hero）暗色遮罩：浓度适中，保证标题/副标题清晰可读（【接入点】替换真实图后可微调） */
  --page-hero-scrim: linear-gradient(180deg, rgba(20, 18, 18, 0.74) 0%, rgba(20, 18, 18, 0.52) 55%, rgba(20, 18, 18, 0.66) 100%);
  /* 品牌红在暗底之上的提亮强调色（Hero 强调字 / 描边，避免使用深红导致低对比） */
  --color-brand-soft:      #E58E94;

  /* ---- 字体栈 ---- */
  /* 标题：衬线（宋体系列） */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  /* 正文：无衬线（黑体系列） */
  --font-sans:  "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---- 间距：8px 栅格 ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-section-y: 96px; /* 桌面区块上下内边距（移动端降至 48px，见响应式） */

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* ---- 柔和阴影 ---- */
  --shadow-sm: 0 2px 8px rgba(28, 28, 28, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 28, 28, 0.06);

  /* ---- 布局 ---- */
  --container-max: 1200px;        /* 内容最大宽度 */
  --header-height: 64px;          /* 固定导航高度（锚点滚动留白用） */

  /* ---- 过渡（GPU 友好：仅 transform / opacity） ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  /* ---- 断点参考（媒体查询在 style.css 按 max-width 递减实现：1024 / 768 / 640） ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}