/* ============================================
   万星轮胎官网 - CSS 变量系统
   ============================================ */

:root {
  /* ========== 颜色变量 ========== */
  /* 品质蓝主色调 */
  --color-primary-dark: #0d47a1;
  --color-primary-main: #1565c0;
  --color-primary-light: #5e92f3;

  /* 安全绿辅助色 */
  --color-secondary: #43a047;
  --color-secondary-light: #66bb6a;
  --color-secondary-dark: #2e7d32;

  /* 橡胶黑与中性色 */
  --color-ink: #263238;
  --color-text-dark: #263238;
  --color-text-medium: #4a5a6a;
  --color-text-light: #90a4ae;
  --color-text-white: #ffffff;

  --color-background: #f4f7fb;
  --color-background-light: #ffffff;
  --color-background-dark: #e3eaf3;

  --color-border: #d9e2ef;
  --color-border-light: #e8edf5;
  --color-border-dark: #b1c0d4;

  /* 功能色 */
  --color-success: #43a047;
  --color-warning: #ffb300;
  --color-danger: #e53935;
  --color-info: #0288d1;

  /* ========== 字体变量 ========== */
  --font-family-base: "Microsoft YaHei", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: "Microsoft YaHei", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "Courier New", monospace;

  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 34px;
  --font-size-5xl: 44px;

  /* 字体粗细 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.8;
  --line-height-loose: 2;

  /* ========== 间距变量 (8px 基数) ========== */
  --space-0: 0;
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* ========== 圆角变量 ========== */
  --border-radius-xs: 2px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  /* ========== 阴影变量 ========== */
  --box-shadow-xs: 0 1px 2px rgba(13, 71, 161, 0.06);
  --box-shadow-sm: 0 4px 12px rgba(38, 50, 56, 0.1);
  --box-shadow-md: 0 10px 24px rgba(13, 71, 161, 0.12);
  --box-shadow-lg: 0 18px 36px rgba(13, 71, 161, 0.18);
  --box-shadow-xl: 0 24px 48px rgba(13, 71, 161, 0.22);
  --box-shadow-2xl: 0 34px 80px rgba(13, 71, 161, 0.28);

  /* ========== 过渡/动画变量 ========== */
  --transition-fast: 160ms ease-in-out;
  --transition-base: 260ms ease-in-out;
  --transition-slow: 380ms ease-in-out;

  /* ========== 断点变量 (响应式) ========== */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;

  /* ========== 其他变量 ========== */
  --header-height: 78px;
  --footer-height: auto;
  --max-container-width: 1280px;
  --grid-gap: 28px;
  --timeline-line: rgba(21, 101, 192, 0.18);
  --texture-tire: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 45%, transparent 55%, transparent 100%);
}

/* ========== 响应式断点下的变量调整 ========== */
@media (max-width: 992px) {
  :root {
    --font-size-5xl: 38px;
    --font-size-4xl: 30px;
    --font-size-3xl: 24px;
    --space-2xl: 48px;
    --space-3xl: 68px;
    --header-height: 70px;
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-5xl: 32px;
    --font-size-4xl: 26px;
    --font-size-3xl: 22px;
    --font-size-2xl: 20px;
    --space-2xl: 36px;
    --space-3xl: 52px;
    --header-height: 62px;
  }
}