/* ==========================================================================
   金钠 King-Sodium 官网 V4.0 · 设计令牌
   视觉语言：对标宁德时代（CATL）官网 —— 浅色底 / 宝蓝主色 / 等距能源场景
             + 钠电品牌绿（可持续与安全信号）+ 青（技术）三色纪律体系
   与前三版的根本差异：
     ① 从「深色沉浸」全面转为「浅色极简」——白/浅灰承载，深墨仅作强调段落
     ② 主色回归 金钠 原始品牌蓝（营销 UI 系统 navy/blue），并向 CATL 宝蓝收敛
     ③ 圆角体系改为「卡片小圆角 + 按钮全胶囊」
     ④ 等距（isometric）插画成为首屏主体，替代粒子/渐变
   ========================================================================== */

:root{
  /* ---------- 中性：承载与文字 ---------- */
  --ink-950:  #060C16;   /* 最深，深色段落底 */
  --ink-900:  #0A1220;   /* 深色段落底 / 主标题 */
  --ink-800:  #101B2D;
  --ink-700:  #1E2A3B;   /* 深色段落中的卡片 */
  --txt-1:    #0A1220;   /* 浅底主文字 */
  --txt-2:    #3D4A5C;   /* 浅底次要文字（白底 9.6:1） */
  --txt-3:    #6B7688;   /* 浅底弱文字（白底 4.6:1） */
  --txt-4:    #98A2B3;   /* 占位 / 禁用（不承载正文） */

  --white:    #FFFFFF;
  --canvas:   #F5F7FA;   /* 区块交替底 */
  --canvas-2: #EEF2F7;
  --line:     #E4E8EF;   /* 描边 / 分隔 */
  --line-2:   #EFF2F6;   /* 更弱分隔 */

  /* ---------- 品牌蓝（主色，CATL 宝蓝收敛） ---------- */
  --blue-900: #0A1F44;
  --blue-800: #0F2D6B;
  --blue-700: #14418F;
  --blue-600: #1B4FD8;   /* ★ 主色：按钮底 / 链接 / 强调（白字 6.6:1） */
  --blue-500: #2E6BE6;
  --blue-400: #6B9BF5;
  --blue-200: #C3D5FB;
  --blue-100: #E8EFFD;
  --blue-50:  #F2F6FE;

  /* ---------- 钠绿（可持续 / 安全 / 低温信号，辅色） ---------- */
  --green-800: #05603C;
  --green-700: #078A5A;  /* 浅底文字安全（白底 5.4:1） */
  --green-600: #0EA36A;
  --green-500: #12B76A;  /* ★ 图形 / 徽章 / 图表 */
  --green-300: #6CE9A6;
  --green-100: #D7F4E3;

  /* ---------- 青（技术 / 数据图形，仅大面积与图形用） ---------- */
  --cyan-600: #0084B4;
  --cyan-500: #00A6DC;
  --cyan-300: #6FD8F5;
  --cyan-100: #DDF4FC;

  /* ---------- 深色段落内的文字 ---------- */
  --on-dark:      #FFFFFF;
  --on-dark-2:    #C6D0DE;
  --on-dark-3:    #8A97AB;
  --on-dark-line: rgba(255,255,255,.13);
  --on-dark-bg:   rgba(255,255,255,.05);

  /* ---------- 渐变（克制，仅用于深色段落与 Hero 光晕） ---------- */
  --grad-ink:   linear-gradient(160deg,#0A1220 0%,#0E1B33 52%,#0A1F44 100%);
  --grad-blue:  linear-gradient(135deg,#14418F 0%,#1B4FD8 55%,#2E6BE6 100%);
  --grad-sheen: linear-gradient(120deg,rgba(27,79,216,.09),rgba(0,166,220,.05) 46%,rgba(18,183,106,.06));
  --glow-blue:  radial-gradient(closest-side,rgba(27,79,216,.18),rgba(27,79,216,0));

  /* ---------- 图表数据色（同色相拉开明度 + 一冷一暖，保证堆叠可辨） ---------- */
  --chart-1: #14418F;
  --chart-2: #1B4FD8;
  --chart-3: #6B9BF5;
  --chart-4: #12B76A;

  /* ---------- 圆角：卡片小圆角 + 胶囊按钮 ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 104px;

  /* ---------- 阴影（CATL 式：极淡、靠描边分层） ---------- */
  --sh-xs: 0 1px 2px rgba(10,18,32,.05);
  --sh-sm: 0 1px 2px rgba(10,18,32,.05), 0 2px 8px rgba(10,18,32,.045);
  --sh-md: 0 4px 12px rgba(10,18,32,.06), 0 14px 32px rgba(10,18,32,.07);
  --sh-lg: 0 18px 48px rgba(10,18,32,.11);
  --sh-blue: 0 8px 22px rgba(27,79,216,.26);
  --sh-focus: 0 0 0 4px rgba(27,79,216,.16);

  /* ---------- 字体 ---------- */
  --font: "HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-en: "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: "JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;

  /* ---------- 字号（响应式） ---------- */
  --fs-display: clamp(38px,5.1vw,68px);
  --fs-h1:      clamp(30px,3.5vw,46px);
  --fs-h2:      clamp(24px,2.5vw,34px);
  --fs-h3:      clamp(18px,1.4vw,21px);
  --fs-h4:      16px;
  --fs-lead:    clamp(15.5px,1.15vw,18px);
  --fs-body:    15px;
  --fs-sm:      13.5px;
  --fs-xs:      12px;
  --fs-kicker:  11.5px;

  /* ---------- 版面宽度 ---------- */
  --w-wrap: 1200px;
  --w-wide: 1360px;
  --w-read: 720px;
  --sec-y:  clamp(64px,7vw,112px);

  /* ---------- 动效 ---------- */
  --ease:     cubic-bezier(.22,.68,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .52s;
}

/* 备选主题：纯绿版（若对外需要回归金钠绿身份，仅需给 <html> 加 .theme-green）
   —— 把主色蓝整族替换为绿族，其余令牌不动。 */
html.theme-green{
  --blue-900: #04321F;
  --blue-800: #054A2E;
  --blue-700: #05603C;
  --blue-600: #078A5A;
  --blue-500: #0EA36A;
  --blue-400: #34D399;
  --blue-200: #A7E7C9;
  --blue-100: #DCF5E8;
  --blue-50:  #F1FBF6;
  --grad-blue: linear-gradient(135deg,#05603C 0%,#078A5A 55%,#0EA36A 100%);
  --sh-blue: 0 8px 22px rgba(7,138,90,.26);
  --sh-focus: 0 0 0 4px rgba(7,138,90,.16);
  --chart-1: #05603C; --chart-2: #078A5A; --chart-3: #34D399;
}