/* ═══════════════════════════════════════════════════════
   VAPEURS Design Tokens — 全局设计令牌
   修改此文件即可更新全站配色、字体、圆角等视觉规范
   ═══════════════════════════════════════════════════════ */

:root {

  /* ─── 1. 品牌色 Brand Colors ─── */
  --brand-primary:        #0EA5E9;  /* 天蓝 — 按钮、链接、高亮、Badge */
  --brand-primary-dark:   #0284C7;  /* 深蓝 — hover、渐变终点 */
  --brand-navy:           #0A1E3F;  /* 深藏蓝 — 标题、Hero 背景 */
  --brand-navy-mid:       #0d2a52;  /* 中蓝 — Hero 渐变中间色 */
  --brand-navy-light:     #102d55;  /* 浅蓝 — Hero 渐变终点 */

  /* ─── 2. 语义色 Semantic Colors ─── */
  --color-success:        #10B981;  /* 成功/验证 */
  --color-success-dark:   #059669;
  --color-whatsapp:       #25D366;  /* WhatsApp */
  --color-whatsapp-hover: #1DA851;
  --color-warning:        #F59E0B;  /* 警告/琥珀 */
  --color-warning-dark:   #D97706;
  --color-error:          #EF4444;  /* 错误/红色 */
  --color-error-dark:     #DC2626;
  --color-purple:         #8B5CF6;  /* 紫色强调 */
  --color-purple-dark:    #7C3AED;
  --color-indigo:         #6366F1;
  --color-pink:           #EC4899;
  --color-pink-dark:      #DB2777;
  --color-teal:           #14B8A6;
  --color-cyan:           #06B6D4;

  /* ─── 3. 社交色 Social Colors ─── */
  --social-facebook:      #1877F2;
  --social-youtube:       #FF0000;
  --social-instagram-a:   #E1306C;
  --social-instagram-b:   #C13584;

  /* ─── 4. 文字色 Text Colors ─── */
  --text-heading:         #0A1E3F;  /* 标题 (h1-h3) */
  --text-body:            #334155;  /* 正文 */
  --text-secondary:       #475569;  /* 次要文字、描述 */
  --text-muted:           #949494;  /* 辅助标签、占位 */
  --text-nav:             #1a1a1a;  /* 导航链接 */
  --text-on-dark:         rgba(255,255,255,0.85);
  --text-on-dark-md:      rgba(255,255,255,0.7);
  --text-on-dark-sm:      rgba(255,255,255,0.55);
  --text-on-dark-xs:      rgba(255,255,255,0.45);

  /* ─── 5. 背景色 Background Colors ─── */
  --bg-white:             #FFFFFF;
  --bg-light:             #F8FAFC;  /* 页面/卡片浅灰底 */
  --bg-hover:             #FAFBFC;
  --bg-dark:              #000000;
  --bg-divider:           #F1F5F9;

  /* ─── 6. 边框色 Border Colors ─── */
  --border-light:         #E2E8F0;  /* 卡片/表格通用边框 */
  --border-brand:         rgba(14,165,233,0.35);
  --border-brand-light:   rgba(14,165,233,0.25);
  --border-brand-hover:   rgba(14,165,233,0.2);
  --border-on-dark:       rgba(255,255,255,0.1);
  --border-on-dark-subtle:rgba(255,255,255,0.06);

  /* ─── 7. 渐变 Gradients ─── */
  --gradient-hero:        linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-mid) 40%, var(--brand-navy) 100%);
  --gradient-hero-card:   linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-mid) 60%, var(--brand-navy-light) 100%);
  --gradient-cta:         linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));

  /* ─── 8. 光晕装饰 Glow Orbs ─── */
  --glow-primary:         radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%);
  --glow-primary-strong:  radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 70%);
  --glow-purple:          radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
  --glow-white:           radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);

  /* ─── 9. 字体 Typography ─── */
  --font-family:          'Lato', sans-serif;
  --fs-xs:                10px;
  --fs-sm:                11px;
  --fs-label:             12px;
  --fs-nav:               13px;
  --fs-body:              14px;
  --fs-md:                15px;
  --fs-base:              16px;
  --fs-lg:                20px;
  --fs-xl:                22px;
  --fs-2xl:               28px;
  --fs-3xl:               32px;
  --fs-4xl:               36px;
  --fs-hero:              42px;
  --fs-hero-lg:           48px;
  --fw-light:             300;
  --fw-regular:           400;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-black:             900;
  --lh-tight:             1.2;
  --lh-heading:           1.3;
  --lh-body:              1.6;
  --lh-relaxed:           1.7;
  --lh-loose:             1.8;

  /* ─── 10. 间距 Spacing ─── */
  --section-py:           80px;
  --section-px:           20px;
  --card-padding:         28px;
  --grid-gap:             20px;
  --container-sm:         800px;
  --container-md:         1100px;
  --container-lg:         1200px;

  /* ─── 11. 圆角 Border Radius ─── */
  --radius-xs:            4px;
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            14px;
  --radius-xl:            16px;
  --radius-2xl:           20px;
  --radius-pill:          24px;
  --radius-full:          50%;

  /* ─── 12. 阴影 Shadows ─── */
  --shadow-card:          0 8px 40px rgba(10,30,63,0.06);
  --shadow-card-hover:    0 10px 32px rgba(10,30,63,0.08);
  --shadow-dropdown:      0 8px 30px rgba(10,30,63,0.08);
  --shadow-nav-scrolled:  0 1px 12px rgba(0,0,0,0.06);
  --shadow-btn-primary:   0 8px 24px rgba(14,165,233,0.3);
  --shadow-btn-whatsapp:  0 8px 24px rgba(37,211,102,0.3);

  /* ─── 13. 动画 Animation ─── */
  --ease:                 cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:      0.2s;
  --transition-normal:    0.3s;
  --transition-slow:      0.35s;
  --transition-reveal:    0.7s;
}