/* ============================================================
   Prunus Landing 设计令牌
   对齐 UI_UX_DESIGN_GUIDE.md §2 与产品 src/index.css @theme
   （leaf 主色 / cream 米白 / blossom 桃粉 点缀）
   ============================================================ */

:root {
  /* ---- leaf 主色（暖调绿，产品唯一主色板） ---- */
  --leaf-50:  #f7faf6;
  --leaf-100: #eef4ec;
  --leaf-200: #d5e5d1;
  --leaf-300: #b3cfac;
  --leaf-400: #8fb787;
  --leaf-500: #6a9e62;
  --leaf-600: #4a7c44;
  --leaf-700: #3d6538;
  --leaf-800: #345232;
  --leaf-900: #2a4229;

  /* ---- cream 米白背景（替代冷白） ---- */
  --cream-50:  #fdfcfa;
  --cream-100: #f9f7f3;
  --cream-200: #f2ede5;
  --cream-300: #e6dfd3;

  /* ---- blossom 桃粉点缀（少量使用，品牌点缀） ---- */
  --blossom:       #e8a4b0;
  --blossom-light: #f5d5dc;

  /* ---- gray 中性（UI guide §2.2） ---- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---- 语义别名（组件层只用别名，不直接引用色板） ---- */
  --bg:             var(--cream-50);   /* 页面底 */
  --text-1:         var(--gray-800);   /* 标题 */
  --text-2:         var(--gray-500);   /* 次级正文 */
  --text-3:         var(--gray-400);   /* 弱化/占位/图标 */
  --border-hair:    var(--gray-100);   /* 分隔线 / nav 底 */
  --border-card:    var(--gray-200);   /* 输入框 / 卡片边框 */

  --primary:        var(--leaf-600);   /* 主操作色（CTA / 发送钮） */
  --primary-hover:  var(--leaf-700);   /* primary hover / 强调文字 */
  --primary-soft:   var(--leaf-100);   /* 用户气泡底等浅色 */
  --primary-ring:   var(--leaf-400);   /* 强调描边 / AI 气泡左边框 */
  --accent:         var(--blossom);    /* 品牌点缀 */

  /* ---- 圆角（对齐 guide §3.1：卡片 rounded-2xl / 小件 rounded-lg / pill） ---- */
  --radius:        16px;               /* rounded-2xl */
  --radius-lg:     12px;               /* rounded-lg 附近 */
  --radius-pill:   999px;

  /* ---- 阴影（guide §3.2 卡片阴影系） ---- */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 8px 30px -4px rgba(0, 0, 0, 0.08);

  --transition: 0.25s ease;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ============================================================
     排版 scale
     命名用 --fs-*（字号），与上方 --text-1/2/3（**颜色**）区分开。
     除标注「新增档位」外，每个值都等于页面中已存在的真实数值（见注
     释），供后续新增区块复用，避免各区块自造字号。
     components.css 是已冻结的滚动动画样式、不引用这些 token，各行
     数值只是记录现有实现，不是它的实时镜像。
     ============================================================ */
  --fs-display:    clamp(38px, 5.5vw, 58px);  /* = .hero-section h1 现值 */
  --fs-h2:         clamp(26px, 4vw, 38px);    /* 新增档位：填补 48 → 15 之间的断层 */
  --fs-h3:         clamp(18px, 2.2vw, 22px);  /* 新增档位 */
  --fs-eyebrow:    12.5px;                    /* = .nav-cta 现值 */
  --fs-lead:       clamp(16px, 1.4vw, 18px);  /* 新增档位 */
  --fs-body:       15px;                      /* = .chat-input-box .fixed-text 现值 */
  --fs-sm:         13.5px;                    /* = .nav-links a / .bubble 现值 */
  --fs-xs:         12px;                      /* = .address-bar 现值 */

  --leading-tight:  1.12;  /* = .hero-section h1 现值 */
  --leading-snug:   1.3;   /* = .slogan-text 现值 */
  --leading-normal: 1.6;   /* = body / .bubble 现值 */

  --tracking-tight:  -0.03em;  /* = .hero-section h1 / .slogan-text 现值 */
  --tracking-normal: -0.01em;  /* = .nav-logo / .brand-name 现值 */
  --tracking-wide:   0.08em;   /* 唯一全新值：眉标需要字距才读得出「标签」感 */

  /* ============================================================
     布局（仅供新增区块使用）
     ============================================================ */
  /* 仅作 JS 写入前的兜底值。导航高度在 components.css 里有 4 处硬编码
     （.nav 的 height、.sticky-viewport 的 top 与 height、reduced-motion
     的动画区高度），且 ≤600px 会变成 50px —— 那份文件已冻结，无法把
     它们收敛成 token。因此这里**不镜像断点**，改由 js/main.js 用
     ResizeObserver 把导航实测高度写回本变量，CSS 只消费不复制，
     避免出现两个会互相漂移的真源。 */
  --nav-h:          54px;
  --container:      720px;   /* 散文型区块，与 .slogan-content 的 700 同量级 */
  --container-wide: 1120px;  /* 栅格 / 特性区块（3 列卡 3×336 + 2×24 间距 + 两侧留白） */
  --gutter:         clamp(20px, 5vw, 32px);   /* 与 .hero-content / .slogan-section 的 20px 对齐 */
  --section-y:      clamp(72px, 9vw, 120px);  /* 相邻区块之间的**完整**间隙，用法见 sections.css */
}