/* =====================================================================
 * 丰宁夜市跑腿 —— 设计令牌
 *
 * 设计概念：「灯下烟火」
 * ---------------------------------------------------------------------
 * 夜市的核心视觉不是「橙色 App」，而是**灯光下的食物**。
 * 所以整套系统的三条原则：
 *
 *   1. 底色要暖，不要冷
 *      冷灰底（#F4F5F7）会让食物图发灰、显得不新鲜。
 *      改用暖白（#FBF7F3），食物看起来更有食欲。
 *
 *   2. 黑要用暖黑，不要冷黑
 *      冷黑（#1A1D1F）偏"科技感"，适合工具类产品。
 *      夜市要用暖棕黑（#221A15），像炭火和木桌。
 *
 *   3. 光晕是核心语言
 *      夜市的灵魂是「灯」。按钮、选中态、强调元素都要带暖色光晕，
 *      这是本设计系统与其他外卖 App 最大的区别。
 *
 * ---------------------------------------------------------------------
 * 单位换算（务必遵守）：
 *   小程序 rpx 与 WAP rem 对应 1rem = 100rpx
 *   base.css 设 html{font-size:calc(100vw/7.5)}，375px 视口下 1rem = 50px
 *   原型 px 值（按 375px 设计）换算 rem 只需 ×0.02
 *   例：12px → .24rem   14px → .28rem   104px → 2.08rem
 * ===================================================================== */

:root {
  /* ==================================================================
   * 品牌色：灯笼红 + 灯光黄
   * ================================================================== */
  --primary:        #FF4B1F;   /* 灯笼红：行动色，比原来更饱和 */
  --primary-dark:   #D93A12;
  --primary-light:  #FFF0EA;
  --primary-soft:   #FFDDD0;

  --amber:          #FFB627;   /* 灯光黄：氛围色 */
  --amber-dark:     #D98A00;
  --amber-light:    #FFF6E0;

  /* ==================================================================
   * 夜色：用于 hero、banner、深色区块
   * 暖棕黑而非冷黑 —— 像炭火与木桌，不是机箱
   * ================================================================== */
  --night-900: #16120F;
  --night-800: #221A15;
  --night-700: #35281F;
  --night-600: #4A382C;

  /* ==================================================================
   * 语义色（保持可识别性，但略微暖化）
   * ================================================================== */
  --success: #0FA968;
  --warning: #E88600;
  --danger:  #E5382A;
  --info:    #2B7FE0;

  /* ==================================================================
   * 文字层级：暖调中性色
   * 纯灰在暖底上会显脏，所以每个灰度都掺一点红黄
   * ================================================================== */
  --t1: #221A15;   /* 主标题 */
  --t2: #6B5D54;   /* 正文 */
  --t3: #A79890;   /* 辅助 */
  --t4: #CFC4BC;   /* 占位/禁用 */

  /* ==================================================================
   * 背景与分割：暖白底
   * ================================================================== */
  --bg:       #FBF7F3;   /* 暖白，替代冷灰 #FBF7F3 */
  --bg-deep:  #F5EEE7;   /* 次级底色（分组之间） */
  --card:     #FFFFFF;
  --line:     #F0E9E2;   /* 暖分割线 */
  --line-2:   #E5DAD1;   /* 重分割线 */

  /* ==================================================================
   * 标签底色
   * ================================================================== */
  --tag-gray-bg:  #F5EFE9;
  --tag-gray-tx:  var(--t2);
  --tag-amber-bg: #FFF6E0;
  --tag-amber-tx: #B57400;
  --tag-green-bg: #E6F7EF;
  --tag-green-tx: #0B8A55;
  --tag-blue-bg:  #EAF2FE;
  --tag-blue-tx:  #1A6BC4;
  --tag-red-bg:   #FFEDE9;
  --tag-red-tx:   #C42D1E;

  /* ==================================================================
   * 圆角：比原来稍大，食物图用大圆角更显柔和
   * ================================================================== */
  --r-s:    .08rem;   /*  4px */
  --r-m:    .16rem;   /*  8px */
  --r-l:    .24rem;   /* 12px */
  --r-xl:   .32rem;   /* 16px */
  --r-2xl:  .4rem;    /* 20px */
  --r-full: 9.99rem;

  /* ==================================================================
   * 间距（4px 基准栅格）
   * ================================================================== */
  --sp-xs:  .08rem;   /*  4px */
  --sp-s:   .12rem;   /*  6px */
  --sp-m:   .16rem;   /*  8px */
  --sp-l:   .24rem;   /* 12px */
  --sp-xl:  .4rem;    /* 20px */
  --sp-2xl: .56rem;   /* 28px */

  /* ==================================================================
   * 字号
   * ================================================================== */
  --fs-xs:  .2rem;    /* 10px */
  --fs-s:   .22rem;   /* 11px */
  --fs-m:   .24rem;   /* 12px */
  --fs-n:   .26rem;   /* 13px */
  --fs-l:   .28rem;   /* 14px */
  --fs-xl:  .3rem;    /* 15px */
  --fs-2xl: .32rem;   /* 16px */
  --fs-3xl: .34rem;   /* 17px */
  --fs-4xl: .4rem;    /* 20px */
  --fs-5xl: .48rem;   /* 24px */
  --fs-6xl: .56rem;   /* 28px */

  /* ==================================================================
   * 阴影：暖色投影，不要用纯黑
   * 纯黑投影在暖底上会发灰发脏
   * ================================================================== */
  --sh-card:   0 .02rem .12rem rgba(120, 60, 20, .05);
  --sh-raise:  0 .06rem .24rem rgba(120, 60, 20, .09);
  --sh-float:  0 .16rem .48rem rgba(120, 60, 20, .14);
  --sh-hero:   0 .08rem .28rem rgba(150, 40, 0, .16);

  /* ==================================================================
   * 光晕：本设计系统的灵魂
   * 夜市的视觉记忆点就是「灯」，所有强调元素都带暖光
   * ================================================================== */
  --glow-primary: 0 0 .32rem rgba(255, 75, 31, .38);
  --glow-amber:   0 0 .28rem rgba(255, 182, 39, .45);
  --glow-btn:     0 .06rem .2rem rgba(224, 51, 13, .32);

  /* ==================================================================
   * 渐变
   * ================================================================== */
  /* 头部：像灯笼打下来的暖光 */
  --grad-hero:    linear-gradient(168deg, #FF6B2C 0%, #FF4B1F 52%, #DD3208 100%);
  /* 夜色：暖棕黑，用于 banner 与深色区块 */
  --grad-night:   linear-gradient(158deg, #2E231B 0%, #1A140F 100%);
  /* 灯笼：径向渐变，模拟灯的光晕 */
  --grad-lantern: radial-gradient(circle at 32% 22%, #FFC85C 0%, #FF7A2F 46%, #DD3208 100%);
  /* 按钮 */
  --grad-btn:     linear-gradient(96deg, #FF7A3D 0%, #FF4B1F 100%);
  /* 商户头部（保留深色，但改暖） */
  --grad-mhead:   linear-gradient(152deg, #3E2E23 0%, #221A15 100%);

  /* ==================================================================
   * 固定高度
   * ================================================================== */
  --h-nav:     .88rem;   /* 44px 导航栏 */
  --h-tabbar:  1.16rem;  /* 58px 底部导航 */
  --h-btn:     .76rem;   /* 38px 主按钮 */
  --h-btn-sm:  .56rem;   /* 28px 小按钮 */
  --h-btn-xs:  .48rem;   /* 24px 超小按钮 */
}