/**
 * uni-app 样式变量定义
 * 
 * ⚠️ 重要更新（2025-12-10）：
 * 1. 所有单位统一使用 rpx（响应式单位）
 * 2. 新增详细的变量注释
 * 3. 删除重复的布局类（已移至 common/styles/layout.css）
 * 
 * 新样式系统：common/styles/index.css
 * 完整规范：docs/样式表和组件统一规范方案.md
 */

/* ==================== 颜色变量 ==================== */

/* 主题色 */
$uni-color-primary: #37B1F2;    /* 主题蓝 */
$uni-color-success: #22AA76;    /* 成功绿 */
$uni-color-warning: #FFC300;    /* 警告黄 */
$uni-color-error: #F83535;      /* 错误红 */

/* 文字颜色 */
$uni-text-color: #333333;           /* 标题黑 */
$uni-text-color-inverse: #FFFFFF;   /* 反色白 */
$uni-text-color-grey: #999999;      /* 辅助灰 */
$uni-text-color-placeholder: #999999; /* 占位符 */
$uni-text-color-disable: #CCCCCC;   /* 禁用态 */

/* 背景颜色 */
$uni-bg-color: #FFFFFF;                 /* 纯白 */
$uni-bg-color-grey: #F5F5F5;            /* 页面背景 */
$uni-bg-color-hover: #F1F1F1;           /* 点击态 */
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); /* 遮罩 */

/* 边框颜色 */
$uni-border-color: #EEEEEE;             /* 分割线 */

/* ==================== 尺寸变量（统一使用 rpx）==================== */

/* 文字尺寸 */
$uni-font-size-sm: 24rpx;    /* 小字号 */
$uni-font-size-base: 28rpx;  /* 基础字号 */
$uni-font-size-lg: 32rpx;    /* 大字号 */
$uni-font-size-xl: 36rpx;    /* 特大字号 */

/* 图片尺寸 */
$uni-img-size-sm: 40rpx;     /* 小图标 */
$uni-img-size-base: 52rpx;   /* 基础图标 */
$uni-img-size-lg: 80rpx;     /* 大图标 */

/* 圆角 */
$uni-border-radius-sm: 8rpx;       /* 小圆角 */
$uni-border-radius-base: 16rpx;    /* 基础圆角 */
$uni-border-radius-lg: 24rpx;      /* 大圆角 */
$uni-border-radius-circle: 9999rpx; /* 完全圆角 */

/* 间距（基于 8rpx 网格系统）*/
$uni-spacing-xs: 8rpx;       /* 微小间距 */
$uni-spacing-sm: 16rpx;      /* 小间距 */
$uni-spacing-base: 24rpx;    /* 基础间距 */
$uni-spacing-lg: 32rpx;      /* 大间距 */
$uni-spacing-xl: 40rpx;      /* 特大间距 */

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

/* ==================== 布局工具类 ==================== */
/* 
 * ⚠️ 注意：以下布局类已移至 common/styles/layout.css
 * 请使用新的语义化类名：
 * - .row-between → .flex-row.justify-between.items-center
 * - .row-start → .flex-row.justify-start.items-center
 * - .row-center → .flex-row.justify-center.items-center
 * 
 * 向后兼容：旧类名保留，但建议新代码使用新规范
 */

.row-between {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.row-start {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.row-center {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.flex-none {
	flex: 0 0 auto;
}

.flex-1 {
	flex: 1 1 0;
}

