/* ====================================================================
   tokens.css — H5 端设计令牌（AGENTS.md §2.7）
   全项目样式值唯一事实源：业务代码与公共样式只允许消费 --app-* / --td-*，
   禁止硬编码 hex；换主题只改本文件的 --app-* 映射目标。
   分组：品牌/状态色 → 文本色 → 背景色 → 边框 → 圆角 → 阴影 → 间距刻度 → 字号
   取值来源：tdesign-mobile-vue/es/style/index.css（由 main.js 引入）的 --td-* 变量；
   词板无对应的项目专有色以字面色声明在本文件（唯一允许写 hex 的位置）。
   端别差异：间距刻度为 md 12 / lg 16（H5 与 PC 取值不同，令牌名保持一致）。
   ==================================================================== */

:root {
    /* ---------- 品牌色 ---------- */
    --app-color-brand: var(--td-brand-color);
    --app-color-brand-active: var(--td-brand-color-active);
    --app-color-brand-light: var(--td-brand-color-light);

    /* ---------- 状态色 ---------- */
    --app-color-success: var(--td-success-color);
    --app-color-success-light: var(--td-success-color-light);
    --app-color-warning: var(--td-warning-color);
    --app-color-warning-light: var(--td-warning-color-light);
    --app-color-error: var(--td-error-color);
    --app-color-error-light: var(--td-error-color-light);
    /* 信息色/紫色/粉色：td 词板无对应，供模块图标默认色与入口卡使用 */
    --app-color-info: #1989fa;
    --app-color-info-light: #e6f4ff;
    --app-color-purple: #7232dd;
    --app-color-purple-light: #f3eefe;
    --app-color-pink: #f06292;
    /* 状态色浅描边：td 词板只有背景档与文字档，无描边档，供提示卡与徽章边框使用 */
    --app-color-info-border: #91d5ff;
    --app-color-success-border: #b7eb8f;

    /* ---------- 文本色 ---------- */
    --app-text-primary: var(--td-text-color-primary);
    --app-text-secondary: var(--td-text-color-secondary);
    /* 三级说明文字：td 词板无对应 */
    --app-text-tertiary: #909399;
    --app-text-placeholder: var(--td-text-color-placeholder);
    --app-text-disabled: var(--td-text-color-disabled);
    --app-text-anti: var(--td-text-color-anti);
    /* 品牌色块（banner/卡面）上的半透明白字：td 词板仅有一档不透明 anti */
    --app-text-anti-secondary: rgba(255, 255, 255, 0.9);
    --app-text-anti-tertiary: rgba(255, 255, 255, 0.75);
    --app-text-link: var(--td-text-color-link);

    /* ---------- 背景色 ---------- */
    --app-bg-page: var(--td-bg-color-page);
    --app-bg-container: var(--td-bg-color-container);
    --app-bg-container-active: var(--td-bg-color-container-active);
    --app-bg-secondary: var(--td-bg-color-secondarycontainer);
    --app-bg-component: var(--td-bg-color-component);
    /* 浅色分区底：td 词板无对应 */
    --app-bg-subtle: #f5f7fa;
    /* 品牌色块上的半透明浮层（banner 提示条）：td 词板无对应 */
    --app-surface-anti: rgba(255, 255, 255, 0.18);
    /* 图片上的深色遮罩：td 词板无对应，供缩略图文字底与悬浮按钮使用 */
    --app-mask: rgba(0, 0, 0, 0.45);
    --app-mask-light: rgba(0, 0, 0, 0.3);
    /* 品牌渐变装饰：td 词板无对应 */
    --app-gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* ---------- 边框 ---------- */
    --app-border-1: var(--td-border-level-1-color);
    --app-border-2: var(--td-border-level-2-color);
    --app-component-border: var(--td-component-border);
    --app-component-stroke: var(--td-component-stroke);

    /* ---------- 圆角 ---------- */
    --app-radius-sm: var(--td-radius-small);
    --app-radius-md: var(--td-radius-default);
    --app-radius-lg: var(--td-radius-large);
    --app-radius-xl: var(--td-radius-extraLarge);
    --app-radius-round: var(--td-radius-round);

    /* ---------- 阴影 ---------- */
    --app-shadow-1: var(--td-shadow-1);
    --app-shadow-2: var(--td-shadow-2);
    --app-shadow-3: var(--td-shadow-3);
    --app-shadow-4: var(--td-shadow-4);
    /* 底部固定操作栏的上投影：td 阴影档位均为下投影，无对应 */
    --app-shadow-bar: 0 -2px 8px rgba(0, 0, 0, 0.06);

    /* ---------- 间距刻度（H5：xs 4 / sm 8 / md 12 / lg 16） ---------- */
    --app-space-xs: 4px;
    --app-space-sm: var(--td-spacer);
    --app-space-md: var(--td-spacer-1);
    --app-space-lg: var(--td-spacer-2);

    /* ---------- 字号（sm 12 / md 14 / lg 16 / xl 18） ---------- */
    --app-font-sm: var(--td-font-size-body-small);
    --app-font-md: var(--td-font-size-body-medium);
    --app-font-lg: var(--td-font-size-body-large);
    --app-font-xl: var(--td-font-size-title-large);

    /* ---------- 页面骨架 ---------- */
    /* 内页顶部标题栏统一高度：详情页头部（.detail-header）、申请页标题栏（.posting-summary）
       与框架导航栏（t-navbar）三者共用同一取值；--td-navbar-height 是 tdesign 的
       定制变量（库内以 var(--td-navbar-height, 48px) 消费），在此统一映射到 --app-* */
    --app-page-header-height: 56px;
    --td-navbar-height: var(--app-page-header-height);
}