/* ================================================
   LUMIÈRE 商城 - 基础样式
   变量 · 重置 · 字体 · 全局通用
   ================================================ */

/* === 字体加载 === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* === 全局重置 === */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 焦点样式（键盘导航无障碍） */
*:focus-visible {
  outline: 2px solid var(--moonlight-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === 颜色变量（深海暗色主题） === */
:root {
  --deep-sea: #0A1628;
  --deep-blue: #0A1628;
  --starlight: #1B2D4A;
  --moonlight-gold: #C9A96E;
  --moonlight-gold-light: #D4BC8A;
  --cloud-white: #F0F2F5;
  --mist-gray: #8B95A5;
  --text-muted: #8B95A5;
  --deep-card: #0F1F38;
  --dark-flow: #1A2C48;
  --warm-beige: #F5F0E8;
  --cream: #FAF7F2;
  --caramel: #B8860B;
  --deep-brown: #3D2B1F;
  --light-brown: #8B7355;
  --header-height: 200px;
  --announcement-height: 40px;
}

/* === 页面主体 === */
html { overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--deep-sea);
  color: var(--cloud-white);
  font-size: 17px;
  line-height: 1.6;
  padding-top: calc(var(--header-height) + var(--announcement-height));
  padding-bottom: 52px;
}

/* === 浅色主题（米色） === */
.theme-beige {
  --deep-sea: #F5F0E8;
  --deep-blue: #F5F0E8;
  --starlight: #FAF7F2;
  --moonlight-gold: #B8860B;
  --moonlight-gold-light: #D4A017;
  --cloud-white: #3D2B1F;
  --mist-gray: #8B7355;
  --text-muted: #8B7355;
  --deep-card: #FFFFFF;
  --dark-flow: #E8E0D0;
}

/* === 页面切换动画 === */
.page-transition { animation: pageIn .35s ease; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}