/* ═══════════════════════════════════════════════════════════
   assets/css/tokens.css — Design Token System v2
   公司官网定位: 专业、可信、现代 (4A基因 × 汽车营销深耕)
   美学方向: Editorial/Swiss precision + 克制的视觉层次
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ==========================================
     1. 主色系 — 深海科技蓝
     ========================================== */
  --color-primary: #1A56DB;
  --color-primary-light: #3B82F6;
  --color-primary-dark: #1E40AF;
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-400: #60A5FA;
  --color-primary-ghost: rgba(26, 86, 219, 0.08);
  --color-primary-soft: rgba(26, 86, 219, 0.04);

  /* 2. 辅色系 — 暖橙活力 */
  --color-accent: #F97316;
  --color-accent-light: #F59E0B;
  --color-accent-50: #FFF7ED;
  --color-accent-100: #FFEDD5;
  --color-accent-ghost: rgba(249, 115, 22, 0.08);

  /* 3. 中性色 — 冷灰体系 (保留旧变量名兼容) */
  --color-text-primary: #0F172A;
  --color-text-secondary: #1E293B;
  --color-text-body: #475569;
  --color-text-muted: #475569;
  --color-text-placeholder: #64748B;   /* 曾为 #94A3B8，加深以保证辅助文本可读性 */
  --color-text-inverse: #F1F5F9;
  --color-border: #94A3B8;             /* 曾为 #CBD5E1，加深边框对比度 */
  --color-divider: #CBD5E1;            /* 曾为 #E2E8F0，加深分隔线对比度 */
  --color-bg-card: #F1F5F9;
  --color-bg-page: #F8FAFC;
  --color-white: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-alt: #F1F5F9;

  /* 4. 装饰色 */
  --color-deco-blue: #3B82F6;
  --color-deco-teal: #0D9488;
  --color-deco-indigo: #6366F1;

  /* ==========================================
     5. 渐变系统
     ========================================== */
  --gradient-primary: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #60A5FA 100%);
  --gradient-accent: linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FB923C 100%);
  --gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 50%, #334155 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(26,86,219,0.12) 0%, transparent 50%),
                    radial-gradient(ellipse 60% 50% at 70% 80%, rgba(249,115,22,0.06) 0%, transparent 50%);
  --gradient-card: linear-gradient(180deg, rgba(26,86,219,0.03) 0%, rgba(255,255,255,0) 40%);

  /* ==========================================
     6. 字体系统 (系统字体栈，不依赖外网)
     ========================================== */
  --font-display: 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --font-heading: 'PingFang SC', 'Microsoft YaHei', 'Microsoft YaHei UI', system-ui, -apple-system, sans-serif;
  --font-body: 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* 固定字号 (不用 vw 动态缩放) */
  --text-xs: 0.75rem;            /* 12px */
  --text-sm: 0.875rem;           /* 14px */
  --text-eyebrow: 0.8125rem;     /* 13px */
  --text-body: 1.0625rem;        /* 17px */
  --text-body-lg: 1.125rem;      /* 18px */
  --text-lead: 1.25rem;          /* 20px */
  --text-subtitle: 1.375rem;     /* 22px */
  --text-section-title: 2.5rem;  /* 40px */
  --text-hero: 4rem;             /* 64px */
  --text-stat: 3.25rem;          /* 52px */

  /* ==========================================
     7. 间距系统
     ========================================== */
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --space-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-padding: clamp(1rem, 0.8rem + 1vw, 2rem);

  /* ==========================================
     8. 圆角系统
     ========================================== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ==========================================
     9. 阴影系统
     ========================================== */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.14);
  --shadow-2xl: 0 25px 60px rgba(15, 23, 42, 0.16);
  --shadow-card-hover: 0 16px 48px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-button: 0 2px 8px rgba(26, 86, 219, 0.2);

  /* ==========================================
     10. 过渡和缓动
     ========================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 200ms ease;
  --transition-base: 250ms var(--ease-out-expo);
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ==========================================
     11. 字体粗细
     ========================================== */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ==========================================
     12. 行高
     ========================================== */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.8;

  /* ==========================================
     13. 字距 (全部为0，不压缩文字)
     ========================================== */
  --ls-tight: 0;
  --ls-normal: 0;
  --ls-eyebrow: 0;

  /* ==========================================
     14. 边框
     ========================================== */
  --border-thin: 1px solid var(--color-divider);
  --border-base: 1px solid var(--color-divider);

  /* ==========================================
     15. 过渡补充
     ========================================== */
  --transition-slower: 600ms ease;

  /* ==========================================
     16. 装饰色补充
     ========================================== */
  --color-accent-400: #FB923C;
  --color-primary-300: #93C5FD;

  /* ==========================================
     17. Z-Index
     ========================================== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ── 移动端字号缩减 ── */
@media (max-width: 768px) {
  :root {
    --text-hero: 2.5rem;
    --text-section-title: 1.75rem;
    --text-stat: 2.25rem;
    --text-lead: 1.125rem;
    --text-subtitle: 1.125rem;
    --text-body: 1rem;
    --text-body-lg: 1.0625rem;
  }
}