/* 全局样式变量 */
page {
  /* Color */
  --black: #000;
  --white: #fff;
  --color-primary: #ff7437; // 主色调
  --color-red: #f34; // 红色字体
  --color-danger: #f43030; // 错误色调
  --color-purple: #8327ff; // 紫色(辅助色1)
  --color-orange-light: #fff3f1; // 浅橘色(辅助色2)
  --color-green: #07c160;
  --color-gray-0: #333; // 深灰
  --color-gray-1: #666; // 灰色1
  --color-gray-2: #999; // 灰色2
  --color-gray-3: #ccc; // 浅灰

  /* Page */
  --padding-size-base: 25rpx; // 页面边距
  --border-radius-base: 16rpx; // 边框圆角尺寸
  --background-color-base: #f5f5f5; // 纯灰色背景
  --background-color-white: var(--white); // 纯白色背景
  --background-color-black: var(--black); // 纯黑色背景

  /* Padding */
  --padding-gap-base: 4rpx;
  --padding-gap-xs: calc(var(--padding-gap-base) * 2); // 8
  --padding-gap-sm: calc(var(--padding-gap-base) * 4); // 16
  --padding-gap-md: calc(var(--padding-gap-base) * 6); // 24
  --padding-gap-lg: calc(var(--padding-gap-base) * 8); // 32
  --padding-gap-xl: calc(var(--padding-gap-base) * 10); // 40

  /* Text Color */
  --text-color-base: var(--color-gray-0); // 文字的基本色
  --text-color-base-inverse: var(--white); // 文字反色
  --text-color-placeholder: #c9c9c9;
  --text-color-active: var(--color-primary); // 选中状态的基本色

  /* Font */
  --font-size-base: 26rpx; // 常用字号，普通正文文字
  --font-size-xs: 22rpx; // 特定文字，用于标签
  --font-size-sm: 24rpx; // 辅助文字
  --font-size-lg: 28rpx; // 二级标题正文
  --font-size-xl: 30rpx; // 辅助标题文字
  --font-size-xxl: 34rpx; // 一级标题 (如：顶部导航栏)
  --font-size-xxxl: 36rpx; // 用于大号的数字 (如：价格)
  --font-weight-bold: 600;

  /* Gradient Colors */
  --gradient-red: linear-gradient(49deg, rgb(245, 80, 100) 0.324641%, rgb(255, 116, 55) 100%);
  --gradient-bule: linear-gradient(231deg, rgb(93, 204, 227) 0%, rgb(109, 128, 255) 100%);
}