/* ==========================================================================
   variables.css — 设计令牌（Design Tokens）
   项目：上海圣露西亚医疗美容 · 王海文医生官网

   基准：客户自有站 www.luciashanghai.com 的设计语言。三条主线：
     1) 白底 + 中性灰 + 香槟金，金色只做点缀（不铺面）
     2) 全站无圆角 —— 参考站 --radius: 0，直角是「杂志感」的骨架
     3) 标题用 Georgia 衬线 + 常规字重（非粗体无衬线）

   说明：所有颜色、字号、间距、圆角、阴影、动效统一在此定义，
        其他样式文件只引用变量，不写死数值，保证全站视觉一致。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. 色彩系统 Color System
     参考站令牌（实测）：
       --bg:#ffffff  --primary:#c19d79  --primary-2:#e9ca9d
       --text:#27313b  --muted:#6b7680  --radius:0
     本站在此基础上只保留香槟金一个彩色信号，深色区块走中性近黑，
     不再带棕调 —— 原来的暖棕黑 #191714 大面积铺开后会显「咖啡色」。

     对比度提醒（实测于页面底 #fbfaf7）：
       金 400 #c19d79 → 2.4  ✗ 只做面 / 描边
       金 500 #b48a61 → 3.0  ✗ 只做面
       金 700 #7a6449 → 5.4  ✓ 浅底上的小字用这一档
       墨 500 #6d6a64 → 5.2  ✓ 正文可用的最浅一档
       墨 700 #3a3833 → 11.2 ✓
       墨 800 #262522 → 14.6 ✓ 标题
       墨 900 #1d1d1b → 深色区块背景
     --------------------------------------------------------------------- */

  /* 主色阶 —— 300/400 是香槟金；500 起转为中性墨色（无棕调）。
     这样金色成为页面上唯一的彩色信号，深色区块也回归沉稳。 */
  --color-primary-50: #fdfbf7;
  --color-primary-100: #f7f1e8;
  --color-primary-200: #eddfc9;
  --color-primary-300: #c19d79; /* 品牌香槟金 · 主（参考站 --primary） */
  --color-primary-400: #b48a61; /* 深一档金 · 次 */
  --color-primary-500: #6d6a64; /* 文字安全档起点 */
  --color-primary-600: #514e49;
  --color-primary-700: #3a3833;
  --color-primary-800: #262522;
  --color-primary-900: #1d1d1b; /* 深色区块背景 */

  /* 语义别名 —— 业务层引用，语义更清晰 */
  --color-brand: #c19d79; /* 香槟金 */
  --color-brand-hover: #cfa987;
  --color-brand-press: #b08a62;
  --color-brand-2: #b08a62; /* 深金，描边与次级实底 */
  --color-brand-2-hover: #bd9a72;
  /* 配金色实底时使用的深色文字（#191714 压 #c19d79 上 7.1:1，超 AA） */
  --color-on-brand: #191714;

  /* 金色阶 —— 与参考站对齐，8 档够用：
     200 给深色底上的强调，300 给浅底细线/描边，400 是品牌金，
     500/600 给需要更强对比的小字，700 专供浅底小字（正文级 4.5:1+） */
  --color-gold-50: #faf5ee;
  --color-gold-100: #f2e7d9;
  --color-gold-200: #e9ca9d; /* 参考站 --primary-2 */
  --color-gold-300: #d7bea0; /* 参考站 */
  --color-gold-400: #c19d79; /* 参考站 --primary */
  --color-gold-500: #b48a61; /* 参考站 */
  --color-gold-600: #8b735f; /* 参考站 */
  --color-gold-700: #7a6449; /* 浅底小字专用（5.4:1） */

  /* 中性色 —— 由暖棕灰改为中性灰。
     参考站是白底 + 中性灰，原来偏棕的灰阶在浅底上会显旧。 */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fbfaf7; /* 页面底色 · 微暖白 */
  --color-neutral-100: #f4f3ef;
  --color-neutral-200: #e8e6e2;
  --color-neutral-300: #d3d1cb;
  --color-neutral-400: #a3a09a;
  --color-neutral-500: #6d6a64;
  --color-neutral-600: #514e49;
  --color-neutral-700: #3a3833;
  --color-neutral-800: #262522;
  --color-neutral-900: #1d1d1b;

  /* 语义色 */
  --color-success: #3d8b6a;
  --color-warning: #c98a3d;
  --color-error: #b85450;
  --color-info: #4a7a9b;

  /* 功能色 —— 语义化别名（业务层优先使用这些） */
  --color-bg: var(--color-neutral-0); /* 纯白底，对齐参考站 */
  --color-bg-alt: var(--color-neutral-50); /* 交替区块用微暖白 */
  --color-bg-dark: var(--color-primary-900);
  --color-surface: var(--color-neutral-0);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  --color-text: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-inverse-dim: rgba(255, 255, 255, 0.72);

  --color-accent: var(--color-brand);
  --color-link: var(--color-primary-700);

  /* 渐变 —— 全站已基本不用渐变（参考站不用），仅保留深色区块微渐变 */
  --gradient-gold: linear-gradient(135deg, #c19d79 0%, #b08a62 100%);
  --gradient-dark: linear-gradient(160deg, #232322 0%, #161616 100%);

  /* ---------------------------------------------------------------------
     2. 字体系统 Typography
     参考站：标题 Georgia 衬线 400，正文 Inter / 系统无衬线。

     重要修正：原 font-sans 首选 "PingFang SC" —— 这是 macOS 字体，
     Windows 上不存在，于是全站标题实际掉进了 "Microsoft YaHei"，
     一个通用中文 UI 字体，拉丁字形又重又平，是「廉价感」的来源之一。
     现在把 Inter / Segoe UI 提到首位，拉丁文先命中干净的无衬线，
     中文字体留在栈尾兜底（本站内容全英文）。
     --------------------------------------------------------------------- */

  --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", "Source Han Serif SC",
    "Noto Serif SC", serif;
  --font-number: Georgia, "Times New Roman", serif;

  /* 字号阶梯（1.25 Major Third 微调） */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.8125rem; /* 13px */
  --fs-base: 0.875rem; /* 14px 正文小字 */
  --fs-md: 1rem; /* 16px 正文标准 */
  --fs-lg: 1.125rem; /* 18px 引言 */
  --fs-xl: 1.375rem; /* 22px 小标题 */
  --fs-2xl: 1.75rem; /* 28px 区块标题(移动端) */
  --fs-3xl: 2.25rem; /* 36px 区块标题 */
  --fs-4xl: 3rem; /* 48px 页面主标题 */
  --fs-5xl: 3.75rem; /* 60px Hero 标题 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.18; /* 衬线大标题需要更紧的行高 */
  --lh-snug: 1.45;
  --lh-normal: 1.7;
  --lh-relaxed: 1.9;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.06em; /* 按钮 / 导航 */
  --ls-wider: 0.14em; /* 小号全大写标签 */
  --ls-widest: 0.2em; /* eyebrow */

  /* ---------------------------------------------------------------------
     3. 间距系统 Spacing —— 8px 基准栅格
     --------------------------------------------------------------------- */

  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --space-32: 8rem; /* 128 */

  /* 区块纵向留白（响应式会在 layout.css 中覆盖） */
  --section-py: var(--space-24);
  --section-py-sm: var(--space-16);

  /* ---------------------------------------------------------------------
     4. 版心与栅格 Layout
     --------------------------------------------------------------------- */

  --container-max: 1200px;
  --container-narrow: 880px;
  --container-wide: 1360px;
  --container-gutter: var(--space-6);

  /* 页头专用版心：英文导航文案较长，需要比正文版心更宽 */
  --container-header: 1344px;

  /* 圆角 —— 全站归零，对齐参考站 --radius: 0。
     令牌名保留，避免逐个改写业务样式，但值统一为 0：
     卡片、按钮、输入框、图片一律直角，这是「编辑感」而非「App 感」的关键。
     （圆形元素不走这里，直接用 border-radius: 50%） */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* ---------------------------------------------------------------------
     5. 阴影与层级 Elevation
     参考站几乎不使用投影，靠 1px 细边框区分层次。
     因此这里把阴影压到「只做呼吸感」，不再是视觉主体。
     --------------------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(29, 29, 27, 0.03);
  --shadow-sm: 0 2px 6px rgba(29, 29, 27, 0.04);
  --shadow-md: 0 6px 18px rgba(29, 29, 27, 0.06);
  --shadow-lg: 0 12px 32px rgba(29, 29, 27, 0.07);
  --shadow-xl: 0 20px 48px rgba(29, 29, 27, 0.09);
  --shadow-gold: 0 10px 26px rgba(193, 157, 121, 0.2);

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 900;
  --z-drawer: 950;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------------------------------------------------------------------
     6. 动效 Motion
     以"舒缓、克制、有呼吸感"为原则，缓动统一使用 ease-out 曲线
     --------------------------------------------------------------------- */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --duration-fast: 0.18s;
  --duration-base: 0.32s;
  --duration-slow: 0.6s;
  --duration-slower: 1s;

  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ---------------------------------------------------------------------
     7. 其他
     --------------------------------------------------------------------- */

  /* 说明：页头高度固定，滚动前后不再变化，
     因此不存在「滚动后高度」令牌。 */
  --header-height: 84px;
}

/* ==========================================================================
   响应式令牌覆盖
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --section-py: var(--space-20);
    --container-gutter: var(--space-5);
    --header-height: 72px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-5xl: 2.5rem;
    --fs-4xl: 2.125rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.5rem;

    --section-py: var(--space-16);
    --container-gutter: var(--space-4);
    --header-height: 64px;
  }
}