/*!
 * 微寻宠 Design System · Semantic Tokens
 * ────────────────────────────────────────────────────────────────────
 * 项目级语义 token 层，作为 UI 与 primitive token 之间的稳定接口。
 *
 * 分层原则
 *   primitive (tokens.css)  — WeUI 官方原子值：--weui-BRAND / --weui-FG-0 / ...
 *   semantic  (本文件)      — 项目语义：--ds-color-primary / --ds-text-primary / ...
 *   utility   (common.css)  — 仓内工具 token：--wxc-shadow-* / --wxc-radius-* / ...
 *   component (components/) — 跨页复用组件样式
 *   page      (pages/*.css) — 页面专属样式，通过 $extraCss 按需加载
 *
 * 使用原则
 *   1. 新页面 / 新组件写 CSS 时，优先用 --ds-* 语义 token
 *   2. 只在需要明确"使用 WeUI 原子值"时才直接引用 --weui-*
 *   3. 硬编码色值 / 字号 / 圆角禁止（lint-level 要求）
 *   4. 主题切换 / 品牌换肤只需要改本文件（而非 80 处页面 CSS）
 *
 * 建立日期: 2026-04-24
 */

:root {
  /* ═══════════ Color · 语义色彩 ═══════════ */

  /* 品牌色（单一主色锚点，全站 CTA / 强调） */
  --ds-color-primary:         var(--weui-BRAND);          /* #07C160 */
  --ds-color-primary-hover:   var(--weui-BRAND-90);       /* #06ae56 */
  --ds-color-primary-active:  var(--weui-BRAND-80);       /* #059a4c */
  --ds-color-primary-soft:    var(--weui-BRAND-LIGHT);    /* #E0F5E9 */
  --ds-color-primary-rgb:     var(--weui-BRAND-RGB);      /* 7,193,96 */

  /* 语义色彩（业务语义：成功 / 警示 / 错误 / 信息） */
  --ds-color-success:         var(--weui-BRAND);          /* 与 primary 同源 */
  --ds-color-warning:         var(--weui-ORANGE);         /* #FA9D3B */
  --ds-color-warning-rgb:     250, 157, 59;               /* for rgba(var(...), alpha) 组合 */
  --ds-color-danger:          var(--weui-RED);            /* #FA5151 */
  --ds-color-danger-rgb:      250, 81, 81;                /* for rgba(var(...), alpha) 组合 */
  --ds-color-info:            var(--weui-BLUE);           /* #10AEFF */
  --ds-color-highlight:       var(--weui-YELLOW);         /* #FFC300 */

  /* 业务特有 */
  --ds-color-price:           var(--weui-ORANGE);         /* 价格强调 */
  --ds-color-price-glow:      rgba(250, 157, 59, 0.3);    /* 价格光晕（--ds-color-price with alpha） */
  --ds-color-link:            var(--weui-LINK);           /* #576B95 微信社交链接色 */
  --ds-color-alipay:          #1677FF;                    /* 支付宝品牌锚点 */
  --ds-color-alipay-dark:     #0958D9;                    /* 支付宝品牌深色（渐变锚点） */

  /* 品牌渐变（语义 gradient，复用 primary / alipay 色系） */
  --ds-gradient-brand:        linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-primary-hover) 100%);
  --ds-gradient-warm:         linear-gradient(145deg, var(--ds-color-primary-soft) 0%, var(--ds-color-primary) 100%);
  --ds-gradient-alipay:       linear-gradient(135deg, var(--ds-color-alipay) 0%, var(--ds-color-alipay-dark) 100%);

  /* ═══════════ Text · 文本色 ═══════════ */
  --ds-text-primary:          var(--weui-FG-0);           /* rgba(0,0,0,0.9) 主要文本 */
  --ds-text-secondary:        var(--weui-FG-1);           /* rgba(0,0,0,0.55) 次要文本 */
  --ds-text-tertiary:         var(--weui-FG-2);           /* rgba(0,0,0,0.3)  辅助 / 占位 */
  --ds-text-disabled:         var(--weui-FG-3);           /* rgba(0,0,0,0.1)  禁用态 */
  --ds-text-inverse:          var(--weui-WHITE);          /* 深色背景上的反色文本 */
  --ds-text-link:             var(--weui-LINK);
  --ds-text-on-primary:       var(--weui-WHITE);          /* primary 背景上的文字 */

  /* ═══════════ Background · 背景色 ═══════════ */
  --ds-bg-page:               var(--weui-BG-0);           /* #EDEDED 页面底色 */
  --ds-bg-surface:            var(--weui-BG-2);           /* #FFFFFF 卡片 / 表单底 */
  --ds-bg-subtle:             var(--weui-BG-1);           /* #F7F7F7 二级区分背景 */
  --ds-bg-muted:              var(--weui-BG-3);           /* #F2F2F2 弱化区块 */
  --ds-bg-active:             var(--weui-BG-COLOR-ACTIVE);/* #ECECEC 按压态 */
  --ds-bg-overlay:            rgba(0, 0, 0, 0.5);         /* 遮罩层 */

  /* ═══════════ Border · 边框 / 分隔 ═══════════ */
  --ds-border-subtle:         var(--weui-FG-5);           /* rgba(0,0,0,0.05) */
  --ds-border-default:        var(--weui-FG-3);           /* rgba(0,0,0,0.1) */
  --ds-border-strong:         var(--weui-FG-4);           /* rgba(0,0,0,0.15) */
  --ds-border-separator:      var(--weui-SEPARATOR-1);    /* rgba(0,0,0,0.15) */

  /* ═══════════ Typography · 字体 ═══════════ */
  --ds-font-body:             var(--weui-font-default);
  --ds-font-display:          "PingFang SC", "SF Pro Display", system-ui, sans-serif;
  --ds-font-mono:             "SF Mono", "Menlo", "Consolas", monospace;

  --ds-text-xxs:              11px;                            /* 11 微小标签 / eyebrow / badge */
  --ds-text-xs:               var(--weui-font-size-mini);      /* 12 */
  --ds-text-sm:               var(--weui-font-size-small);     /* 13 */
  --ds-text-base:             var(--weui-font-size-caption);   /* 14 */
  --ds-text-md:               var(--weui-font-size-subhead);   /* 15 */
  --ds-text-lg:               var(--weui-font-size-body-small);/* 16 */
  --ds-text-body:             var(--weui-font-size-body);      /* 17 */
  --ds-text-h3:               var(--weui-font-size-h3);        /* 18 */
  --ds-text-h2:               var(--weui-font-size-h2);        /* 20 */
  --ds-text-h1:               var(--weui-font-size-h1);        /* 22 */
  --ds-text-display:          var(--weui-font-size-display);   /* 24 */
  --ds-text-display-hero:     32px;                            /* 32 hero 大标题（success / 5 页 hero） */
  --ds-text-display-mega:     40px;                            /* 40 success Moment of Delight 主标题 */

  --ds-weight-regular:        var(--weui-font-weight-regular); /* 400 */
  --ds-weight-medium:         var(--weui-font-weight-medium);  /* 500 */
  --ds-weight-semibold:       var(--weui-font-weight-semibold);/* 600 */
  --ds-weight-bold:           var(--weui-font-weight-bold);    /* 700 */

  --ds-leading-tight:         var(--weui-line-height-tight);   /* 1.2 */
  --ds-leading-normal:        var(--weui-line-height-normal);  /* 1.4 */
  --ds-leading-relaxed:       var(--weui-line-height-relaxed); /* 1.6 */

  --ds-tracking-tight:        -0.02em;
  --ds-tracking-normal:       0;
  --ds-tracking-wide:         0.02em;

  /* ═══════════ Spacing · 间距 ═══════════ */
  --ds-space-0:               0;
  --ds-space-1:               var(--weui-spacing-xxs);    /* 4  */
  --ds-space-2:               var(--weui-spacing-xs);     /* 8  */
  --ds-space-3:               var(--weui-spacing-sm);     /* 12 */
  --ds-space-4:               var(--weui-spacing-md);     /* 16 */
  --ds-space-5:               var(--weui-spacing-lg);     /* 24 */
  --ds-space-6:               var(--weui-spacing-xl);     /* 32 */
  --ds-space-8:               var(--weui-spacing-xxl);    /* 48 */
  --ds-space-page:            var(--weui-spacing-page);   /* 16 页面外边距 */

  /* ═══════════ Radius · 圆角 ═══════════ */
  --ds-radius-none:           var(--weui-radius-none);    /* 0    */
  --ds-radius-sm:             var(--weui-radius-sm);      /* 4    */
  --ds-radius-md:             var(--weui-radius-md);      /* 8    */
  --ds-radius-lg:             var(--weui-radius-lg);      /* 12   */
  --ds-radius-xl:             var(--weui-radius-xl);      /* 16   */
  --ds-radius-full:           var(--weui-radius-full);    /* 9999 */

  /* ═══════════ Shadow · 阴影（层级递进） ═══════════ */
  --ds-shadow-xs:             0 1px 1px rgba(0, 0, 0, 0.03);
  --ds-shadow-sm:             var(--weui-shadow-sm);      /* 层级 1 · 细节 */
  --ds-shadow-md:             var(--weui-shadow-md);      /* 层级 2 · 卡片 */
  --ds-shadow-lg:             var(--weui-shadow-lg);      /* 层级 3 · 悬浮 */
  --ds-shadow-brand:          0 4px 14px -2px rgba(var(--ds-color-primary-rgb), 0.25);

  /* ═══════════ Motion · 动效 ═══════════ */
  --ds-duration-instant:      var(--weui-duration-instant);/* 0    */
  --ds-duration-fast:         var(--weui-duration-fast);   /* 150  */
  --ds-duration-normal:       var(--weui-duration-normal); /* 300  */
  --ds-duration-slow:         var(--weui-duration-slow);   /* 500  */

  --ds-ease-out:              cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Apple 标准 */
  --ds-ease-in:               cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ds-ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);     /* 弹性 */
  --ds-transition-base:       var(--weui-transition-base);           /* 0.2s ease-out */
  --ds-transition-fast:       var(--weui-transition-fast);           /* 0.15s ease-out */

  /* ═══════════ Z-Index · 层级 ═══════════ */
  --ds-z-base:                0;
  --ds-z-sticky:              100;
  --ds-z-dropdown:            500;
  --ds-z-overlay:              1000;
  --ds-z-modal:               2000;
  --ds-z-toast:               3000;
  --ds-z-max:                 9999;

  /* ═══════════ Safe Area · 全面屏适配 ═══════════ */
  --ds-safe-top:              var(--weui-safe-area-top);
  --ds-safe-right:            var(--weui-safe-area-right);
  --ds-safe-bottom:           var(--weui-safe-area-bottom);
  --ds-safe-left:             var(--weui-safe-area-left);
}

/* ─────────────────────────────────────────────────────────────────
 * Dark mode · 暗色模式语义映射
 * 仅覆盖需要反转的语义 token；primitive (tokens.css) 不变
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-text-primary:    rgba(255, 255, 255, 0.92);
    --ds-text-secondary:  rgba(255, 255, 255, 0.6);
    --ds-text-tertiary:   rgba(255, 255, 255, 0.4);
    --ds-text-disabled:   rgba(255, 255, 255, 0.2);

    --ds-bg-page:         #1a1a1a;
    --ds-bg-surface:      #2c2c2c;
    --ds-bg-subtle:       #232323;
    --ds-bg-muted:        #2a2a2a;
    --ds-bg-active:       #333333;

    --ds-border-subtle:   rgba(255, 255, 255, 0.06);
    --ds-border-default:  rgba(255, 255, 255, 0.12);
    --ds-border-strong:   rgba(255, 255, 255, 0.18);

    --ds-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.4);
    --ds-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --ds-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }
}