// ============================================
// 📌 字体大小 - 使用 rem 单位（推荐方案）
// ============================================
// 核心原理：
// 1. rem 相对于根元素（page/html）的字体大小计算
// 2. 只需要修改根字体大小，所有 rem 会自动缩放
// 3. 基准：1rem = 16px（浏览器默认值）
// 4. 字体缩放时，修改 document.documentElement.style.fontSize 即可

// 基础字号（基于 16px 基准）
$font-size-xs:   0.625rem;  // 10px / 16px
$font-size-sm:   0.6875rem; // 11px / 16px
$font-size-base: 0.8125rem; // 13px / 16px
$font-size-md:   0.875rem;  // 14px / 16px
$font-size-lg:   1rem;      // 16px / 16px
$font-size-xl:   1.25rem;   // 20px / 16px
$font-size-xxl:  1.5rem;    // 24px / 16px

// ============================================
// 📌 SCSS 变量（主题、颜色等）
// ============================================

// 主题色
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #fa8c16;
$danger-color: #ff4d4f;
$info-color: #722ed1;

// 文字色
$text-primary: #333333;
$text-secondary: #666666;
$text-placeholder: #999999;
$text-disabled: #bbbbbb;

// 背景色
$bg-primary: #f5f5f5;
$bg-secondary: #ffffff;
$bg-card: #ffffff;

// 边框色
$border-color: #eeeeee;
$border-light: #f5f5f5;

// 标签色
$tag-blue: #e6f7ff;
$tag-blue-text: #1890ff;
$tag-green: #f6ffed;
$tag-green-text: #52c41a;
$tag-orange: #fff7e6;
$tag-orange-text: #fa8c16;
$tag-red: #fff1f0;
$tag-red-text: #ff4d4f;
$tag-grey: #f5f5f5;
$tag-grey-text: #999999;

// 尺寸
$nav-bar-height: 48px;
$tab-bar-height: 56px;
$status-bar-height: 28px;

// 圆角
$border-radius-sm: 6px;
$border-radius-md: 10px;
$border-radius-lg: 14px;
$border-radius-xl: 20px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-base: 12px;
$spacing-md: 16px;
$spacing-lg: 20px;
$spacing-xl: 24px;