/* ============================================
   水润天地 · 高端设计系统 v3.0
   定位：面向高净值人群的自然健康品牌
   灵感：Apple/Tesla/奢侈品官网
   核心：克制、留白、质感、信任
   ============================================ */

/* --- 色彩系统：自然·深邃·珍贵 --- */
:root {
  /* 主色：深邃森林绿（有厚度、有历史感） */
  --forest:        #0A2E1F;
  --forest-light:  #0F4A32;
  --forest-pale:   #1A7A4C;  /* 原品牌绿，降为辅助 */
  
  /* 点睛色：古铜金（珍贵、自然、不俗） */
  --gold:          #B8860B;
  --gold-light:    #D4A843;
  --gold-pale:     #F5E6C8;
  
  /* 背景色：暖白（有温度，不是冷白） */
  --ivory:         #FAF8F5;
  --ivory-deep:    #F0EDE8;
  --ivory-card:    #FFFFFF;
  
  /* 墨色：多层次黑（有层次） */
  --ink:           #1A1714;
  --ink-soft:      #3D3A36;
  --ink-mute:      #7A7670;
  --ink-faint:     #B5B2AD;
  
  /* 功能色：极低饱和度 */
  --c-success:     #2E7D32;
  --c-warning:     #E65100;
  --c-error:       #C62828;
  
  /* 桦树汁专属（金色系，不用棕色） */
  --birch:         #8B6914;
  --birch-light:   #B8860B;
}

/* --- 字体系统：衬线定调·无衬线可读·数字精密 --- */
:root {
  /* 标题衬线：有文化感、有厚度 */
  --font-serif: '"Noto Serif SC"', "Source Han Serif SC", "Songti SC", Georgia, serif;
  /* 正文无衬线：清晰可读 */
  --font-sans:  '"PingFang SC"', '"Microsoft YaHei"', -apple-system, sans-serif;
  /* 数字字体：精密、现代 */
  --font-num:   '"DIN Alternate"', '"Helvetica Neue"', Arial, sans-serif;
  
  /* 字号：编辑式跳跃（不是等差） */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.75rem;    /* 44px */
  --text-4xl:  3.75rem;    /* 60px */
  --text-hero: 5rem;       /* 80px - Hero 大字 */
  
  /* 字重 */
  --w-regular: 400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
}

/* --- 间距系统：编辑式（4px 基准，但跳跃分布） --- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 140px;
}

/* --- 阴影系统：呢喃级（几乎看不见） --- */
:root {
  --shadow-xs:  0 1px 2px rgba(26,23,20,0.02);
  --shadow-sm:  0 2px 8px rgba(26,23,20,0.04);
  --shadow-md:  0 8px 24px rgba(26,23,20,0.06);
  --shadow-lg:  0 16px 48px rgba(26,23,20,0.08);
  --shadow-gold: 0 4px 16px rgba(184,134,11,0.15);
}

/* --- 圆角：克制 --- */
:root {
  --r-none: 0;
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   12px;
  --r-full: 9999px;
}

/* --- 过渡：缓慢、有质感 --- */
:root {
  --ease:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast:  0.2s;
  --dur-normal: 0.35s;
  --dur-slow:  0.6s;
}

/* --- 质感纹理（CSS 实现） --- */
:root {
  --texture-paper:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  --texture-water:   linear-gradient(135deg, rgba(184,134,11,0.03) 0%, transparent 50%, rgba(10,46,31,0.02) 100%);
  --texture-gold:    linear-gradient(135deg, rgba(184,134,11,0.08), rgba(212,168,67,0.03));
}

/* ============================================
   全局基础
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* 衬线标题 */
h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  color: var(--forest);
  letter-spacing: 0.04em;
}

h1 { font-size: var(--text-4xl); line-height: 1.15; }
h2 { font-size: var(--text-2xl); line-height: 1.3; }
h3 { font-size: var(--text-xl); line-height: 1.4; }

/* 数字 */
.num, .price {
  font-family: var(--font-num);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
}

/* 链接 */
a {
  color: var(--forest);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--gold); }

/* 按钮体系 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease);
}

.btn-primary {
  background: var(--forest);
  color: var(--ivory);
  border: 1px solid var(--forest);
}
.btn-primary:hover {
  background: var(--forest-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-gold {
  background: var(--gold);
  color: var(--ivory);
  border: 1px solid var(--gold);
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-outline {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
}
.btn-outline:hover {
  background: var(--forest);
  color: var(--ivory);
}

/* 分割线：发丝级 */
.divider {
  width: 100%;
  height: 1px;
  background: var(--ink-faint);
  opacity: 0.15;
}

/* 金线装饰 */
.gold-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* 卡片 */
.card {
  background: var(--ivory-card);
  border: 1px solid rgba(26,23,20,0.04);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-normal) var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* 容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* 滚动条：精致 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 2px; }

/* ============================================
   向后兼容别名（供旧页面使用）
   ============================================ */
:root {
  --color-primary:       var(--forest);
  --color-primary-light: var(--forest-light);
  --color-secondary:     var(--gold);
  --color-bg:            var(--ivory);
  --color-bg-card:       var(--ivory-card);
  --color-text:          var(--ink);
  --color-text-secondary: var(--ink-soft);
  --color-text-muted:    var(--ink-mute);
  --color-border:        rgba(26,23,20,0.08);
  --color-success:       var(--c-success);
  --color-warning:       var(--c-warning);
  --color-error:         var(--c-error);
  --font-family-base:    var(--font-sans);
  --font-family-heading: var(--font-serif);
  --font-family-number:  var(--font-num);
  --spacing-xs: var(--sp-1);
  --spacing-sm: var(--sp-2);
  --spacing-md: var(--sp-3);
  --spacing-lg: var(--sp-4);
  --spacing-xl: var(--sp-5);
  --spacing-2xl: var(--sp-6);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --shadow-soft: var(--shadow-sm);
}