/* ========================================
   设计系统 Design Tokens
   酒店民宿短租预订平台 - 橙蓝双色系统
   参考：美团（橙色主导）+ 飞猪（蓝橙结合）
   ======================================== */

/* ========== 色彩系统 Color System ========== */

// 主色系 - 活力橙（用于CTA按钮、价格、预订等促进转化的场景）
$primary-color: #FF6B35;
$primary-50: #FFF5F2;
$primary-100: #FFE8E0;
$primary-200: #FFD1C1;
$primary-300: #FFB088;
$primary-400: #FF8A5C;
$primary-500: #FF6B35; // 主色
$primary-600: #E65A2B;
$primary-700: #CC4A1F;
$primary-800: #B33B14;
$primary-900: #992C0A;

// 辅助色系 - 信任蓝（用于评分、状态、信息展示等建立信任的场景）
$secondary-color: #0086F6;
$secondary-50: #E6F4FF;
$secondary-100: #BAE0FF;
$secondary-200: #91CAFF;
$secondary-300: #69B1FF;
$secondary-400: #4096FF;
$secondary-500: #0086F6; // 辅助色
$secondary-600: #0066CC;
$secondary-700: #0050A3;
$secondary-800: #003A7A;
$secondary-900: #002451;

// 功能色系
$success-color: #52C41A;
$success-light: #73D13D;
$success-dark: #389E0D;
$success-bg: #F6FFED;

$warning-color: #FAAD14;
$warning-light: #FFC53D;
$warning-dark: #D48806;
$warning-bg: #FFFBE6;

$error-color: #F5222D;
$error-light: #FF4D4F;
$error-dark: #CF1322;
$error-bg: #FFF1F0;

$info-color: #1890FF;
$info-light: #40A9FF;
$info-dark: #096DD9;
$info-bg: #E6F7FF;

// 中性色系（8级灰度）
$gray-50: #FAFAFA;
$gray-100: #F5F5F5;
$gray-200: #E5E5E5;
$gray-300: #D4D4D4;
$gray-400: #A3A3A3;
$gray-500: #737373;
$gray-600: #525252;
$gray-700: #404040;
$gray-800: #262626;
$gray-900: #171717;

// 语义化颜色
$text-primary: $gray-900;      // 主要文字
$text-secondary: $gray-600;    // 次要文字
$text-tertiary: $gray-500;     // 辅助文字
$text-placeholder: $gray-400;  // 占位文字
$text-disabled: $gray-300;     // 禁用文字
$text-inverse: #FFFFFF;        // 反色文字

$bg-page: #F7F8FA;             // 页面背景
$bg-card: #FFFFFF;             // 卡片背景
$bg-hover: #F5F5F5;            // 悬停背景
$bg-active: #E5E5E5;           // 激活背景
$bg-disabled: #FAFAFA;         // 禁用背景
$bg-mask: rgba(0, 0, 0, 0.5);  // 遮罩背景

$border-base: $gray-200;       // 基础边框
$border-light: $gray-100;      // 浅色边框
$border-dark: $gray-300;       // 深色边框

// 特殊色
$star-color: #FFB800;          // 评分星星
$price-color: $primary-color;  // 价格颜色
$discount-color: $error-color; // 折扣颜色

/* ========== 字体系统 Typography System ========== */

$font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;

// 字号（8级）
$font-xs: 20rpx;    // 辅助文字
$font-sm: 24rpx;    // 次要文字
$font-base: 28rpx;  // 正文
$font-md: 30rpx;    // 小标题
$font-lg: 32rpx;    // 标题
$font-xl: 36rpx;    // 大标题
$font-2xl: 40rpx;   // 特大标题
$font-3xl: 48rpx;   // 超大标题

// 字重
$font-regular: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;

// 行高
$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

/* ========== 间距系统 Spacing System（基于4的倍数） ========== */

$spacing-0: 0;
$spacing-xs: 8rpx;
$spacing-sm: 12rpx;
$spacing-md: 16rpx;
$spacing-lg: 20rpx;
$spacing-xl: 24rpx;
$spacing-2xl: 32rpx;
$spacing-3xl: 48rpx;
$spacing-4xl: 64rpx;

/* ========== 圆角系统 Border Radius System ========== */

$radius-xs: 4rpx;
$radius-sm: 8rpx;
$radius-base: 12rpx;
$radius-md: 16rpx;
$radius-lg: 20rpx;
$radius-xl: 24rpx;
$radius-2xl: 28rpx;
$radius-round: 999rpx;

/* ========== 阴影系统 Shadow System ========== */

$shadow-xs: 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
$shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.10);
$shadow-xl: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
$shadow-primary: 0 4rpx 16rpx rgba(255, 107, 53, 0.25);
$shadow-secondary: 0 4rpx 16rpx rgba(0, 134, 246, 0.20);

/* ========== 渐变系统 Gradient System ========== */

$gradient-primary: linear-gradient(135deg, #FF6B35, #FF8A5C);
$gradient-primary-reverse: linear-gradient(135deg, #FF8A5C, #FF6B35);
$gradient-secondary: linear-gradient(135deg, #0086F6, #00A6FF);
$gradient-secondary-reverse: linear-gradient(135deg, #00A6FF, #0086F6);
$gradient-warm: linear-gradient(135deg, #FF6B35, #FAAD14);
$gradient-cool: linear-gradient(135deg, #0086F6, #52C41A);
$gradient-success: linear-gradient(135deg, #52C41A, #73D13D);
$gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));

/* ========== 动画系统 Animation System ========== */

// 动画速度
$transition-fast: 0.15s;
$transition-base: 0.2s;
$transition-slow: 0.3s;
$transition-slower: 0.5s;

// 缓动函数
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 完整过渡
$transition-all: all $transition-base $ease-in-out;
$transition-color: color $transition-base $ease-in-out;
$transition-bg: background-color $transition-base $ease-in-out;
$transition-transform: transform $transition-base $ease-in-out;
$transition-opacity: opacity $transition-base $ease-in-out;

/* ========== Z-index系统 Z-index System ========== */

$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;
$z-toast: 1080;

/* ========== 尺寸系统 Size System ========== */

// 按钮高度
$btn-height-mini: 48rpx;
$btn-height-small: 56rpx;
$btn-height-medium: 64rpx;
$btn-height-large: 80rpx;

// 输入框高度
$input-height-small: 56rpx;
$input-height-medium: 64rpx;
$input-height-large: 72rpx;

// 图标尺寸
$icon-xs: 24rpx;
$icon-sm: 32rpx;
$icon-base: 40rpx;
$icon-lg: 48rpx;
$icon-xl: 64rpx;

/* ========== 断点系统 Breakpoint System ========== */

$breakpoint-xs: 320px;
$breakpoint-sm: 375px;
$breakpoint-md: 414px;
$breakpoint-lg: 768px;
$breakpoint-xl: 1024px;

/* ========== 安全区域 Safe Area ========== */

$safe-area-top: env(safe-area-inset-top);
$safe-area-bottom: env(safe-area-inset-bottom);
$safe-area-left: env(safe-area-inset-left);
$safe-area-right: env(safe-area-inset-right);
