/* ==========================================================================
   Energvia — base.css
   设计令牌 (Design Tokens) + Reset + 排版 + 按钮
   风格：Dark Luxury + Spiritual Minimalism
   ==========================================================================
   说明：本文件只放"全站基础"。组件样式见 components.css，布局见 layout.css。
   迁移 WordPress 时，这些 CSS 变量可直接搬进 theme 的 :root，Elementor 全局色板亦可对齐。
*/

/* ---------- 设计令牌 ---------- */
:root {
  /* 颜色 */
  --color-black:      #0A0A0A;   /* 主背景：纯黑宇宙 */
  --color-charcoal:   #141414;   /* 次级背景 */
  --color-graphite:   #1E1E1E;   /* 卡片背景 */
  --color-border:     #2A2A2A;   /* 描边 */
  --color-cream:      #F5F2EC;   /* 主文字 / 米白 */
  --color-muted:      #A7A29A;   /* 次级文字 */
  --color-green:      #3E5F4A;   /* 自然绿 (Healing) */
  --color-green-soft: #6E8F78;   /* 绿色浅调 */
  --color-gold:       #C9A96A;   /* 金色微光 (强调) */
  --color-gold-soft:  #E3CE9E;   /* 金色浅调 */

  /* 渐变 / 光晕 */
  --glow-gold: radial-gradient(circle at 50% 50%, rgba(201,169,106,0.28) 0%, rgba(201,169,106,0) 70%);
  --glow-green: radial-gradient(circle at 50% 50%, rgba(62,95,74,0.35) 0%, rgba(62,95,74,0) 70%);

  /* 字体 */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* 字号（响应式 clamp） */
  --fs-hero:    clamp(2.75rem, 6vw, 5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8rem;

  /* 间距 */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 8rem;

  /* 布局 */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --radius: 4px;
  --radius-lg: 12px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  /* 层级 */
  --z-header: 100;
  --z-overlay: 200;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-cream);
  background-color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }

/* ---------- 排版 ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { color: var(--color-muted); }

/* Eyebrow：小标题前缀，spiritual 品牌常用 */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
}

.text-serif { font-family: var(--font-serif); }
.text-gold  { color: var(--color-gold); }
.text-cream { color: var(--color-cream); }
.text-center { text-align: center; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 2.4em;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 0.2s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* 主按钮：金色微光 */
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-black);
}
.btn--primary:hover { background-color: var(--color-gold-soft); }

/* 次按钮：描边 */
.btn--ghost {
  background-color: transparent;
  color: var(--color-cream);
  border-color: rgba(245,242,236,0.35);
}
.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn--block { width: 100%; }

/* ---------- 无障碍 ---------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}