/* ==========================================================================
   土地里 TUDILI — 设计令牌（唯一事实来源：docs/design-tokens.md）
   --------------------------------------------------------------------------
   三层架构：Primitive（原始）→ Semantic（语义）→ Surface（表面作用域）。
   组件层变量默认值（--btn-* / --card-* 等）随组件定义在 main.css，
   实例级覆写只改组件变量（如 .btn-sm 只改 --btn-pad-*）。

   规则（详见 tokens 文档 §1/§5）：
   · 组件/页面只允许引用语义层、组件层 token 与 --surface-*，
     禁止 primitive 直引与裸值（例外：一次性装饰渐变、深底玻璃 rgba 族）。
   · 断点约定：bp-lg 1080 / bp-md 860 / bp-xs 380 / bp-short max-height 780。
     响应式优先改 :root 的 token 值（见文件尾的 bp-md 覆盖块），少写组件断点。
   · 新增/修改 token 必须回 docs/design-tokens.md 登记。
   ========================================================================== */

:root {
  /* —— 2.1 鎏金主色（取自 Logo 渐变） —— */
  --gold-100: #FBF3DC;
  --gold-200: #F2DFAE;
  --gold-300: #E4C579;
  --gold-400: #D4A94A;
  --gold-500: #C2912F;
  --gold-600: #A0741F;
  --gold-700: #7C5715;

  /* —— 2.2 大地 / 生鲜 / 果品 —— */
  --ink: #1B1710;
  --ink-2: #2A2317;
  --earth: #4A3A26;
  --bark: #6B5638;   /* 保留 */
  --leaf: #2F5D3A;
  --leaf-2: #3F7A4A;
  --leaf-3: #6FA97C;
  --berry: #C0392B;
  --citrus: #E8890C;
  --grape: #7B3F61;  /* 保留 */

  /* —— 2.3 中性 —— */
  --paper: #FBF8F1;
  --paper-2: #F4EEE1;
  --cream: #EFE6D4;
  --white: #FFFFFF;

  /* —— 2.4 透明度派生（玻璃质感，§2.4 二选一：全站统一 color-mix/rgba 混用约定
        为「重复出现的线色/遮罩走 token，一次性玻璃 rgba 就地书写」） —— */
  --gold-line: rgba(194, 145, 47, .22);
  --gold-line-inv: rgba(228, 197, 121, .24);
  /* pane 遮罩三段（.pane-light 在组件层覆写这三档） */
  --ink-veil-1: rgba(20, 16, 8, .74);
  --ink-veil-2: rgba(20, 16, 8, .5);
  --ink-veil-3: rgba(20, 16, 8, .8);
  /* 深底玻璃：面板底/边、深底按钮底 */
  --glass-dark: rgba(255, 255, 255, .07);
  --glass-dark-border: rgba(255, 255, 255, .13);
  --glass-deep: rgba(18, 15, 9, .55);

  /* —— 2.5 字体族 —— */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
    Georgia, serif;
  --font-num: "Optima", "Baskerville", Georgia, var(--font-serif);

  /* —— 2.6 字阶 —— */
  --fs-display: clamp(46px, 8.4vw, 116px);
  --fs-h1: clamp(34px, 5vw, 66px);
  --fs-h2: clamp(27px, 3.4vw, 44px);
  --fs-h3: clamp(20px, 2vw, 26px);
  --fs-lead: clamp(16px, 1.35vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12.5px;
  --fs-eyebrow: 12px;
  --lh-tight: 1.22;
  --lh-body: 1.75;
  --lh-loose: 1.85;

  /* —— 2.7 间距（4px 基网） —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  /* —— 2.8 圆角 / 阴影 / 动效 / 层级 / 布局 —— */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(60, 44, 16, .06);
  --shadow-md: 0 14px 40px rgba(60, 44, 16, .1);
  --shadow-lg: 0 30px 80px rgba(43, 31, 8, .18);
  --shadow-gold: 0 18px 44px rgba(160, 116, 31, .28);
  --shadow-gold-hover: 0 22px 54px rgba(160, 116, 31, .38);
  --shadow-focus: 0 0 0 4px rgba(194, 145, 47, .13);

  --dur-fast: .25s;
  --dur-base: .45s;
  --dur-slow: .9s;
  /* 环境光效循环（脉冲圆点 / 滚动提示线），非交互动效 */
  --dur-pulse: 2.4s;
  --dur-scroll-hint: 2.2s;
  /* 进场动画的级联步长 */
  --stagger-step: .1s;
  --ease: cubic-bezier(.22, .68, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --z-anchorbar: 40;
  --z-pagedots: 60;
  --z-totop: 80;
  --z-drawer: 99;
  --z-header: 100;
  --z-toggle: 2; /* 汉堡按钮在 header 内部的局部层级 */
  --z-content: 3; /* 分屏内容层：压过遮罩(-1)与视差背景(-2) */

  --wrap: 1240px;
  --wrap-narrow: 880px;
  --wrap-header: 1440px;
  --header-h: 76px;

  /* —— 3.3 间距语义 —— */
  --space-section: var(--space-30);
  --space-section-tight: 84px;
  --space-gutter: 26px;

  /* —— 3.1 文字语义 —— */
  --color-text: #241D12;
  --color-text-2: #5C503C;
  --color-text-3: #8A7C63;
  --color-text-inv: #F7F1E4;
  --color-text-inv-2: rgba(247, 241, 228, .72);
  --color-text-inv-3: rgba(247, 241, 228, .6);
  --color-text-inv-strong: rgba(255, 255, 255, .85);
  --color-brand: var(--gold-500);
  --color-brand-text: var(--gold-600);
  --color-brand-text-inv: var(--gold-300);
  --color-on-brand: #2A1E05; /* 金色填充上的深棕文字/图标 */
  --color-success: var(--leaf);
  --color-warning: #A66405;
  --color-danger: var(--berry);

  /* —— 4 渐变令牌（深浅底自动切换：组件只引 --grad-gold-text） —— */
  --grad-gold-text-dark: linear-gradient(150deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-600) 100%);
  --grad-gold-text-light: linear-gradient(160deg, var(--gold-300) 0%, var(--gold-600) 55%, var(--gold-700) 100%);
  --grad-gold-text: var(--grad-gold-text-light);
  --grad-gold-btn: linear-gradient(140deg, var(--gold-300), var(--gold-500));

  /* —— 3.2 表面作用域（浅色为默认） —— */
  --surface-bg: var(--paper);
  --surface-card: var(--white);
  --surface-card-hover: var(--white);
  --surface-card-border: rgba(194, 145, 47, .14);
  --surface-card-border-hover: rgba(194, 145, 47, .34);
  --surface-card-blur: none;
  --surface-text: var(--color-text);
  --surface-text-2: var(--color-text-2);
  --surface-text-3: var(--color-text-3);
  --surface-gold-text: var(--color-brand-text);
  --surface-tag-bg: var(--gold-100);
  --surface-tag-fg: var(--gold-700);
  --surface-tag-border: var(--gold-line);
  --surface-eyebrow: var(--color-brand-text);
  --surface-eyebrow-line: linear-gradient(90deg, var(--gold-300), var(--gold-500));
  --surface-quote-mark: .45;
  --surface-shadow: var(--shadow-sm);
}

[data-surface="tint"] {
  --surface-bg: var(--paper-2);
}

[data-surface="dark"] {
  --surface-bg: var(--ink);
  --surface-card: rgba(255, 255, 255, .06);
  --surface-card-hover: rgba(255, 255, 255, .11);
  --surface-card-border: rgba(255, 255, 255, .14);
  --surface-card-border-hover: rgba(228, 197, 121, .38);
  --surface-card-blur: blur(14px);
  --surface-text: var(--color-text-inv);
  --surface-text-2: var(--color-text-inv-2);
  --surface-text-3: var(--color-text-inv-3);
  --surface-gold-text: var(--color-brand-text-inv);
  --surface-tag-bg: rgba(228, 197, 121, .16);
  --surface-tag-fg: var(--gold-200);
  --surface-tag-border: var(--gold-line-inv);
  --surface-eyebrow: var(--gold-300);
  --surface-eyebrow-line: linear-gradient(90deg, var(--gold-300), transparent);
  --surface-quote-mark: .2;
  --surface-shadow: 0 18px 44px rgba(0, 0, 0, .3);
  --grad-gold-text: var(--grad-gold-text-dark);
  color: var(--surface-text);
}

/* —— 响应式 token 覆盖（bp-md 移动端总开关；组件层不再重复写这些值） —— */
@media (max-width: 860px) {
  :root {
    --header-h: 60px;
    --space-section: 76px;
    --space-section-tight: 56px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
  }
}