/*
 * WES Design Tokens — 从 Figma Make 导出代码提取
 * 生成日期: 2026-05-03
 * 来源: B2B网站设计/src/styles/theme.css + 各 TSX 组件硬编码值
 *
 * 使用方法:
 *   1. 上传到服务器: /var/www/wesvision.cn/public/wp-content/themes/wes-child/assets/css/
 *   2. 由 functions.php 自动 enqueue
 *   3. 在 Elementor 中通过 CSS Classes 引用,或在 components.css 中使用 var(--wes-xxx)
 *
 * 命名规则:
 *   --wes-color-*    颜色
 *   --wes-font-*     字体
 *   --wes-spacing-*  间距
 *   --wes-radius-*   圆角
 *   --wes-shadow-*   阴影
 *   --wes-z-*        层级
 */

:root {

  /* ═══════════════════════════════════════════════════════════
   * 1. 颜色系统
   * ═══════════════════════════════════════════════════════════ */

  /* --- 1.1 品牌色 (Blue) --- */
  --wes-color-blue-50:   #E3F2FD;
  --wes-color-blue-100:  #DBEAFE;
  --wes-color-blue-200:  #90CAF9;
  --wes-color-blue-300:  #60A5FA;
  --wes-color-blue-400:  #1E88E5;
  --wes-color-blue-500:  #2196F3;   /* 主品牌色 — Figma 中 BLUE 常量 */
  --wes-color-blue-600:  #1565C0;
  --wes-color-blue-700:  #0D47A1;

  /* --- 1.2 深色系 (Navy) — 用于正文/标题/深色背景 --- */
  --wes-color-navy-900:  #0D1B2A;   /* 主深色 — Figma 中 NAVY 常量 */
  --wes-color-navy-800:  #1a2332;   /* foreground/标题色 */
  --wes-color-navy-700:  #1a3a5c;   /* 渐变终止色 */
  --wes-color-navy-600:  #37474F;
  --wes-color-navy-500:  #455A64;
  --wes-color-navy-400:  #546E7A;

  /* --- 1.3 中性灰 --- */
  --wes-color-gray-50:   #FAFCFF;
  --wes-color-gray-100:  #F8FAFC;
  --wes-color-gray-150:  #f5f7fa;   /* 页面背景色 */
  --wes-color-gray-200:  #EEF2F7;   /* 卡片背景/secondary */
  --wes-color-gray-250:  #E8EDF3;
  --wes-color-gray-300:  #E3EAF0;
  --wes-color-gray-350:  #D0DAE6;
  --wes-color-gray-400:  #CBD5E1;
  --wes-color-gray-450:  #B0BEC5;
  --wes-color-gray-500:  #90A4AE;
  --wes-color-gray-600:  #607D8B;   /* muted-foreground/次要文字 */
  --wes-color-gray-700:  #8A9BB5;

  /* --- 1.4 功能色 --- */
  --wes-color-success:   #4CAF50;
  --wes-color-success-light: #10B981;
  --wes-color-success-bg: #E8F5E9;
  --wes-color-warning:   #F59E0B;
  --wes-color-warning-bg: #FFF9C4;
  --wes-color-danger:    #e53935;
  --wes-color-danger-bg: #FFEBEE;
  --wes-color-info:      #06B6D4;
  --wes-color-purple:    #8B5CF6;
  --wes-color-purple-alt: #9C27B0;

  /* --- 1.5 语义化别名 (在组件中引用这些) --- */
  --wes-color-primary:          var(--wes-color-blue-500);
  --wes-color-primary-dark:     var(--wes-color-blue-600);
  --wes-color-primary-darker:   var(--wes-color-blue-700);
  --wes-color-primary-light:    var(--wes-color-blue-200);
  --wes-color-primary-lightest: var(--wes-color-blue-50);

  --wes-color-bg-page:          var(--wes-color-gray-150);
  --wes-color-bg-card:          #ffffff;
  --wes-color-bg-section-alt:   var(--wes-color-gray-200);
  --wes-color-bg-alt:           #fafbfc;   /* 规格表交替行背景 */
  --wes-color-bg-input:         var(--wes-color-gray-150);

  --wes-color-text-heading:     var(--wes-color-navy-800);
  --wes-color-text-body:        var(--wes-color-navy-800);
  --wes-color-text-muted:       var(--wes-color-gray-600);
  --wes-color-text-inverse:     #ffffff;
  --wes-color-text-link:        var(--wes-color-blue-500);

  --wes-color-border:           rgba(0, 0, 0, 0.1);
  --wes-color-border-light:     var(--wes-color-gray-300);

  /* --- 1.6 Hero 渐变覆盖层 (从 HomePage.tsx 提取) --- */
  --wes-hero-overlay: linear-gradient(135deg, rgba(13,27,42,0.96) 0%, rgba(13,27,42,0.84) 55%, rgba(5,15,35,0.88) 100%);
  --wes-hero-title-glow: 0 0 40px rgba(96,165,250,0.4);

  /* --- 1.7 按钮色 --- */
  --wes-color-btn-primary-bg:         var(--wes-color-blue-500);
  --wes-color-btn-primary-bg-hover:   var(--wes-color-blue-600);
  --wes-color-btn-primary-text:       #ffffff;
  --wes-color-btn-secondary-bg:       var(--wes-color-gray-200);
  --wes-color-btn-secondary-bg-hover: var(--wes-color-gray-400);
  --wes-color-btn-secondary-text:     var(--wes-color-gray-600);
  --wes-color-btn-outline-border:     var(--wes-color-blue-500);
  --wes-color-btn-outline-text:       var(--wes-color-blue-500);

  /* --- 1.8 微信绿 (中国B2B特色) --- */
  --wes-color-wechat:    #4CAF50;
  --wes-color-wechat-bg: rgba(76, 175, 80, 0.1);


  /* ═══════════════════════════════════════════════════════════
   * 2. 字体系统
   * ═══════════════════════════════════════════════════════════ */

  /* --- 2.1 字体族 --- */
  /*
   * 字体策略 (v4.1 修订):
   *   西文/数字: Inter — 专为屏幕 UI 设计，工业 B2B 首选，woff2 仅 ~45KB
   *   中文主体: 系统字体栈 — 零加载，PingFang SC(Apple) / 微软雅黑(Windows)
   *   中英混排原则: Inter 写在最前，确保 ASCII 字符用 Inter，汉字降级到系统字体
   *   彻底废弃: Noto Sans SC 自托管 (6-10MB，不适合 B2B 场景)
   */

  /* 西文/数字字体 — Inter */
  --wes-font-family-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* 中文正文字体 — 系统字体栈，中英混排时 Inter 处理 ASCII，系统字体处理汉字 */
  --wes-font-family-cn: 'Inter', -apple-system, BlinkMacSystemFont,
                        'PingFang SC', 'Hiragino Sans GB',
                        'Microsoft YaHei', 'WenQuanYi Micro Hei',
                        Helvetica, Arial, sans-serif;

  --wes-font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* --- 2.2 字号 (基于 16px base, v4.1 修订) --- */
  --wes-font-size-xs:    0.75rem;   /* 12px — 辅助标签/版权 */
  --wes-font-size-sm:    0.875rem;  /* 14px — 规格表/表单标签 */
  --wes-font-size-base:  1rem;      /* 16px — body 正文 (工业 B2B 推荐最小值) */
  --wes-font-size-md:    1.0625rem; /* 17px — 稍大正文/列表项 */
  --wes-font-size-lg:    1.125rem;  /* 18px — 强调文字/副标题 */
  --wes-font-size-xl:    1.25rem;   /* 20px — 小标题 */
  --wes-font-size-2xl:   1.5rem;    /* 24px — section 小标题 */
  --wes-font-size-3xl:   1.75rem;   /* 28px — 中标题 */

  /* 响应式标题用 clamp,桌面端实际值 */
  --wes-font-size-h1:    clamp(1.8rem, 4vw, 3rem);       /* Hero 主标题 */
  --wes-font-size-h1-sub: clamp(1.6rem, 3.5vw, 2.6rem);  /* Hero 副标题 */
  --wes-font-size-h2:    clamp(1.6rem, 3vw, 2.2rem);     /* Section 标题 */
  --wes-font-size-h3:    1.1rem;                          /* 卡片/子标题 */
  --wes-font-size-badge: clamp(1rem, 2vw, 1.35rem);      /* Hero badge */
  --wes-font-size-stat:  clamp(1.4rem, 3vw, 2rem);       /* 统计数字 */

  /* --- 2.3 字重 --- */
  --wes-font-weight-normal:   400;
  --wes-font-weight-medium:   500;
  --wes-font-weight-semibold: 600;
  --wes-font-weight-bold:     700;

  /* --- 2.4 行高 --- */
  --wes-line-height-tight:    1.3;   /* 标题/中文 H1-H3 */
  --wes-line-height-snug:     1.4;   /* 副标题 */
  --wes-line-height-normal:   1.5;   /* Figma 默认 body */
  --wes-line-height-relaxed:  1.7;   /* 中文正文推荐 */


  /* ═══════════════════════════════════════════════════════════
   * 3. 间距系统 (基于 4px)
   * ═══════════════════════════════════════════════════════════ */
  --wes-spacing-1:   4px;
  --wes-spacing-2:   8px;
  --wes-spacing-3:   12px;
  --wes-spacing-4:   16px;
  --wes-spacing-5:   20px;
  --wes-spacing-6:   24px;
  --wes-spacing-8:   32px;
  --wes-spacing-10:  40px;
  --wes-spacing-12:  48px;
  --wes-spacing-16:  64px;
  --wes-spacing-20:  80px;

  /* 语义化间距 */
  --wes-section-padding-y:         80px;   /* py-20 = 80px */
  --wes-section-padding-y-tablet:  60px;
  --wes-section-padding-y-mobile:  48px;
  --wes-container-max-width:       1280px; /* max-w-7xl */
  --wes-container-padding-x:       20px;   /* px-5 — 移动端中文阅读更舒适 */
  --wes-container-padding-x-lg:    32px;   /* lg:px-8 */
  --wes-card-padding:              32px;   /* p-8 */
  --wes-card-padding-sm:           20px;   /* p-5 */
  --wes-card-gap:                  32px;   /* gap-8 */
  --wes-card-gap-sm:               20px;   /* gap-5 */

  /* 按钮间距 */
  --wes-btn-padding-y:             16px;   /* py-4 */
  --wes-btn-padding-x:             32px;   /* px-8 */
  --wes-btn-padding-y-sm:          10px;   /* py-2.5 */
  --wes-btn-padding-x-sm:          20px;   /* px-5 */


  /* ═══════════════════════════════════════════════════════════
   * 4. 圆角
   * ═══════════════════════════════════════════════════════════ */
  --wes-radius-sm:      4px;     /* 按钮 tag */
  --wes-radius-md:      8px;     /* 输入框/小卡片 */
  --wes-radius-lg:      12px;    /* 按钮/中卡片 */
  --wes-radius-xl:      16px;    /* 大卡片 rounded-2xl */
  --wes-radius-2xl:     20px;
  --wes-radius-full:    9999px;  /* 胶囊形 */


  /* ═══════════════════════════════════════════════════════════
   * 5. 阴影
   * ═══════════════════════════════════════════════════════════ */
  --wes-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --wes-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --wes-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
  --wes-shadow-xl:   0 12px 40px rgba(0, 0, 0, 0.12);
  --wes-shadow-2xl:  0 16px 48px rgba(0, 0, 0, 0.12);
  --wes-shadow-btn:  0 8px 30px rgba(33, 150, 243, 0.4);


  /* ═══════════════════════════════════════════════════════════
   * 6. 过渡动画
   * ═══════════════════════════════════════════════════════════ */
  --wes-transition-fast:    0.15s ease;
  --wes-transition-normal:  0.3s ease;
  --wes-transition-slow:    0.5s ease;
  --wes-transition-spring:  0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* hover 上浮 */
  --wes-hover-lift-sm:  -4px;
  --wes-hover-lift-md:  -6px;


  /* ═══════════════════════════════════════════════════════════
   * 7. Z-Index 层级
   * ═══════════════════════════════════════════════════════════ */
  --wes-z-header:    40;
  --wes-z-sidebar:   50;
  --wes-z-modal:     50;
  --wes-z-dropdown:  50;
  --wes-z-tooltip:   60;


  /* ═══════════════════════════════════════════════════════════
   * 8. 断点 (与 Elementor 默认对齐)
   * ═══════════════════════════════════════════════════════════ */
  /* 以下不能用 CSS 变量控制 @media, 仅供文档参考:
   *   Mobile:  < 768px   (Elementor: 767px)
   *   Tablet:  768-1024px (Elementor: 1024px)
   *   Desktop: > 1024px
   *   Large:   > 1280px  (max-w-7xl)
   */
}