/* === 全局重置 === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base); /* 规范：16px→18px 平滑缩放 */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* === 规范：全局焦点态（所有交互元素兜底） === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* === 规范：全局减少动效降级（兜底，各文件另有局部块） === */
@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;
  }
}

:root {
  /* === 颜色 === */
  --color-primary: #3EA8D9;
  --color-primary-dark: #2E8CB8;
  --color-secondary: #A8CE50;
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-bg: #FFFFFF;
  --color-bg-dark: #000000;
  --color-surface: #F7F8FA;
  --color-number: #D9E7F0;
  --color-border: #E5E5E5;
  --color-divider: #999999;
  --color-dot: #EEEEEE; /* markets 侧边导航未激活圆点 */
  --color-soft-blue: #ECF6FB; /* about/markets CTA 区块背景 */
  --color-cta-deep: #024896;  /* about CTA 卡片 1 深蓝底（图片 20% 叠加） */
  --color-map-plant: #00486A; /* about 地图：制造基地 */
  --color-map-rd: #A7CD50;    /* about 地图：研发中心 */
  --color-map-dist: #EED41F;  /* about 地图：分销中心 */

  /* === 字体 === */
  --font-primary: 'Manrope', sans-serif;
  --font-secondary: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: clamp(16px, 1vw + 14px, 18px); /* 规范基准字号 */
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --line-height-small: 1.5;

  /* === 间距 === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* === 布局 === */
  --container-max: 1920px;
  --container-content: 1200px;
  --container-padding: 24px;

  /* === 时长令牌 === */
  --duration-micro: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-xl: 800ms;

  /* === 缓动曲线 === */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* === 位移 === */
  --translate-xs: 4px;
  --translate-sm: 8px;
  --translate-md: 16px;
  --translate-lg: 24px;
  --translate-xl: 32px;

  /* === 圆角 === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* === 阴影 === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
}

/* === 响应式断点 === */
@media (max-width: 1200px) {
  :root {
    --container-padding: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
  }
}