/* ==========================================================================
   咸阳华尔倍丽 HUEBELLE · 设计令牌（Design Tokens）
   风格：Minimalism + Soft UI Evolution · 暖调高端医美
   配色：香槟金主强调 + 玫瑰木次强调 + 暖米中性 + 深墨文字
   ========================================================================== */

:root {
  /* ---------- 品牌配色 ---------- */
  /* 香槟金：主品牌强调（按钮 / 装饰线 / 高亮） */
  --gold: #b89766;
  --gold-deep: #9a7b4a;        /* hover 加深 */
  --gold-soft: #ddc8a3;        /* 浅金 装饰底色 */
  --gold-tint: #f3e9d8;        /* 极浅金 区块背景 */

  /* 玫瑰木：次强调（女性 / 温暖，克制使用） */
  --rose: #b47b6e;
  --rose-deep: #976257;
  --rose-soft: #ecd7cf;

  /* 文字：暖调深墨（不用纯黑，更柔和高级） */
  --ink: #2a2520;              /* 主文字 */
  --ink-soft: #5c544c;         /* 次级文字 */
  --muted: #8c8378;            /* 辅助 / 说明文字 */

  /* 中性背景：暖米色（弃纯白，更温暖高级） */
  --cream: #fbf7f1;            /* 页面主背景 */
  --cream-2: #f4ece0;          /* 次背景（区块） */
  --card: #ffffff;             /* 卡片背景 */
  --line: #e7ddcf;             /* 描边 / 分割线（暖） */
  --line-soft: #f0e8db;

  /* 功能色 */
  --white: #ffffff;
  --black: #1a1612;
  --success: #6f8f6a;
  --danger: #c0655a;

  /* ---------- 渐变 ---------- */
  --grad-gold: linear-gradient(135deg, #d9bd8a 0%, #b89766 50%, #9a7b4a 100%);
  --grad-rose: linear-gradient(135deg, #d9a99e 0%, #b47b6e 100%);
  --grad-hero: linear-gradient(105deg, rgba(26, 22, 18, 0.78) 0%, rgba(26, 22, 18, 0.52) 42%, rgba(26, 22, 18, 0.18) 68%, rgba(26, 22, 18, 0.45) 100%);
  --grad-hero-bottom: linear-gradient(180deg, transparent 55%, rgba(251, 247, 241, 0.95) 100%);

  /* ---------- 字体族 ---------- */
  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-display: "Playfair Display", "Noto Serif SC", serif;  /* 英文装饰 / HUEBELLE */
  --font-sans: "Source Sans 3", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;

  /* ---------- 字号（流式 clamp，移动优先） ---------- */
  --fs-hero: clamp(2.6rem, 7vw, 5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-display-en: clamp(0.85rem, 1.4vw, 1.05rem);

  /* ---------- 字重 ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 行高 ---------- */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.65;
  --lh-loose: 1.85;

  /* ---------- 字距 ---------- */
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;
  --ls-tight: -0.01em;

  /* ---------- 间距（4 基准） ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* 章节内边距（响应式） */
  --section-py: clamp(3.5rem, 8vw, 7rem);

  /* ---------- 圆角 ---------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- 阴影（柔和分层） ---------- */
  --shadow-xs: 0 1px 2px rgba(58, 50, 43, 0.05);
  --shadow-sm: 0 2px 8px rgba(58, 50, 43, 0.06);
  --shadow: 0 8px 24px rgba(58, 50, 43, 0.08);
  --shadow-md: 0 14px 40px rgba(58, 50, 43, 0.1);
  --shadow-lg: 0 24px 60px rgba(58, 50, 43, 0.14);
  --shadow-gold: 0 12px 32px rgba(184, 151, 102, 0.28);

  /* ---------- 布局 ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 76px;

  /* ---------- z-index 分层（10/20/30/50/100 体系） ---------- */
  --z-base: 1;
  --z-dropdown: 30;
  --z-header: 50;
  --z-float: 60;       /* 悬浮咨询 / 电话 */
  --z-backtop: 60;
  --z-lightbox: 100;   /* 灯箱最高 */

  /* ---------- 过渡 ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t: 0.28s;
  --t-slow: 0.5s;
}

/* 减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t: 0.01ms;
    --t-slow: 0.01ms;
  }
}