/* ============================================================
 *  V8.5 弘度生活 — 盒马清新型视觉设计系统
 *  风格：天空蓝渐变 · 明亮清爽 · 真实摄影感
 *  兼容：在 V8.0 variables.css 基础上增量扩展（v85- 前缀）
 * ============================================================ */

/* V8.5 依赖 V8.0 基础设计 Token（页面内联 CSS 变量层叠兼容） */
@import url('variables.css');

:root {
  /* ====== V8.5 色彩系统（盒马清新方向） ====== */
  
  /*
   * 主色冲突说明（P0-V-007）：
   * V8.0 主色 --color-primary: #1A56DB（政务商务蓝）
   * V8.5 主色 --v85-primary: #0891B2（盒马清新青）
   * 两者为不同设计系统的主题色，故意不同，非错误。
   * 页面应只使用其中一套系统，禁止混用。
   */

  /* 主色 — 清新青（替代原 #1A56DB 深蓝） */
  --v85-primary: #0891B2;
  --v85-primary-rgb: 8, 145, 178;
  --v85-primary-dark: #0E7490;
  --v85-primary-light: #CFFAFE;
  --v85-primary-50: #ECFEFF;
  --v85-primary-100: #CFFAFE;
  --v85-primary-200: #A5F3FC;
  --v85-primary-400: #22D3EE;
  --v85-primary-500: #06B6D4;
  --v85-primary-600: #0891B2;
  --v85-primary-700: #0E7490;
  --v85-primary-800: #155E75;
  --v85-primary-900: #164E63;

  /* CTA 暖橙（购买/行动按钮） */
  --v85-cta: #F97316;
  --v85-cta-rgb: 249, 115, 22;
  --v85-cta-dark: #EA580C;
  --v85-cta-light: #FFF7ED;

  /* 正向行动绿 */
  --v85-success: #22C55E;
  --v85-success-rgb: 34, 197, 94;
  --v85-success-light: #F0FDF4;

  /* 公益暖红 */
  --v85-charity: #DC2626;
  --v85-charity-rgb: 220, 38, 38;
  --v85-charity-dark: #B91C1C;
  --v85-charity-light: #FEF2F2;

  /* 背景系统 */
  --v85-bg-page: #F8FAFB;
  --v85-bg-card: #FFFFFF;
  --v85-bg-sky-top: #E0F2FE;     /* 天空蓝顶部 */
  --v85-bg-sky-mid: #F0F9FF;     /* 天空蓝中部 */
  --v85-bg-warm: #FFFBEB;        /* 暖色背景 */

  /* 文字色阶 */
  --v85-text-primary: #1E293B;    /* slate-900 主文字 */
  --v85-text-secondary: #64748B;   /* slate-500 次要文字 */
  --v85-text-tertiary: #94A3B8;    /* slate-400 辅助文字 */
  --v85-text-placeholder: #CBD5E1;  /* slate-300 占位符 */
  --v85-text-price: #DC2626;       /* 价格红 */
  --v85-text-on-primary: #FFFFFF;  /* 深色背景上的白字 */

  /* ====== 圆角升级（现代圆润感） ====== */
  --v85-radius-xs: 0.375rem;       /* 6px - 小元素 badge/tag */
  --v85-radius-sm: 0.5rem;         /* 8px - 按钮/输入框 */
  --v85-radius-md: 0.75rem;        /* 12px - 卡片标准 */
  --v85-radius-lg: 1rem;           /* 16px - 大卡片/Modal */
  --v85-radius-xl: 1.25rem;        /* 20px - 特大卡片 */
  --v85-radius-pill: 9999px;       /* 胶囊形 */
  --v85-radius-full: 50%;          /* 圆形头像/图标容器 */

  /* ====== 柔和弥散阴影（青色调） ====== */
  --v85-shadow-xs: 0 1px 2px rgba(8, 145, 178, 0.04);
  --v85-shadow-sm: 0 1px 3px rgba(8, 145, 178, 0.06), 0 1px 2px rgba(8, 145, 178, 0.04);
  --v85-shadow-md: 0 4px 12px rgba(8, 145, 178, 0.08), 0 1px 3px rgba(8, 145, 178, 0.04);
  --v85-shadow-lg: 0 8px 24px rgba(8, 145, 178, 0.12), 0 2px 6px rgba(8, 145, 178, 0.06);
  --v85-shadow-xl: 0 16px 48px rgba(8, 145, 178, 0.16), 0 4px 12px rgba(8, 145, 178, 0.08);
  --v85-shadow-float: 0 20px 60px rgba(8, 145, 178, 0.18), 0 8px 20px rgba(8, 145, 178, 0.10);

  /* CTA 橙色按钮阴影 */
  --v85-shadow-cta: 0 4px 14px rgba(249, 115, 22, 0.35), 0 2px 4px rgba(249, 115, 22, 0.15);
  /* 公益红色按钮阴影 */
  --v85-shadow-charity: 0 4px 14px rgba(220, 38, 38, 0.30), 0 2px 4px rgba(220, 38, 38, 0.12);

  /* ====== 渐变库（V8.5 新增） ====== */
  /* 首页 Header — 天空蓝渐变（带云朵通透感） */
  --v85-gradient-header: linear-gradient(
    180deg,
    var(--v85-bg-sky-top) 0%,
    var(--v85-primary-200) 30%,
    var(--v85-bg-sky-mid) 70%,
    var(--v85-bg-page) 100%
  );

  /* 公益页 Banner — 暖红渐变 */
  --v85-gradient-charity-banner: linear-gradient(
    135deg,
    var(--v85-charity) 0%,
    #EF4444 50%,
    #FCA5A5 100%
  );

  /* 我的页 Header — 天空蓝渐变 */
  --v85-gradient-my-header: linear-gradient(
    180deg,
    var(--v85-primary-200) 0%,
    var(--v85-bg-sky-mid) 40%,
    var(--v85-bg-page) 100%
  );

  /* CTA 按钮渐变 — 暖橙 */
  --v85-gradient-cta: linear-gradient(135deg, #FB923C 0%, var(--v85-cta) 100%);

  /* 正向行动渐变 — 绿色 */
  --v85-gradient-success: linear-gradient(135deg, #4ADE80 0%, var(--v85-success) 100%);

  /* 金色会员渐变 */
  --v85-gradient-gold: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%);

  /* 云朵装饰渐变（用于 header 装饰） */
  --v85-cloud-shape: radial-gradient(
    ellipse 120px 60px at 20% 30%,
    rgba(255, 255, 255, 0.7) 0%,
    transparent 70%
  ),
  radial-gradient(
    ellipse 80px 40px at 75% 45%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 150px 70px at 50% 65%,
      rgba(255, 255, 255, 0.35) 0%,
      transparent 70%
    );

  /* ====== 排版系统（响应式 clamp） ====== */
  --v85-font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v85-font-heading: 'Rubik', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --v85-text-xs: clamp(0.6875rem, 1.5vw, 0.75rem);    /* 11-12px */
  --v85-text-sm: clamp(0.75rem, 1.6vw, 0.875rem);    /* 12-14px */
  --v85-text-base: clamp(0.875rem, 1.8vw, 1rem);     /* 14-16px */
  --v85-text-lg: clamp(1rem, 2vw, 1.125rem);          /* 16-18px */
  --v85-text-xl: clamp(1.125rem, 2.5vw, 1.375rem);    /* 18-22px */
  --v85-text-2xl: clamp(1.25rem, 3vw, 1.75rem);       /* 20-28px */
  --v85-text-hero: clamp(1.5rem, 4vw, 2.25rem);       /* 24-36px */

  --v85-price: clamp(1.125rem, 2.5vw, 1.375rem);      /* 18-22px bold */
  --v85-price-large: clamp(1.5rem, 3.5vw, 2rem);       /* 24-32px bold */

  --v85-line-height-tight: 1.25;
  --v85-line-height-normal: 1.55;
  --v85-line-height-relaxed: 1.75;

  /* 字重 */
  --v85-weight-normal: 400;
  --v85-weight-medium: 500;
  --v85-weight-semibold: 600;
  --v85-weight-bold: 700;

  /* ====== 动效系统 ====== */
  --v85-duration-fast: 150ms;
  --v85-duration-normal: 250ms;
  --v85-duration-slow: 350ms;
  --v85-duration-slower: 500ms;

  --v85-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --v85-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --v85-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --v85-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v85-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --v85-transition-base: all var(--v85-duration-normal) var(--v85-ease-default);
  --v85-transition-fast: all var(--v85-duration-fast) var(--v85-ease-default);
  --v85-transition-colors: color var(--v85-duration-fast) var(--v85-ease-default),
                       background-color var(--v85-duration-fast) var(--v85-ease-default),
                       border-color var(--v85-duration-fast) var(--v85-ease-default);

  /* ====== Z-Index 层级系统（V8.5 扩展） ====== */
  --v85-z-base: 0;
  --v85-z-card: 10;
  --v85-z-sticky: 100;
  --v85-z-nav: 200;
  --v85-z-overlay: 300;
  --v85-z-modal: 400;
  --v85-z-toast: 500;
  --v85-z-float-btn: 600;
  --v85-z-drawer: 350;
  --v85-z-popover: 320;
  --v85-z-tooltip: 310;
  --v85-z-filter-bar: 95;

  /* ====== 安全区域 ====== */
  --v85-safe-top: env(safe-area-inset-top, 0px);
  --v85-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v85-safe-left: env(safe-area-inset-left, 0px);
  --v85-safe-right: env(safe-area-inset-right, 0px);
  --v85-nav-height: 3.5rem;
  --v85-page-bottom: calc(var(--v85-safe-bottom) + var(--v85-nav-height));

  /* ====== 间距系统（rem 单位） ====== */
  --v85-space-xs: 0.25rem;   /* 4px */
  --v85-space-sm: 0.5rem;    /* 8px */
  --v85-space-md: 0.75rem;   /* 12px */
  --v85-space-lg: 1rem;      /* 16px */
  --v85-space-xl: 1.5rem;    /* 24px */
  --v85-space-2xl: 2rem;     /* 32px */
  --v85-space-3xl: 3rem;     /* 48px */

  /* ====== 金刚区图标色阶（V8.5 鲜活版） ====== */
  /* 生鲜食材 */
  --v85-kk-fresh: #E11D48;           --v85-kk-fresh-bg: #FFE4E8;
  /* 日用百货 */
  --v85-kk-daily: #7C3AED;           --v85-kk-daily-bg: #EDE9FE;
  /* 粮油米面 */
  --v85-kk-grain: #D97706;           --v85-kk-grain-bg: #FFFBEB;
  /* 方便速食 */
  --v85-kk-snack: #EA580C;           --v85-kk-snack-bg: #FFF7ED;
  /* 宠物用品 */
  --v85-kk-pet: #DB2777;             --v85-kk-pet-bg: #FDF2F8;
  /* 潮玩手办 */
  --v85-kk-toy: #9333EA;            --v85-kk-toy-bg: #FAF5FF;
  /* 鲜花园艺 */
  --v85-kk-garden: #059669;          --v85-kk-garden-bg: #ECFDF5;
  /* 自有品牌 */
  --v85-kk-brand: #2563EB;           --v85-kk-brand-bg: #EFF6FF;
  /* 时令鲜品 */
  --v85-kk-seasonal: #16A34A;        --v85-kk-seasonal-bg: #F0FDF4;
  /* 地方特产 */
  --v85-kk-local: #B45309;           --v85-kk-local-bg: #FFFbeb;
  /* 零食酒水 */
  --v85-kk-snack-drink: #E11D48;     --v85-kk-snack-drink-bg: #FFF1F2;
  /* 家清个护 */
  --v85-kk-household: #0369A1;       --v85-kk-household-bg: #E0F2FE;
  /* 营养食谱 */
  --v85-kk-nutrition: #0891B2;       --v85-kk-nutrition-bg: #ECFEFF;
  /* 儿童营养 */
  --v85-kk-child-nutri: #0D9488;     --v85-kk-child-nutri-bg: #F0FDFA;
  /* 糖友专区 */
  --v85-kk-diabetes: #BE185D;        --v85-kk-diabetes-bg: #FDF2F8;
  /* 胃养护 */
  --v85-kk-stomach: #65A30D;         --v85-kk-stomach-bg: #F7FEE7;
  /* 孕产专区 */
  --v85-kk-pregnant: #C2410C;        --v85-kk-pregnant-bg: #FFF7ED;
  /* 肌力提升 */
  --v85-kk-muscle: #1D4ED8;          --v85-kk-muscle-bg: #EFF6FF;
  /* 乡村认养 */
  --v85-kk-adoption: #15803D;        --v85-kk-adoption-bg: #F0FDF4;
  /* 公益关注 */
  --v85-kk-charity: #DC2626;         --v85-kk-charity-bg: #FEF2F2;
  /* 邻里互助 */
  --v85-kk-help: #7C3AED;            --v85-kk-help-bg: #F5F3FF;
  /* 社区团购 */
  --v85-kk-group-buy: #059669;       --v85-kk-group-buy-bg: #ECFDF5;
  /* 非遗传承 */
  --v85-kk-heritage: #B45309;        --v85-kk-heritage-bg: #FFFBEB;
  /* 兑换商城/抢 */
  --v85-kk-exchange: #E11D48;         --v85-kk-exchange-bg: #FFF1F2;
  /* 公益盲盒 */
  --v85-kk-blindbox: #9333EA;        --v85-kk-blindbox-bg: #FAF5FF;
  /* AI短视频 */
  --v85-kk-aivideo: #2563EB;         --v85-kk-aivideo-bg: #EFF6FF;
  /* 就业服务 */
  --v85-kk-job: #D97706;             --v85-kk-job-bg: #FFFBEB;
  /* 技能实训 */
  --v85-kk-train: #0891B2;           --v85-kk-train-bg: #ECFEFF;
  /* 环保回收 */
  --v85-kk-recycle: #16A34A;         --v85-kk-recycle-bg: #F0FDF4;
  /* 招商加盟 */
  --v85-kk-franchise: #7C3AED;       --v85-kk-franchise-bg: #F5F3FF;
  /* 弘度小镇 */
  --v85-kk-town: #0369A1;            --v85-kk-town-bg: #E0F2FE;
  /* 掌柜 */
  --v85-kk-zhanggui: #1E40AF;        --v85-kk-zhanggui-bg: #DBEAFE;
}

/* ====== 全局工具类 ====== */

/* 页面主题类 */
.v85-theme {
  font-family: var(--v85-font-family);
  color: var(--v85-text-primary);
  background-color: var(--v85-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* 卡片基础样式 */
.v85-card {
  background: var(--v85-bg-card);
  border-radius: var(--v85-radius-md);
  box-shadow: var(--v85-shadow-sm);
  transition: var(--v85-transition-base);
}
.v85-card:hover {
  box-shadow: var(--v85-shadow-md);
  transform: translateY(-0.125rem);
}
.v85-card:active {
  transform: translateY(0);
  box-shadow: var(--v85-shadow-xs);
}

/* 按钮基础 */
.v85-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v85-space-sm);
  padding: 0.625rem 1.25rem;
  border-radius: var(--v85-radius-sm);
  font-family: var(--v85-font-family);
  font-size: var(--v85-text-sm);
  font-weight: var(--v85-weight-semibold);
  cursor: pointer;
  border: none;
  transition: var(--v85-transition-base);
  -webkit-tap-highlight-color: transparent;
  min-height: 2.75rem;  /* 44px touch target */
  min-width: 2.75rem;
}
.v85-btn-primary {
  background: var(--v85-gradient-cta);
  color: var(--v85-text-on-primary, #FFFFFF);
  box-shadow: var(--v85-shadow-cta);
}
.v85-btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: var(--v85-shadow-cta), 0 0 0 4px rgba(249, 115, 22, 0.12);
}
.v85-btn-primary:active {
  filter: brightness(0.96);
  transform: scale(0.98);
}
.v85-btn-charity {
  background: var(--v85-gradient-charity-banner);
  color: var(--v85-text-on-primary, #FFFFFF);
  box-shadow: var(--v85-shadow-charity);
}
.v85-btn-outline {
  background: transparent;
  border: 1.5px solid var(--v85-border-color, var(--border-line));
  color: var(--v85-text-secondary);
}
.v85-btn-outline:hover {
  border-color: var(--v85-primary);
  color: var(--v85-primary);
  background: var(--v85-primary-50);
}
.v85-btn-pill {
  border-radius: var(--v85-radius-pill);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* 图片占位（开发期可见） */
.v85-img-placeholder {
  background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v85-text-tertiary);
  font-size: var(--v85-text-xs);
  border-radius: var(--v85-radius-md);
  min-height: 6rem;
}

/* 响应式隐藏 */
@media (max-width: 374px) { .v85-hide-xs { display: none !important; } }
@media (max-width: 479px) { .v85-hide-sm { display: none !important; } }
@media (min-width: 769px) { .v85-show-md { display: block !important; } }
@media (min-width: 1025px) { .v85-show-lg { display: block !important; } }

/* ====== 动画关键帧 ====== */
@keyframes v85-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v85-slideUp {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v85-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes v85-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes v85-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 骨架屏 loading */
.v85-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 37%,
    #f0f0f0 63%
  );
  background-size: 200% 100%;
  animation: v85-shimmer 1.5s ease infinite;
  border-radius: var(--v85-radius-sm);
}

/* 可点击元素统一 */
[onclick], [data-href], a, button, .clickable, label[for] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}