/* ============================================================
 * CNLINKO 凌科电气 - 全局主题变量系统
 * Figma 像素级还原，设计宽度: 1920px
 * 字体: Source Han Sans CN (思源黑体) + Montserrat
 * ============================================================ */

/* 引入思源黑体 (Source Han Sans CN) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;350;400;500;700&family=Montserrat:wght@300&display=swap");

:root {
  /* ========== 品牌色系 (Figma 精确值) ========== */
  --color-primary: #193190;
  /* 主色 - 深蓝 */
  --color-primary-rgb: 25, 49, 144;
  /* 主色 RGB */
  --color-primary-dark: #101e5c;
  /* 主色深 */
  --color-primary-bg: #edf6ff;
  /* 浅蓝底色 */
  --color-primary-bg-light: #f6fbff;
  /* 极浅蓝底色 */
  --color-primary-border: #b3d9ff;
  /* 浅蓝边框 */
  --color-primary-bg-alt: #deeeff;
  /* 深蓝边框色 */

  --color-accent: #cb1f27;
  /* 强调色 - 红 (对比表推荐列) */
  --color-accent-rgb: 203, 31, 39;
  --color-accent-dark: #a0171f;

  --color-search-btn: #4058a2;
  /* 搜索按钮色 */

  /* ========== 中性色系 ========== */
  --color-white: #ffffff;
  --color-bg-light: #f8f8f8;
  /* 浅灰背景 */
  --color-bg-gray: #e5e5e5;
  --color-bg-page: rgba(245, 245, 245, 0.3);
  /* 半透明灰 */
  --color-card-hover-bg: rgba(64, 88, 162, 0.15);
  /* 表格发光列 */
  --color-bg-dark: #242933;
  /* 页脚深色 */
  --color-bg-darker: #191b1d;
  /* 产品优势区 */

  /* ========== 文字色 ========== */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-light: #b2b2b2;
  --color-text-muted: #cccccc;
  --color-text-lang: #5e5d5d;
  /* 语言切换文字 */
  --color-text-white: #ffffff;
  --color-text-on-dark: rgba(255, 255, 255, 0.85);

  /* ========== 边框色 ========== */
  --color-border: #e5e5e5;
  --color-border-medium: #cccccc;
  --color-border-light: rgba(204, 204, 204, 0.5);
  --color-border-lighter: rgba(204, 204, 204, 0.2);

  /* ========== 字体体系 ========== */
  --font-family-primary: "Source Han Sans CN", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-family-montserrat: "Montserrat", sans-serif;

  /* 字号 (Figma 精确) */
  --font-size-hero: 68px;
  /* Banner大标题 Bold */
  --font-size-h1: 42px;
  /* 一级标题 Medium */
  --font-size-h2: 32px;
  /* 二级标题 Medium */
  --font-size-h3: 24px;
  /* 三级标题 Medium */
  --font-size-h4: 20px;
  /* 四级标题 Medium */
  --font-size-h4-light: 20px;
  /* 四级标题 Light 300 */
  --font-size-body: 18px;
  /* 正文 350 */
  --font-size-caption: 16px;
  /* 说明文字 Light 300 */
  --font-size-small: 14px;
  /* 小号 Montserrat 300 */
  --font-size-product-title: 40px;
  /* 产品详情标题 350 */

  /* 字重 */
  --font-weight-bold: 700;
  /* Banner标题 */
  --font-weight-medium: 500;
  /* 标题 */
  --font-weight-normal: 350;
  /* 正文 */
  --font-weight-light: 300;
  /* 说明 */

  /* 行高 */
  --line-height-hero: 2em;
  /* Banner大标题 */
  --line-height-heading: 1.5em;
  /* 标题 */
  --line-height-body: 1.8em;
  /* 正文 */
  --line-height-caption: 1.2em;
  /* 说明 */
  --line-height-body-alt: 1.5em;
  /* 正文备选(表格用) */

  /* ========== 间距系统 ========== */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;
  --spacing-3xl: 60px;
  --spacing-4xl: 90px;
  --spacing-5xl: 120px;

  /* 水平内边距 */
  --container-pad: 160px;

  /* ========== 圆角 ========== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-btn: 60px;
  /* 按钮圆角(大) */
  --radius-lg: 20px;

  /* ========== 阴影 ========== */
  --shadow-card: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0px 12px 40px 0px rgba(0, 0, 0, 0.1);

  /* ========== 导航栏 (Figma: 1920×88) ========== */
  --nav-height: 88px;

  /* ========== Banner 高度 ========== */
  --banner-full: 773px;
  --banner-medium: 462px;
  --banner-half: 380px;
  --banner-custom: 896px;
  /* 定制页Banner高度 */

  /* ========== 页脚 ========== */
  --footer-height: 684px;

  /* ========== 容器宽度 ========== */
  --container-max: 1600px;

  /* ========== 过渡 ========== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* ========== Figma渐变叠加层 ========== */
  --gradient-banner: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.14) 20%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 0.7) 100%);
  --gradient-custom: linear-gradient(216deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.14) 56%, rgba(0, 0, 0, 0.28) 73%, rgba(0, 0, 0, 0.42) 90%, rgba(0, 0, 0, 0.7) 100%);
}