/* ============================================
   设计令牌 (Design Tokens) - 天机量化系统 V8.0
   合并 variables.css + _variables_v2.css + tianji.html 内联变量
   统一色彩、间距、排版、动画、响应式断点
   ============================================ */

:root {
  /* ===== 主色调 ===== */
  --main-color: #2563EB;
  --accent-color: #3B82F6;
  --success-color: #DC2626;    /* 吉用红色（金融惯例：红=涨） */
  --warning-color: #F59E0B;    /* 平用黄色 */
  --rise-color: #DC2626;       /* 涨/吉用红色 */
  --fall-color: #0E9F6E;       /* 跌/凶用绿色 */
  --interact-color: #8B5CF6;   /* 互动功能主色 */
  --member-tag-color: #EC4899; /* 会员专属标签色 */
  --learn-color: #0EA5E9;      /* 学习板块主色 */

  /* ===== 金融专业色板 ===== */
  --primary-deep: #1A237E;
  --primary-main: #283593;
  --primary-light: #3949AB;
  --primary-50: #E8EAF6;
  --primary-100: #C5CAE9;

  /* 强调色 - 琥珀金 */
  --gold-primary: #FFC107;
  --gold-dark: #FF8F00;
  --gold-light: #FFE082;
  --gold-gradient: linear-gradient(135deg, #FFC107, #FF8F00);

  /* ===== 五行色彩体系 ===== */
  --wuxing-metal: #F59E0B;   /* 金 - 泽兑 */
  --wuxing-wood: #10B981;    /* 木 - 震巽 */
  --wuxing-water: #3B82F6;   /* 水 - 坎 */
  --wuxing-fire: #EF4444;    /* 火 - 离 */
  --wuxing-earth: #8B5CF6;   /* 土 - 坤艮 */

  /* ===== 吉凶语义色 ===== */
  --lucky-color: #DC2626;     /* 大吉/吉 - 红色 */
  --neutral-color: #F59E0B;   /* 平 - 黄色 */
  --unlucky-color: #10B981;   /* 凶/大凶 - 绿色 */

  /* ===== 信号评级色 ===== */
  --signal-s: #DC2626;        /* S级王牌 */
  --signal-a: #F59E0B;        /* A级优质 */
  --signal-b: #64748B;        /* B级观察 */
  --signal-c: #9CA3AF;        /* C级待验 */

  /* ===== 背景色 ===== */
  --bg-color: #F8FAFC;
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F5F9;
  --card-bg: #FFFFFF;
  --bg-gradient-start: #667eea;
  --bg-gradient-end: #764ba2;

  /* ===== 文字色 ===== */
  --text-main: #1F2937;
  --text-primary: #1E293B;
  --text-secondary: #6B7280;
  --text-tertiary: #94A3B8;
  --text-light: #9CA3AF;
  --text-on-dark: #F1F5F9;

  /* ===== 边框色 ===== */
  --border-color: #E2E8F0;
  --border-light: #F1F5F9;

  /* ===== 渐变色 ===== */
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-financial: linear-gradient(135deg, #1A237E 0%, #283593 50%, #3949AB 100%);
  --gradient-gold: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-danger: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);

  /* ===== 玻璃态参数 ===== */
  --glass-bg: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.3);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px rgba(31,41,55,0.12);

  /* ===== 安全区域 ===== */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* ===== 间距系统 (4px基础) ===== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== 尺寸 ===== */
  --max-width: 1200px;
  --top-bar-height: 60px;
  --bottom-nav-height: 70px;

  /* ===== 流体字号 (clamp 自适应，移动优先) ===== */
  --font-fluid-xs:   clamp(10px, 2.2vw, 12px);
  --font-fluid-sm:   clamp(11px, 2.6vw, 14px);
  --font-fluid-base: clamp(13px, 3vw, 16px);
  --font-fluid-md:   clamp(14px, 3.4vw, 18px);
  --font-fluid-lg:   clamp(16px, 4vw, 22px);
  --font-fluid-xl:   clamp(18px, 5vw, 26px);
  --font-fluid-2xl:  clamp(20px, 6vw, 32px);

  /* ===== 圆角 ===== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 12px rgba(37, 99, 235, 0.06);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* ===== 动画 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== 排版 ===== */
  --font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* ===== Z-Index 层级 ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

/* ===== 暗色主题 ===== */
[data-theme="dark"] {
  --bg-color: #0F172A;
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --card-bg: #1E293B;
  --text-main: #F1F5F9;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --border-color: #334155;
  --border-light: #1E293B;
  --glass-bg: rgba(30,41,59,0.7);
  --glass-border: rgba(51,65,85,0.5);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.2);
}

/* 自动跟随系统暗色模式偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #0F172A;
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --card-bg: #1E293B;
    --text-main: #F1F5F9;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --border-color: #334155;
    --border-light: #1E293B;
    --glass-bg: rgba(30,41,59,0.7);
    --glass-border: rgba(51,65,85,0.5);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.2);
  }
}

/* ===== 全局动画 ===== */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -20px); }
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 页面切换动画 ===== */
.page-transition-enter {
  animation: pageFadeIn 0.25s ease-out forwards;
}

/* ===== 全局Toast ===== */
.global-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast, 800);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--main-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastSlideIn 0.3s ease-out forwards;
  pointer-events: none;
  max-width: 80vw;
  text-align: center;
}
.global-toast.success { background: #059669; }
.global-toast.error { background: #DC2626; }
.global-toast.warning { background: #D97706; }
.global-toast.hiding {
  animation: toastSlideOut 0.3s ease-in forwards;
}

/* ===== 升级弹窗 ===== */
.upgrade-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop, 400);
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.2s ease-out;
}
.upgrade-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  text-align: center;
}
.upgrade-modal h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1E293B;
}
.upgrade-modal p {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}
.upgrade-modal .upgrade-btn {
  display: inline-block;
  padding: 10px 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.upgrade-modal .upgrade-btn:hover {
  transform: scale(1.05);
}
.upgrade-modal .close-btn {
  margin-top: 12px;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

/* ===== 响应式断点 (Mobile-First) ===== */
/* 默认：小屏手机 */
:root {
  font-size: 14px;
}

/* 中屏手机 */
@media (min-width: 376px) {
  :root { font-size: 15px; }
}

/* 大屏手机/小平板 */
@media (min-width: 415px) {
  :root { font-size: 16px; }
}

/* 平板端 */
@media (min-width: 768px) {
  :root {
    --top-bar-height: 52px;
    --bottom-nav-height: 60px;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  :root {
    --top-bar-height: 56px;
    --bottom-nav-height: 56px;
  }
}

/* ── 超小屏精准适配 ── */
/* iPhone SE / 小屏 (≤360px) */
@media (max-width: 360px) {
  :root {
    --top-bar-height: 40px;
    --bottom-nav-height: 48px;
    font-size: 13px;
  }
}

/* 小屏 (361px-390px) iPhone 12/13 mini */
@media (min-width: 361px) and (max-width: 390px) {
  :root {
    --top-bar-height: 44px;
    --bottom-nav-height: 52px;
    font-size: 13.5px;
  }
}

/* 中屏 (391px-414px) iPhone 11/12/13 */
@media (min-width: 391px) and (max-width: 414px) {
  :root {
    --top-bar-height: 46px;
    --bottom-nav-height: 56px;
  }
}

/* ===== 减少动效偏好 ===== */
@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;
  }
  .page-transition-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}