/* ============================================================
   启睿数码 · QIRAY 设计系统令牌 v7.0 ——「电压钴蓝」
   ------------------------------------------------------------
   题材立意：数码配件的世界是阳极氧化铝、端口铭牌与参数丝印。
   全站以冷调纸白为底、午夜石墨做结构面（导航/Hero/页脚），
   电压钴蓝是唯一的高亮色——呼应充电与供电品类；
   价格、计数、编码一律等宽字体。
   变量名沿用 --mh-* 系列，下游样式无需改名即可继承。
   ============================================================ */
:root {
  /* ---------- 品牌主色（电压钴蓝 · 阳极品蓝） ---------- */
  --mh-primary: #2456F0;          /* 电压钴蓝 · CTA/价格/激活态 */
  --mh-primary-hover: #3E6BFF;    /* hover · 亮一档 */
  --mh-primary-active: #1A43C4;   /* active · 压深一档 */
  --mh-primary-light: #E9EFFF;    /* 主色浅底（标签/hover 底） */
  --mh-accent: #3E6BFF;           /* 点缀 · 与主色同调（眉标/徽章） */
  --mh-accent-light: #DCE6FF;     /* 点缀浅底 */

  /* ---------- 文字色阶（中性石墨系） ---------- */
  --mh-text-1: #15181F;           /* 主文字 · 石墨黑 */
  --mh-text-2: #4E545F;           /* 次级 · 中石墨 */
  --mh-text-3: #878D99;           /* 辅助 · 浅石墨 */
  --mh-text-4: #C4C9D2;           /* 占位/禁用 */
  --mh-text-inverse: #FFFFFF;     /* 反白文字 */

  /* ---------- 背景色阶（冷调纸白系） ---------- */
  --mh-bg-page: #F5F6F8;          /* 页面底 · 冷调纸白 */
  --mh-bg-card: #FFFFFF;          /* 卡片底 · 纯白 */
  --mh-bg-soft: #EEF0F4;          /* 柔和底 · 冷灰白 */
  --mh-bg-section: #E5E8EE;       /* 区块底 · 深一档灰白 */
  --mh-bg-dark: #10141F;          /* 深色结构面 · 午夜石墨（导航/Hero/页脚） */
  --mh-bg-dark-2: #1A2030;        /* 深色抬升面 · 午夜石墨二阶 */

  /* ---------- 商城风令牌 ---------- */
  --mh-topbar-bg: #EEF0F4;        /* 顶部工具条 */
  --mh-topbar-text: #6A7078;      /* 顶栏文字 */
  --mh-topbar-line: #E2E6ED;      /* 顶栏下分隔线 */
  --mh-nav-bg: #10141F;           /* 午夜石墨主导航条 */
  --mh-nav-bg-hover: #1C2334;     /* 导航 hover · 抬升石墨 */
  --mh-nav-active: #2456F0;       /* 「全部商品分类」强调 · 电压钴蓝 */
  --mh-nav-text: #FFFFFF;         /* 导航文字 */
  --mh-catbar-bg: #2456F0;        /* 左侧分类块强调（电压钴蓝） */
  --mh-floor-tab-active: #15181F; /* 楼层 Tab 激活 · 石墨 */
  --mh-price: #2456F0;            /* 商品价 · 电压钴蓝 */

  /* ---------- 分隔/边框 ---------- */
  --mh-line: #E3E6EC;             /* 分隔线 · 冷灰 */
  --mh-line-soft: #ECEEF3;        /* 轻分隔 */
  --mh-border: #D5DAE4;           /* 边框 · 中灰 */

  /* ---------- 功能色 ---------- */
  --mh-success: #22A06B;          /* 成功 · 松石绿 */
  --mh-warning: #E8A33D;          /* 警告 · 琥珀 */
  --mh-error: #E5484D;            /* 错误 · 红 */
  --mh-promo: #2456F0;            /* 促销价 · 电压钴蓝 */

  /* ---------- 阴影（午夜石墨 tint · 中性灰，不染色） ---------- */
  --mh-shadow-sm: 0 1px 3px rgba(16, 20, 31, 0.06);
  --mh-shadow-md: 0 4px 14px rgba(16, 20, 31, 0.08);
  --mh-shadow-lg: 0 10px 30px rgba(16, 20, 31, 0.12);
  --mh-shadow-hover: 0 12px 28px rgba(16, 20, 31, 0.14);
  /* 极客终端风浮层阴影（更硬朗的石墨投影，贴近编辑器/CLI 抽屉质感） */
  --mh-shadow-pop: 0 8px 24px rgba(16, 20, 31, 0.10), 0 1px 0 var(--mh-line-soft);

  /* ---------- 圆角（工业风收小一档） ---------- */
  --mh-radius-sm: 2px;
  --mh-radius: 4px;               /* 按钮/标签 */
  --mh-radius-md: 6px;            /* 输入框/小卡 */
  --mh-radius-lg: 8px;            /* 商品卡/大卡 */
  --mh-radius-pill: 999px;        /* 胶囊 */

  /* ---------- 版心 ---------- */
  --mh-container: 1200px;

  /* ---------- 渐变 ---------- */
  --mh-gradient-warm: linear-gradient(135deg, #2456F0 0%, #3E6BFF 100%);
  --mh-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #EEF0F4 100%);
  --mh-gradient-banner: linear-gradient(120deg, #1A43C4 0%, #2456F0 55%, #3E6BFF 100%);
  --mh-gradient-dark: linear-gradient(160deg, #10141F 0%, #1C2334 100%);

  /* ---------- 字体 ----------
     display：Chakra Petch（拉丁标题/编码，棱角分明的科技字面）
     mono：JetBrains Mono（价格/计数/丝印编码，等宽）
     body：Noto Sans SC（正文）
     Google Fonts 国内可能不可达，回退链兜底到系统中文字体。 */
  --mh-font-display: "Chakra Petch", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mh-font-body: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mh-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ---------- 动效 ---------- */
  --mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mh-dur: 0.3s;

  /* ---------- 极客终端风 Header 专属令牌（v8.0 双层重设计新增） ----------
     仅供 header.css 使用，不污染下游样式。全部基于已有色阶派生，
     未重定义品牌色/文字色/背景色等已有令牌。 */
  /* 终端风浅底层级：两层 header 都用浅底，但二阶有微妙区分 */
  --mh-term-bg: #FFFFFF;              /* 第1层功能带底 · 纯白 */
  --mh-term-bg-2: #F7F8FB;            /* 第2层分类带底 · 比页面底白一档 */
  /* 终端提示符 / 注释符（取自中性石墨色阶，非品牌色；强调色直接复用 --mh-primary） */
  --mh-term-prompt: #878D99;          /*  >_  // 等提示符 */
  --mh-term-comment: #C4C9D2;         /* 命令行注释前缀色 */
  /* Header 高度基线（双层紧凑，总高约 108px，比旧三层 138px 轻 30px） */
  --mh-term-row-1: 64px;              /* 第1层功能带高度 */
  --mh-term-row-2: 44px;              /* 第2层分类带高度 */
}

/* ============================================================
   主题色映射 · 让旧类名继承新令牌
   ============================================================ */
.font-theme { color: var(--mh-primary) !important; }
a:hover { color: var(--mh-primary-hover) !important; }
.link-hover:hover { color: var(--mh-primary-hover) !important; }

/* body 基础调色 */
body {
  background-color: var(--mh-bg-page);
  color: var(--mh-text-1);
  font-family: var(--mh-font-body);
}

/* 通用阴影类令牌化 */
.box-shadow {
  background: var(--mh-bg-card);
  box-shadow: var(--mh-shadow-md);
}
.box-shadow-light {
  background: var(--mh-bg-card);
  box-shadow: var(--mh-shadow-sm);
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}