/* ============================================================
   南京琦特熙网络科技有限公司 · 零售电商设计系统令牌 v4.0
   陶土橙商城风（2026-08-07 全站改版：浅底 + 顶栏 + 橙色主导航
   + 左侧分类 mega + 楼层式商品推荐）
   ============================================================ */
:root {
  /* ---------- 品牌主色（陶土橙 · 商城活力） ---------- */
  --mh-primary: #C2551D;          /* 主品牌色 · 陶土橙（橙色主导航条/按钮/Tab） */
  --mh-primary-hover: #D97A3F;    /* hover · 浅陶土 */
  --mh-primary-active: #9E3F14;   /* active · 深陶土 */
  --mh-primary-light: #FBF2EA;    /* 主色浅底 · 陶土橙 5% */
  --mh-accent: #C9A876;           /* 点缀 · 燃茶金 */
  --mh-accent-light: #F6E7D8;     /* 浅底 · 陶土米 */

  /* ---------- 文字色阶（暖棕系） ---------- */
  --mh-text-1: #2A2119;           /* 主文字 · 深棕 */
  --mh-text-2: #5C5348;           /* 次级 · 中棕灰 */
  --mh-text-3: #9B9185;           /* 辅助 · 浅棕灰 */
  --mh-text-4: #CFC7BB;           /* 占位/禁用 · 更浅 */
  --mh-text-inverse: #FFFFFF;     /* 反白文字 */

  /* ---------- 背景色阶 ---------- */
  --mh-bg-page: #F5F2EC;          /* 页面底 · 浅米（商城略灰，衬托白色卡片） */
  --mh-bg-card: #FFFFFF;          /* 卡片底 · 纯白 */
  --mh-bg-soft: #F7F1E9;          /* 柔和底 · 米暖 */
  --mh-bg-section: #F0E6D8;       /* 区块底 · 深一档米暖 */
  --mh-bg-dark: #1B2430;          /* 深色区 · 深炭 */

  /* ---------- 商城风新增令牌 ---------- */
  --mh-topbar-bg: #FAF6F0;        /* 顶部工具条 · 浅米 */
  --mh-topbar-text: #8C8275;      /* 顶栏文字 · 暖灰 */
  --mh-topbar-line: #ECE3D4;      /* 顶栏下分隔线 */
  --mh-nav-bg: #C2551D;           /* 橙色主导航条 */
  --mh-nav-bg-hover: #D97A3F;     /* 导航 hover · 浅陶土 */
  --mh-nav-active: #9E3F14;       /* 导航选中 · 深陶土 */
  --mh-nav-text: #FFFFFF;         /* 导航文字 · 白 */
  --mh-catbar-bg: #C2551D;        /* 左侧「全部商品分类」块（与导航同色） */
  --mh-floor-tab-active: #C2551D; /* 楼层 Tab 激活色 */
  --mh-price: #C4421A;            /* 商品价 · 促销陶土红 */

  /* ---------- 分隔/边框 ---------- */
  --mh-line: #EDE5D8;             /* 分隔线 · 暖米 */
  --mh-line-soft: #F4EEE4;        /* 轻分隔 */
  --mh-border: #E2D8C8;           /* 边框 · 中暖 */

  /* ---------- 功能色 ---------- */
  --mh-success: #22C55E;          /* 成功 · 鲜绿 */
  --mh-warning: #F59E0B;          /* 警告 · 琥珀 */
  --mh-error: #EF4444;            /* 错误 · 红 */
  --mh-promo: #C4421A;            /* 促销价 · 陶土红（醒目）*/

  /* ---------- 阴影（陶土 tint） ---------- */
  --mh-shadow-sm: 0 2px 8px rgba(194, 85, 29, 0.06);
  --mh-shadow-md: 0 4px 16px rgba(194, 85, 29, 0.10);
  --mh-shadow-lg: 0 8px 30px rgba(194, 85, 29, 0.14);
  --mh-shadow-hover: 0 8px 24px rgba(194, 85, 29, 0.18);

  /* ---------- 圆角（商城风偏方正，整体下调一档） ---------- */
  --mh-radius-sm: 4px;
  --mh-radius: 6px;               /* 按钮/标签 */
  --mh-radius-md: 8px;            /* 输入框/小卡 */
  --mh-radius-lg: 10px;           /* 商品卡/大卡 */
  --mh-radius-pill: 999px;        /* 胶囊 */

  /* ---------- 版心 ---------- */
  --mh-container: 1200px;         /* 商城栅格容器宽度（原 1400 收窄，紧凑对齐截图） */

  /* ---------- 渐变 ---------- */
  --mh-gradient-warm: linear-gradient(135deg, #C2551D 0%, #D97A3F 100%);
  --mh-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F7F1E9 100%);
  --mh-gradient-banner: linear-gradient(120deg, #A34417 0%, #C2551D 55%, #D97A3F 100%);
  --mh-gradient-dark: linear-gradient(160deg, #1B2430 0%, #27303D 100%);

  /* ---------- 字体 ----------
     商城风：标题/正文统一无衬线（思源黑体加粗），更接近主流中式 B2C。
     Google Fonts 在国内可能不可达，回退链兜底到系统中文字体。 */
  --mh-font-display: "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-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mh-dur: 0.3s;
}

/* ============================================================
   主题色映射 · 让旧类名继承新令牌
   ============================================================ */
.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 基础调色（覆盖 theme.css 的白底） */
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);
}