/**
 * 择吉日历 H5 全站设计变量
 * 用于风格统一：主色金、圆角、阴影、间距、字体
 */

/* 中文衬线 + 无衬线字体 */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap'); */
/* 使用系统字体回退，避免网络依赖 */

:root {
  /* ========== 品牌色 ========== */
  --primary: #d4af37;
  --primary-dark: #b8962e;
  --primary-light: #e8c95a;
  --primary-rgb: 212, 175, 55;
  /* 与 fortune.css / my.css 兼容 */
  --primary-color: #d4af37;

  /* 辅助色：吉/日历强调（与 calendar-haoyun 一致） */
  --accent-green: #00cc66;
  --accent-green-dark: #00a352;
  --accent-amber: #f59e0b;

  /* 中性色（暖色调优化） */
  --text-primary: #2D2418;
  --text-secondary: #5C4D3C;
  --text-muted: #8B7355;
  --border: #E8DCC0;
  --border-light: #F0E8D8;
  --bg-page: #FBF7F0;
  --bg-card: #fff;
  --bg-warm: #f5f0e6;
  --bg-warm-end: #e8e0d0;

  /* ========== 布局与间距 ========== */
  --header-height: 50px;
  --nav-bottom-height: 60px;
  --content-padding: clamp(12px, 4vw, 15px);
  --content-padding-lg: 20px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: clamp(12px, 4.2vw, 16px);
  --gap-xl: clamp(16px, 6.4vw, 24px);

  /* ========== 圆角与阴影 ========== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(139, 115, 85, 0.08);
  --shadow-md: 0 2px 8px rgba(139, 115, 85, 0.1);
  --shadow-lg: 0 4px 16px rgba(139, 115, 85, 0.12);
  --shadow-nav: 0 -2px 8px rgba(139, 115, 85, 0.08);

  /* ========== 字体 ========== */
  --font-serif: "STSong", "SimSun", "Georgia", serif;
  --font-sans: "HarmonyOS Sans", "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  --font-size-xs: clamp(11px, 3.2vw, 12px);
  --font-size-sm: clamp(12px, 3.7vw, 14px);
  --font-size-base: clamp(14px, 4.2vw, 16px);
  --font-size-lg: clamp(16px, 4.8vw, 18px);
  --font-size-xl: clamp(18px, 5.3vw, 20px);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== 主渐变（金系） ========== */
  --gradient-primary: linear-gradient(135deg, #d4af37 0%, #b8962e 50%, #e8c95a 100%);
  --gradient-primary-solid: linear-gradient(135deg, #d4af37 0%, #b8962e 100%);

  /* ========== 过渡 ========== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ========== 统一导航栏 ========== */
  --navbar-height: 50px;
  --navbar-bg: #fff;
  --navbar-title-size: 18px;
  --navbar-title-weight: 600;
  --navbar-title-color: var(--text-primary);
  --navbar-back-size: 24px;
  --navbar-back-color: var(--text-primary);
  --navbar-shadow: var(--shadow-md);
  --navbar-z-index: 1000;
  
  /* ========== 统一弹窗 ========== */
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-mask-bg: rgba(0, 0, 0, 0.5);
  --modal-z-index: 9999;
  --modal-animation-duration: 300ms;
  
  /* ========== 操作面板 ========== */
  --action-sheet-radius: var(--radius-xl);
  --action-sheet-item-height: 56px;
  
  /* ========== 空状态 ========== */
  --empty-icon-size: 64px;
  --empty-text-color: var(--text-muted);
  --empty-text-size: var(--font-size-sm);
}

/* 尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}