/* 
  设计令牌变量
  生成日期：2025-08-06
  来源：Figma设计文档【赛事平台】通用组件库
*/

// 前缀
$prefix: pm;

// 间隔变量
$gap: var(--pm-gap, .08rem);

// ======= 色板 =======

// 品牌色
$brand-primary-color: var(--pm-brand-primary-color, #1e72ff); // 主品牌蓝色
$brand-secondary-color: var(--pm-brand-secondary-color, #000); // 辅助品牌黑色

// 辅助色
$accent-yellow-color: var(--pm-accent-yellow-color, #fcdb8d); // 强调用浅黄色
$accent-red-color: var(--pm-accent-red-color, #ff4d4f); // 错误提示红色

// 状态色
$status-info-color: var(--pm-status-info-color, #08bcc8); // 信息状态青色
$status-warning-color: var(--pm-status-warning-color, #e8ab47); // 警告状态橙色
$status-neutral-color: var(--pm-status-neutral-color, #cd9f75); // 中性状态棕色
$status-special-color: var(--pm-status-special-color, #a286aa); // 特殊状态紫色

// 背景色
$bg-color-page: var(--pm-bg-color-page, #fff); // 页面背景色
$bg-color-container: var(--td-pm-color-container, #cfcccc);  // 容器背景色

// ======= 字体变量 =======

// 字体家族
$font-family-primary: var(--pm-font-family-primary, 'PingFang SC'); // 主要中文字体
$font-family-number: var(--pm-font-family-number, 'DIN Condensed'); // 数字字体

// 字号
$font-size-xs: var(--pm-font-size-xs, .2rem); // 描述
$font-size-sm: var(--pm-font-size-sm, .24rem); // 正文文本
$font-size-base: var(--pm-font-size-base, .28rem); // 正文标题
$font-size-md: var(--pm-font-size-md, .32rem); // 模块大标题
$font-size-lg: var(--pm-font-size-lg, .36rem); // 大标题
$font-size-xl: var(--pm-font-size-xl, .4rem); // 重点标题

// 字重
$font-weight-bold: var(--pm-font-weight-bold, 600); // 四级文字加粗
$font-weight-medium: var(--pm-font-weight-medium, 500); // 四级文字中等
$font-weight-regular: var(--pm-font-weight-regular, 400); // 四级文字常规

// 行高
$text-line-height: 1.5; // 统一行高

// 文字颜色变量
$text-color-primary: var(--pm-text-color-primary, #212124);      // 主要文字颜色
$text-color-secondary: var(--pm-text-color-secondary, #59595b);  // 次要文字颜色
$text-color-placeholder: var(--pm-text-color-placeholder, #7a7a7c); // 占位符/说明文字颜色
$text-color-disabled: var(--pm-text-color-disabled, #919192);     // 禁用状态文字颜色
$text-color-brand: var(--pm-text-color-brand, $brand-primary-color); // 品牌相关文字颜色
$text-color-link: var(--pm-text-color-link, $brand-primary-color); // 链接文字颜色

// ======= 圆角变量 =======
$radius-sm: var(--pm-radius-sm, .08rem);      // 小圆角，用于按钮、标签等小元素
$radius-md: var(--pm-radius-md, .12rem);  // 默认圆角，用于卡片、输入框等
$radius-lg: var(--pm-radius-lg, .16rem);      // 大圆角，用于大卡片、弹窗等
$radius-xl: var(--pm-radius-xl, .2rem); // 超大圆角，用于特殊场景
$radius-round: var(--pm-radius-round, 999px);    // 圆形圆角，用于胶囊按钮等
$radius-circle: var(--pm-radius-circle, 50%);    // 正圆形，用于头像等

// ======= 间距变量 =======
$spacing-xs: var(--pm-spacing-xs, .08rem);  //最小间距
$spacing-sm: var(--pm-spacing-sm, .12rem);  //小间距
$spacing-md: var(--pm-spacing-md, .16rem);  //中等间距
$spacing-lg: var(--pm-spacing-lg, .24rem);  //大间距
$spacing-xl: var(--pm-spacing-xl, .32rem);  //超大间距
$spacing-xxl: var(--pm-spacing-xxl, .48rem);  //超超大间距

// ======= 阴影变量 =======

// 基础投影 - 组件hover状态使用
$pm-shadow-1: var(--pm-shadow-1, 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%));
// 中层投影 - 下拉组件使用（下拉菜单/气泡确认框/选择器等）
$pm-shadow-2: var(--pm-shadow-2, 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%));
// 上层投影 - 警示或弹窗组件使用（全局提示/消息通知等）
$pm-shadow-3: var(--pm-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%));