/* ============================================================
   九南科技商城 · 全新界面设计令牌 v6.0（标签流 + 横向列表行）
   暖墨黑文字 · 暖白底 · 单一橄榄绿强调 · 极简当代（2026-08-08 重构）
   ============================================================ */
:root {
  /* ---------- 品牌强调色（单一橄榄绿，克制） ---------- */
  --mh-primary: #5B6B4A;          /* 强调 · 橄榄绿（按钮/链接/激活） */
  --mh-primary-hover: #6E8059;    /* hover · 浅橄榄 */
  --mh-primary-active: #48543C;   /* active · 深橄榄 */
  --mh-accent: #5B6B4A;           /* 点缀（与主色统一，极简只用一色） */
  --mh-accent-light: #EDEFE6;     /* 浅底 · 橄榄灰白 */

  /* ---------- 文字色阶（暖墨黑系，不用纯黑） ---------- */
  --mh-text-1: #1A1A1A;           /* 主文字 · 暖墨黑 */
  --mh-text-2: #595959;           /* 次级 · 中墨 */
  --mh-text-3: #8C8C8C;           /* 辅助 · 浅墨 */
  --mh-text-4: #BFBFBF;           /* 占位/禁用 */
  --mh-text-inverse: #FAFAF7;     /* 反白 · 暖白（深底用） */

  /* ---------- 背景色阶（暖白，不用纯白） ---------- */
  --mh-bg-page: #FAFAF7;          /* 页面底 · 暖白 */
  --mh-bg-card: #FFFFFF;          /* 卡片底 · 纯白（列表行 hover） */
  --mh-bg-soft: #F2F2EE;          /* 柔和底 · 暖灰白 */
  --mh-bg-section: #EAEAE4;       /* 区块底 */
  --mh-bg-dark: #1A1A1A;          /* 深色区 · 暖墨黑（页脚） */

  /* ---------- 分隔/边框（极细线，列表行核心） ---------- */
  --mh-line: #E8E8E3;             /* 分隔线 · 暖灰线（列表行间） */
  --mh-line-soft: #F0F0EB;        /* 轻分隔 */
  --mh-border: #D9D9D4;           /* 边框 */

  /* ---------- 功能色（低饱和，不抢戏） ---------- */
  --mh-success: #5B6B4A;          /* 成功 · 橄榄（与主色统一） */
  --mh-warning: #B8860B;          /* 警告 · 暗金 */
  --mh-error: #A63D2A;            /* 错误 · 砖红 */
  --mh-promo: #A63D2A;            /* 促销价 · 砖红（与主色橄榄形成对比） */

  /* ---------- 阴影（极弱，列表行靠分隔线不靠阴影） ---------- */
  --mh-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --mh-shadow-md: 0 2px 8px rgba(26, 26, 26, 0.06);
  --mh-shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08);
  --mh-shadow-hover: 0 4px 12px rgba(26, 26, 26, 0.07);

  /* ---------- 圆角（极简：近乎直角，仅微圆） ---------- */
  --mh-radius-sm: 3px;
  --mh-radius: 4px;
  --mh-radius-md: 6px;
  --mh-radius-lg: 8px;
  --mh-radius-pill: 999px;        /* 仅标签胶囊用 */

  /* ---------- 渐变（极少用） ---------- */
  --mh-gradient-warm: linear-gradient(135deg, #5B6B4A 0%, #6E8059 100%);
  --mh-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F2F2EE 100%);
  --mh-gradient-banner: linear-gradient(120deg, #2C3326 0%, #5B6B4A 100%);
  --mh-gradient-dark: linear-gradient(160deg, #1A1A1A 0%, #2C2C2C 100%);

  /* ---------- 字体（无衬线为主，杂志/产品风） ----------
     标题与正文统一用无衬线，靠字重/字号建立层级；
     展示字保留可选衬线作点缀（详情页大标题）。 */
  --mh-font-display: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --mh-font-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --mh-font-mono: "SF Mono", "JetBrains Mono", "Consolas", monospace;

  /* ---------- 动效（利落，200-250ms） ---------- */
  --mh-ease: cubic-bezier(0.2, 0, 0, 1);
  --mh-dur: 0.22s;

  /* ---------- 版心 ---------- */
  --mh-container: 1240px;
}

/* ============================================================
   主题色映射 · 让旧类名继承新令牌（过渡兼容）
   ============================================================ */
.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 {
  background-color: var(--mh-bg-page);
  color: var(--mh-text-1);
  font-family: var(--mh-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.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);
}