/* ==========================================================================
   广西柳州盛龙科技有限公司 · 官网配色主题（THEME）
   --------------------------------------------------------------------------
   ★★ 全站颜色只在这一个文件里定义 ★★

   以后要换配色：只改下面「一、品牌基础色」里的色号即可，
   style.css 和所有 HTML 文件都不用动。

   配色规范：沉稳深蓝 + 朱红 —— 传统重工 / 国企感（2026-10 版）
   分层：主色 60% / 辅色 25% / 强调 ≤10% / 浅底 + 文字 打底
   ========================================================================== */

:root {

  /* ═══════════════════════════════════════════════════════════════
     一、品牌基础色  ★ 改配色只改这一段
     ※ 每个颜色有两行：上面是 HEX，下面是同色的 RGB 通道值。
       RGB 那行是给「半透明效果」（阴影、渐变）用的，改 HEX 时务必同步改 RGB。
     ═══════════════════════════════════════════════════════════════ */

  /* 主色 · 深海蓝 —— 导航 / Hero / 标题 / 主按钮，占画面 60% 以上 */
  --brand-primary:        #1B3A6B;
  --brand-primary-rgb:    27, 58, 107;

  /* 辅色 · 钢青蓝 —— Hero 渐变过渡 / 次级色块，与主色同系增强层次 */
  --brand-secondary:      #2E5A9E;
  --brand-secondary-rgb:  46, 90, 158;

  /* 强调 · 朱红 —— CTA / 当前菜单高亮 / 卖点标签，占比不超过 10% */
  --brand-accent:         #C8102E;
  --brand-accent-rgb:     200, 16, 46;

  /* 浅底 · 云灰白 —— 内容区块背景，避免大面积纯白刺眼 */
  --c-bg-soft:            #F1F5F9;

  /* 文字 · 墨蓝黑 —— 正文主色 */
  --c-text:               #0F172A;


  /* ═══════════════════════════════════════════════════════════════
     二、派生色（由上方的色推导而来，一般不用改）
     ═══════════════════════════════════════════════════════════════ */

  /* 深海蓝 · 深一档（Hero 底） / 最深（页脚底） */
  --brand-primary-d1:     #16305A;
  --brand-primary-d1-rgb: 22, 48, 90;
  --brand-primary-d2:     #0D1F3A;
  --brand-primary-d2-rgb: 13, 31, 58;

  /* 朱红 · 浅 / 深（按钮 hover） */
  --brand-accent-l:       #D93A50;
  --brand-accent-d:       #A50D25;

  /* 朱红 · 深色底专用（提亮）—— #C8102E 压在深海蓝上对比度仅 1.9:1，不够读，
     故深色底上的红色文字/图标改用这个更亮的朱红（3.2:1）。
     红底白字（按钮、CTA 横幅）和浅色底上的红字，仍然用上面的 --brand-accent。 */
  --brand-accent-on-dark:  #E8556B;
  --brand-accent-on-dark-rgb: 232, 85, 107;

  /* 次级文字（说明文字） / 分隔线 / 纯白 */
  --c-text-2:             #64748B;
  --c-line:               #E2E8F0;
  --c-white:              #FFFFFF;


  /* ═══════════════════════════════════════════════════════════════
     三、复合效果（阴影 / 渐变，自动引用上面的变量，改基础色后会跟着变）
     ═══════════════════════════════════════════════════════════════ */

  --shadow-s: 0 2px 10px rgba(var(--brand-primary-rgb), .06);
  --shadow-m: 0 10px 30px rgba(var(--brand-primary-rgb), .10);
  --shadow-l: 0 18px 50px rgba(var(--brand-primary-d2-rgb), .22);
  --shadow-accent: 0 10px 24px rgba(var(--brand-accent-rgb), .34);

  /* Hero 区遮罩渐变：最深 → 深海蓝 → 钢青蓝 */
  --veil-hero: linear-gradient(105deg,
      rgba(var(--brand-primary-d2-rgb), .95) 0%,
      rgba(var(--brand-primary-rgb), .86) 46%,
      rgba(var(--brand-secondary-rgb), .70) 100%);
  /* 内页头图遮罩渐变：最深 → 钢青蓝 */
  --veil-page: linear-gradient(100deg,
      rgba(var(--brand-primary-d2-rgb), .95),
      rgba(var(--brand-secondary-rgb), .76));


  /* ═══════════════════════════════════════════════════════════════
     四、导航栏配色
     ※ 现按品牌色卡执行：深海蓝底 + 白字（深色导航）。
       如想改回「白底深字」的浅色导航，把下面这 5 行的值换成注释里写的那组即可。
     ═══════════════════════════════════════════════════════════════ */

  --nav-bg:        rgba(var(--brand-primary-rgb), .97);
  /*  浅色版 →  --nav-bg: rgba(255, 255, 255, .97);  */

  --nav-fg:        rgba(255, 255, 255, .88);
  /*  浅色版 →  --nav-fg: var(--c-text);  */

  --nav-fg-h:      #FFFFFF;
  /*  浅色版 →  --nav-fg-h: var(--brand-primary);  */

  --nav-line:      rgba(255, 255, 255, .12);
  /*  浅色版 →  --nav-line: var(--c-line);  */

  --nav-hover-bg:  rgba(255, 255, 255, .10);
  /*  浅色版 →  --nav-hover-bg: var(--c-bg-soft);  */
}