/* ============================================================
   南京胡利胡图科技有限公司 · 零售电商设计系统令牌 v5.0「暖阳胡图」
   奶油纸面为底 · 墨咖骨架 · 活力橘点睛 · 软萌大圆角 · 圆点星空纹理
   与 v3（墨曜曦金·纯白细边框）、v4（曦海图志·深海青方角）、
   乐璟（靛紫大圆角）、九南（橄榄绿直角极简）刻意拉开全维度差异。
   品牌意象：hulihutu = 胡利胡图，吉祥物为暖橘色小狐狸，云通信 & 数字化服务商城。
   ============================================================ */
:root {
  /* ---------- 品牌主色：墨咖棕骨架 ---------- */
  --mh-primary: #38271B;          /* 墨咖 · 主操作色（按钮/导航/骨架） */
  --mh-primary-hover: #543D2B;    /* 焙茶棕 · hover 态 */
  --mh-primary-active: #271A10;   /* 深焙 · active 态 */
  --mh-accent: #FF7A1A;           /* 活力橘 · 价格/高亮/狐狸主色 */
  --mh-accent-deep: #E05E00;      /* 焦糖橘 · hover */
  --mh-accent-light: #FFF0E1;     /* 奶橘浅底 · 高亮底色 */

  /* ---------- 文字色阶（暖咖系，不用纯黑） ---------- */
  --mh-text-1: #2A2118;           /* 主文字 · 墨咖 */
  --mh-text-2: #6D5C4D;           /* 次级文字 · 中咖 */
  --mh-text-3: #A5947F;           /* 辅助文字 · 浅咖 */
  --mh-text-4: #D3C5B2;           /* 占位/禁用 */
  --mh-text-inverse: #FFF8EE;     /* 反白文字 · 奶油白 */

  /* ---------- 背景色阶（奶油纸面体系） ---------- */
  --mh-bg-page: #FAF3E7;          /* 页面底 · 奶油纸面 */
  --mh-bg-card: #FFFFFF;          /* 卡片底 · 纯白 */
  --mh-bg-soft: #F5EBDA;          /* 柔和底 · 浅奶油 */
  --mh-bg-section: #EFE2CB;       /* 区块底 · 深一档奶油 */
  --mh-bg-dark: #2C2014;          /* 深色区 · 墨咖 */

  /* ---------- 分隔/边框 ---------- */
  --mh-line: #EADFC9;             /* 分隔线 · 奶咖线 */
  --mh-line-soft: #F2E9D8;        /* 轻分隔 */
  --mh-border: #DCCEB4;           /* 边框 · 中咖 */

  /* ---------- 功能色 ---------- */
  --mh-success: #4C9E5C;          /* 成功 · 抹茶绿 */
  --mh-warning: #D99400;          /* 警告 · 蜂蜜 */
  --mh-error: #D64545;            /* 错误 */
  --mh-promo: #E8600A;            /* 促销价 */

  /* ---------- 阴影（暖咖调、柔而蓬松） ---------- */
  --mh-shadow-sm: 0 2px 8px rgba(56, 39, 27, 0.06);
  --mh-shadow-md: 0 6px 18px rgba(56, 39, 27, 0.09);
  --mh-shadow-lg: 0 14px 36px rgba(56, 39, 27, 0.14);
  --mh-shadow-hover: 0 14px 30px rgba(224, 94, 0, 0.18);

  /* ---------- 圆角（软萌大圆角） ---------- */
  --mh-radius-sm: 8px;
  --mh-radius: 12px;              /* 按钮/标签 */
  --mh-radius-md: 14px;           /* 输入框/小卡 */
  --mh-radius-lg: 18px;           /* 商品卡/大卡 */
  --mh-radius-xl: 26px;           /* Hero/横幅 */
  --mh-radius-pill: 999px;        /* 胶囊/圆形 */

  /* ---------- 渐变 ---------- */
  --mh-gradient-warm: linear-gradient(135deg, #FF9A3D 0%, #FF7A1A 55%, #F2640A 100%);
  --mh-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F5EBDA 100%);
  --mh-gradient-banner: linear-gradient(120deg, #2C2014 0%, #45311F 55%, #5A3F27 100%);
  --mh-gradient-signal: linear-gradient(135deg, #FFA24E 0%, #FF7A1A 55%, #E05E00 100%);

  /* ---------- 星点纹理（圆点星空，用于深色区块） ---------- */
  --mh-chart-grid: radial-gradient(rgba(255, 248, 238, 0.07) 1.4px, transparent 1.5px);
  --mh-chart-grid-size: 30px 30px;
  --mh-chart-grid-light: radial-gradient(rgba(56, 39, 27, 0.07) 1.4px, transparent 1.5px);
  --mh-chart-grid-light-size: 30px 30px;

  /* ---------- 字体（圆润展示体 + 中文黑体） ---------- */
  --mh-font-display: "Baloo 2", "Nunito", "Varela Round", "Comfortaa", "Noto 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.34, 1.2, 0.44, 1);
  --mh-dur: 0.3s;
}

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

/* 圆润展示体（Baloo 2）本地打包：缺失时静默回退到系统圆体/黑体 */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/font/Baloo2-Variable.woff2") format("woff2-variations"),
       url("../assets/font/Baloo2-Variable.woff2") format("woff2");
}