/* ============================================
   水润天地 · 高端设计系统 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);
}

/* ============================================
   扩充变量（2026-08-16 色值收口批次新增）
   —— 覆盖全部页面出现的裸色值，含图表色/功能色/半透明基色
   ============================================ */
:root {
  --black: #000000;
  --gray-light: #F5F5F5;
  --chart-red: #C0392B;
  --chart-blue: #2E86AB;
  --chart-orange: #FF9800;
  --chart-purple: #9C27B0;
  --chart-green: #10B981;
  --chart-red-2: #B42C28;
  --chart-green-2: #3CB371;
  --chart-slate: #2C3E50;
  --chart-slate-2: #34495E;
  --c-danger-3: #F44336;
  --chart-orange-2: #FFA843;
  --c-danger: #DC3545;
  --c-danger-2: #E74C3C;
  --c-danger-4: #FF6B6B;
  --c-success-2: #4CAF50;
  --c-wechat: #07C160;
  --c-wechat-2: #06AD56;
  --forest-ink: #0B1A14;
  --forest-deep: #0B3D2C;
  --forest-pale-2: #1A6B45;
  --forest-deep-2: #0D3827;
  --forest-deep-3: #134D33;
  --forest-deep-4: #0A1F16;
  --forest-deep-5: #163D2E;
  --forest-pale-3: #1A5C40;
  --forest-pale-4: #2E7D4A;
  --forest-deep-6: #164532;
  --forest-light-2: #0E4A32;
  --forest-deep-7: #0E3A28;
  --forest-olive: #1A2E0A;
  --forest-olive-2: #3D5A1A;
  --ivory-deep-2: #E8E5E0;
  --ivory-warm: #FAF7F2;
  --ivory-warm-2: #F5F0E8;
  --ivory-warm-3: #EDE5D8;
  --ivory-warm-4: #F5F2ED;
  --ivory-warm-5: #F7F5F0;
  --gray-light-2: #F5F5F8;
  --gray-2: #E0E0E0;
  --gold-deep: #B8893E;
  --gold-vivid: #C4962A;
  --gold-deep-2: #B8923A;
  --gold-bright: #FFCF5E;
  --gold-pale-2: #ECD9A6;
  --gold-pale-3: #E8D48C;
  --gold-deep-3: #C4943A;
  --gold-deep-4: #9A7B28;
  --gold-deep-5: #A67B2E;
  --gold-deep-6: #B8925A;
  --gold-deep-7: #C4992A;
  --ink-warm: #8A8070;
  --ink-mute-2: #78766E;
  --birch-brown: #8B7355;
  --brown: #8B4513;
  --brown-dark: #1A0A00;
  --brown-dark-2: #2C1F0A;
  --brown-dark-3: #5C3D1A;
  --brown-dark-4: #2A1A00;
  --gray: #CCCCCC;
  --gray-3: #CCCAC5;
  --gray-4: #8A8A8A;
  --gray-5: #666666;

  /* RGB 通道（配合 rgba(var(--xx-rgb), a) 使用，实现半透明零裸色值） */
  --ink-rgb: 26, 23, 20;
  --ivory-rgb: 250, 248, 245;
  --gold-light-rgb: 212, 168, 67;
  --forest-rgb: 10, 46, 31;
  --black-rgb: 0, 0, 0;
  --ivory-warm-rgb: 250, 247, 242;
  --forest-ink-rgb: 11, 26, 20;
  --chart-blue-rgb: 46, 134, 171;
  --gold-rgb: 184, 134, 11;
  --forest-mid-rgb: 15, 42, 32;
  --forest-pale-rgb: 26, 122, 76;
  --forest-deep-rgb: 11, 61, 44;
  --gold-deep-rgb: 184, 137, 62;
  --c-error-rgb: 198, 40, 40;
  --chart-red-rgb: 192, 57, 43;
  --ivory-card-rgb: 255, 255, 255;
  --gold-pale-3-rgb: 232, 212, 140;
  --chart-orange-rgb: 255, 152, 0;
  --ink-mute-2-rgb: 120, 118, 110;
  --ivory-cool-rgb: 255, 252, 245;
  --gold-bright-rgb: 255, 207, 94;
  --gold-pale-rgb: 245, 230, 200;
  --c-success-rgb: 46, 125, 50;
  --c-danger-rgb: 220, 53, 69;
  --gold-pale-2-rgb: 236, 217, 166;
  --forest-mid-2-rgb: 15, 42, 31;
  --ink-faint-rgb: 181, 178, 173;
  --chart-purple-rgb: 156, 39, 176;
  --c-danger-5-rgb: 220, 53, 48;
  --c-wechat-rgb: 7, 193, 96;
  --chart-red-3-rgb: 180, 40, 40;
  --forest-ink-2-rgb: 10, 23, 20;
  --gold-deep-3-rgb: 196, 148, 58;
  --chart-green-rgb: 16, 185, 129;
  --brown-dark-2-rgb: 44, 31, 10;
  --forest-pale-2-rgb: 26, 107, 69;
  --ink-mute-rgb: 122, 118, 112;
  --forest-light-rgb: 15, 74, 50;
  --brown-dark-5-rgb: 61, 44, 11;
  --brown-dark-6-rgb: 42, 32, 15;
}