/* ============================================
   style.css — 祇园 · 禅意极简电商全局样式
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* 主色调 — 侘寂大地色系 */
  --color-bg: #F5F0EB;
  --color-bg-alt: #EFE9E2;
  --color-bg-card: #FAF7F4;
  --color-text: #2C2C2C;
  --color-text-secondary: #6B6258;
  --color-text-muted: #9C9288;
  --color-accent: #C4956A;
  --color-accent-light: #D4A574;
  --color-accent-dark: #A67B52;
  --color-earth: #8B7355;
  --color-sage: #A8C5B0;
  --color-sage-dark: #7A9A84;
  --color-border: #E5DDD4;
  --color-border-light: #EFE9E2;
  --color-white: #FFFFFF;
  --color-error: #C44A4A;
  --color-success: #7A9A84;

  /* 字体 */
  --font-display: 'Noto Serif SC', 'Cormorant Garamond', serif;
  --font-body: 'Noto Sans SC', sans-serif;
  --font-en: 'Cormorant Garamond', serif;

  /* 间距 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* 布局 */
  --max-width: 1280px;
  --max-width-narrow: 960px;
  --header-height: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(44,44,44,0.06);
  --shadow-md: 0 4px 12px rgba(44,44,44,0.08);
  --shadow-lg: 0 12px 32px rgba(44,44,44,0.1);
  --shadow-glow: 0 0 20px rgba(196,149,106,0.15);

  /* 过渡 */
  --transition-fast: 0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== 全局 ===== */
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* 纹理背景 */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(168,197,176,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(196,149,106,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(139,115,85,0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.page { position: relative; z-index: 1; min-height: calc(100vh - var(--header-height)); padding-top: var(--header-height); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--space-lg); }

/* ===== 排版 ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { color: var(--color-text-secondary); line-height: 1.8; }
.text-en { font-family: var(--font-en); font-style: italic; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: 0.75rem 2rem; border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 400; font-size: 0.9rem;
  letter-spacing: 0.08em; cursor: pointer;
  transition: all var(--transition-fast);
  position: relative; overflow: hidden;
}
.btn-primary {
  background: var(--color-text); color: var(--color-white);
  border: 1px solid var(--color-text);
}
.btn-primary:hover {
  background: var(--color-accent-dark); border-color: var(--color-accent-dark);
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-accent); color: var(--color-accent);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent; color: var(--color-text-secondary);
  border: none; padding: 0.5rem 1rem;
}
.btn-ghost:hover { color: var(--color-accent); }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; }
.btn-lg { padding: 1rem 2.5rem; font-size: 1rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ===== Section ===== */
.section { padding: var(--space-3xl) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-title {
  text-align: center; margin-bottom: var(--space-xl);
}
.section-title .subtitle {
  font-family: var(--font-en); font-size: 0.9rem; color: var(--color-accent);
  letter-spacing: 0.15em; margin-bottom: var(--space-sm);
  text-transform: uppercase;
}
.section-title h2 { margin-bottom: var(--space-sm); }
.section-title p { max-width: 500px; margin: 0 auto; font-size: 0.95rem; }

/* ===== Divider ===== */
.divider {
  width: 60px; height: 1px; background: var(--color-accent);
  margin: var(--space-lg) auto; opacity: 0.6;
}

/* ===== Badge ===== */
.badge {
  display: inline-block; padding: 0.2rem 0.8rem;
  background: var(--color-bg-alt); border-radius: var(--radius-full);
  font-size: 0.75rem; color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

/* ===== Loading ===== */
.loading-spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 2px solid var(--color-border); border-top-color: var(--color-accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast ===== */
.toast-container {
  position: fixed; top: calc(var(--header-height) + var(--space-md)); right: var(--space-lg);
  z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm);
}
.toast {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border-left: 3px solid var(--color-accent);
  font-size: 0.9rem; animation: slideIn 0.3s ease;
  max-width: 360px;
}
.toast-error { border-left-color: var(--color-error); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .container-narrow { padding: 0 var(--space-md); }
  .section { padding: var(--space-2xl) 0; }
  .toast-container { right: var(--space-md); left: var(--space-md); }
  .toast { max-width: 100%; }
}