miniprogram-linejoy/src/assets/styles/variables.scss

// src/assets/styles/variables.scss

// 主题色
$primary-color: #3C92FB;          // 主蓝色按钮、高亮元素
$secondary-color: #5DABFF;        // 次要蓝色
$success-color: #07C160;          // 成功色（添加这行）
$green-color: #07C160;            // 绿色标签(已解谜、进行中)
$orange-color: #FF9F2D;           // 橙色标签、按钮(主持人)
$blue-light-color: #6EBCFF;       // 浅蓝色标签(玩家)
$danger-color: #FF5650;           // 危险色（添加这行）
$red-color: #FF5650;              // 红色标签(新标签)
$warning-color: #FFB11B;          // 警告色（添加这行）
$yellow-color: #FFB11B;           // 黄色(评分星星)

// 文字颜色
$text-color-primary: #333;        // 主要文字
$text-color-regular: #666;        // 常规文字
$text-color-secondary: #999;      // 次要文字
$text-color-disabled: #C8C9CC;    // 禁用状态文字
$text-color-light: #FFF;          // 白色文字(按钮内)

// 背景色
$background-color-base: #F7F8FA;  // 页面背景色 - 修复变量名称
$background-color-page: #F7F8FA;  // 页面背景
$background-color-light: #FFF;    // 卡片背景
$background-color-orange: #FFF8E8; // 主持人背景
$background-color-blue: #EBF5FF;  // 玩家背景
$background-color-gold: #FFF8DC;  // 金色背景(海龟汤介绍卡片)
$background-color-gray: #F5F7FA;  // 灰色背景(输入框、提示区域)
$background-color-disabled: #F7F8FA;  // 禁用状态背景色

// 边框颜色
$border-color-base: #EBEDF0;      // 基本边框
$border-color-light: #F5F5F5;     // 浅色边框
$border-color-dark: #DCDEE0;      // 深色边框

// 标签颜色
$tag-color-new: #4caf50;          // 新标签
$tag-color-popular: #ff5722;      // 热门标签

// 字体大小
$font-size-mini: 10px;           // 最小文字(底部Tab)
$font-size-small: 12px;          // 小文字(标签、次要信息)
$font-size-base: 14px;           // 基础文字
$font-size-medium: 16px;         // 中等文字(标题)
$font-size-large: 18px;          // 大号文字(主标题)
$font-size-xlarge: 20px;         // 超大文字

// 字体粗细
$font-weight-regular: 400;       // 常规
$font-weight-medium: 500;        // 中等
$font-weight-bold: 600;          // 粗体

// 行高
$line-height-tight: 1.2;         // 紧凑
$line-height-base: 1.5;          // 基础
$line-height-loose: 1.8;         // 宽松

// 文字间距
$letter-spacing-tight: -0.2px;   // 紧凑
$letter-spacing-base: 0;         // 基础
$letter-spacing-loose: 0.2px;    // 宽松

// 间距
$spacing-mini: 2px;              // 最小间距
$spacing-small: 4px;             // 小间距
$spacing-base: 6px;             // 基础间距
$spacing-medium: 8px;           // 中等间距
$spacing-large: 16px;            // 大间距
$spacing-xlarge: 24px;           // 超大间距

// 圆角
$border-radius-mini: 2px;        // 最小圆角
$border-radius-small: 4px;       // 小圆角(卡片)
$border-radius-base: 8px;        // 基础圆角(按钮)
$border-radius-large: 16px;      // 大圆角
$border-radius-circle: 50%;      // 圆形

// 阴影
$shadow-light: 0 2px 6px rgba(0, 0, 0, 0.05);   // 轻微阴影
$shadow-base: 0 2px 12px rgba(0, 0, 0, 0.1);    // 基础阴影
$shadow-deep: 0 4px 16px rgba(0, 0, 0, 0.15);   // 深度阴影

// 动效
$animation-duration-fast: 0.2s;                // 快速动效
$animation-duration-base: 0.3s;                // 基础动效
$animation-duration-slow: 0.5s;                // 慢速动效
$animation-timing-function: ease-in-out;       // 动效曲线