/* ============================================================
   Design Tokens · 闲工 UI 规范 v4.1（小程序端 HTML 原型映射）
   ------------------------------------------------------------
   小程序 rpx → 原型 px（375 设计稿 1:1，rpx ÷ 2）
   间距只允许 4 的倍数；颜色一律走变量，禁止裸值
   ============================================================ */
:root {
  /* ── 品牌色阶 ── */
  --brand-50:  #FFF4F0;
  --brand-100: #FFE4DA;
  --brand-200: #FFC7B3;
  --brand-300: #FFA184;
  --brand-400: #FB7B56;
  --brand-500: #F75D36;   /* 主色 */
  --brand-600: #DC4520;   /* hover / 按下 */
  --brand-700: #B53517;   /* 白底品牌文字 */
  --brand-800: #8E2A12;
  --brand-900: #6B1F0D;

  /* ── 中性色阶 ── */
  --n-0:   #FFFFFF;
  --n-50:  #FAFAFA;
  --n-100: #F5F5F5;
  --n-200: #EBEBEB;
  --n-300: #DEDEDE;
  --n-400: #B8B8B8;
  --n-500: #8A8A8A;
  --n-600: #6B6B6B;
  --n-700: #4A4A4A;
  --n-800: #2E2E2E;
  --n-900: #171717;

  /* ── 语义色 ── */
  --ok:      #147A4E;  --ok-bg:      #E9F6EF;
  --warn:    #9A5B00;  --warn-bg:    #FFF6E5;
  --danger:  #D92D20;  --danger-bg:  #FEF0EF;
  --info:    #1D6FD6;  --info-bg:    #EAF2FD;

  /* ── 语义映射 ── */
  --text-1:  var(--n-900);
  --text-2:  var(--n-600);
  --text-3:  var(--n-500);
  --text-4:  var(--n-400);
  --text-brand: var(--brand-700);
  --bg-page:    var(--n-50);
  --bg-surface: var(--n-0);
  --bg-subtle:  var(--n-100);
  --bg-brand:   var(--brand-50);
  --line:       var(--n-200);
  --line-strong: var(--n-300);

  /* ── 字号 / 行高（小程序档，成对使用）── */
  --fs-h1: 24px; --lh-h1: 32px;   /* 页面标题 48/64rpx */
  --fs-h2: 20px; --lh-h2: 28px;   /* 区块标题 40/56rpx */
  --fs-h3: 16px; --lh-h3: 24px;   /* 卡片标题 32/48rpx */
  --fs-body: 15px; --lh-body: 24px;  /* 正文 30/48rpx */
  --fs-caption: 12px; --lh-caption: 18px; /* 辅助 24/36rpx */

  /* ── 间距（仅 4 倍数）── */
  --sp-1: 4px;
  --sp-2: 8px;    /* 图标 × 文字 */
  --sp-3: 12px;
  --sp-4: 16px;   /* 页面内边距 --pad-page */
  --sp-5: 20px;   /* 卡片内边距 --pad-card */
  --sp-6: 24px;   /* 不同区块 */
  --sp-8: 32px;   /* 换组 */
  --sp-10: 40px;  /* 页面大区块 */
  --sp-12: 48px;  /* 空状态上下 */
  --pad-page: 16px;
  --pad-card: 20px;

  /* ── 圆角（容器同页 ≤2 种 + 按钮一律胶囊）── */
  --r-xs: 4px;    /* 标签 / 徽章 */
  --r-sm: 8px;    /* 输入框 / 下拉 */
  --r-md: 12px;   /* 卡片 / 面板 */
  --r-lg: 16px;   /* 弹窗 / 抽屉 */
  --r-full: 999px;

  /* ── 控件高度 ── */
  --h-control: 44px;
  --h-control-sm: 36px;

  /* ── 阴影（静态卡片 0；仅浮层使用）── */
  --sh-0: none;
  --sh-2: 0 4px 12px -2px rgba(10, 10, 10, .08), 0 2px 4px -2px rgba(10, 10, 10, .06);
  --sh-3: 0 12px 32px -4px rgba(10, 10, 10, .12), 0 4px 8px -4px rgba(10, 10, 10, .08);
  --sh-focus: 0 0 0 3px rgba(247, 93, 54, .24);

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;
  --tabbar-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}