/**
 * 设计 token —— 与小程序/App 端（mib_app/src/uni.scss）同源。
 *
 * 换算规则：uni-app 的 rpx 以 750 为设计宽度基准，375pt 手机上 1rpx = 0.5px，
 * 所以这里的 px 一律是对应 rpx 的一半。改主题时两边必须一起改，
 * 颜色值差一位就是两个产品。
 *
 * 配色是「柔雾紫 + 医美质感的香槟金」，底色压成暖灰避免纯白刺眼。
 * 紫色浅，白字压不住，所以主色拆两档，这条规矩两端都要守：
 *   --mb-brand      有底色的地方（按钮、选中块、金刚位描边）
 *   --mb-brand-ink  直接落在白底/浅底上的小字与图标
 * #9b7edb 对白底只有 3.3:1，11px 的标签字用它实际是看不清的。
 */
:root {
  --mb-brand:       #9b7edb;
  --mb-brand-ink:   #6e4eb8;
  --mb-brand-dark:  #5b3ea3;   /* 按钮 hover：比 brand 深两档，仍是同一支紫 */
  --mb-brand-soft:  #f1ecfb;
  /* 首屏顶部那层淡紫，往 --mb-bg 收，别再压一块深色 */
  --mb-brand-wash:  #ece4fa;
  --mb-accent:      #c0813e;
  --mb-accent-soft: #fbf2e6;

  /* 中性色：底色压成暖灰，避免纯白刺眼 */
  --mb-bg:     #f6f6f4;
  --mb-card:   #ffffff;
  --mb-text:   #1b1b1b;
  --mb-sub:    #5c5c58;
  --mb-muted:  #93938d;
  --mb-line:   #ecece8;
  --mb-danger: #c0392b;
  /* 中性块（未选中的胶囊、占位图）。深浅要跟 --mb-brand-soft 拉得开 */
  --mb-fill:   #f2f2ee;

  /* 字号 8 级（rpx 20/22/24/26/28/32/38/46） */
  --mb-font-xs:   10px;
  --mb-font-sm:   11px;
  --mb-font-md:   12px;
  --mb-font-base: 13px;
  --mb-font-lg:   14px;
  --mb-font-xl:   16px;
  --mb-font-2xl:  19px;
  --mb-font-3xl:  23px;

  /* 圆角 5 级（rpx 8/16/24/28/999）。卡片单列一档：小程序的卡片是 28rpx，
     比通用的 24rpx 再圆一点，这是卡片和普通容器的区别，别合并 */
  --mb-radius-sm:   4px;
  --mb-radius-md:   8px;
  --mb-radius-lg:   12px;
  --mb-radius-card: 14px;
  --mb-radius-pill: 999px;

  /* 间距 */
  --mb-gap-xs: 4px;
  --mb-gap-sm: 8px;
  --mb-gap:    12px;
  --mb-gap-lg: 16px;
  --mb-gap-xl: 24px;

  /**
   * 卡片阴影。纯圆角无阴影时卡片和 --mb-bg 的明度差只有一点点，
   * 滚动起来分不清一张卡在哪结束。小程序是 0 6rpx 24rpx，折半即此。
   */
  --mb-shadow:    0 3px 12px rgba(27, 27, 27, .05);
  --mb-shadow-up: 0 4px 18px rgba(27, 27, 27, .09);

  --mb-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
                    'Helvetica Neue', Arial, sans-serif;

  --mb-content-max: 1120px;
}

/**
 * 项目大类的底色。与 mib_app/src/utils/category.ts 的 TINTS 一一对应，
 * 墨色与 scripts/build-category-icons.mjs 的 INK 对应（图标那边写在 PHP 的
 * App\Web\Category 里）。只当背景用，对比度靠图标自己的墨色。
 * 十个格子共用一块淡紫的话，两行下来是一片同色方块，眼睛落不到任何一个上。
 */
:root {
  --mb-cat-device:       #efe9fd;
  --mb-cat-injection:    #e6f0fe;
  --mb-cat-toxin_filler: #fde9ee;
  --mb-cat-laser:        #e9f1fd;
  --mb-cat-booster:      #e2f5f1;
  --mb-cat-skincare:     #fdeee0;
  --mb-cat-pigment:      #fce9f3;
  --mb-cat-thread:       #ece9fb;
  --mb-cat-pore_scar:    #e8f5e6;
  --mb-cat-body:         #fdf0e2;
  --mb-cat-hair_remove:  #f2f1e7;
  --mb-cat-eye_surgery:       #ececfc;
  --mb-cat-nose_surgery:      #e4f3f4;
  --mb-cat-facial_contouring: #f3eafb;
  --mb-cat-breast_surgery:    #fbe9ef;
  --mb-cat-body_contouring:   #faeee3;
  --mb-cat-other:        #f1f1ec;
}

/* 桌面端正文比手机大一档：手机上 13px 合适，桌面上偏小 */
@media (min-width: 768px) {
  :root {
    --mb-font-base: 15px;
    --mb-font-lg:   16px;
    --mb-font-xl:   19px;
    --mb-font-2xl:  26px;
    --mb-font-3xl:  36px;
    --mb-font-md:   13px;
    --mb-font-sm:   12px;
  }
}