// ============================================
// 呼籁旅行官网 - 设计变量
// 视觉定位：精致温暖，草原+大地色调
// ============================================

// ---------- 色彩系统 ----------

// 主色 - 深林绿：自然、稳重、值得信赖
@color-primary: #2D6A4F;
@color-primary-dark: #1B4332;
@color-primary-light: #40916C;
@color-primary-lighter: #B7E4C7;
@color-primary-bg: #F0F7F4;

// 点缀 - 暖琥珀：温暖、家庭、亲和
@color-accent: #D4883A;
@color-accent-light: #E8A85C;
@color-accent-bg: #FFF8F0;

// 中性色
@color-text-primary: #1A1A2E;
@color-text-secondary: #4A4A5A;
@color-text-muted: #8A8A9A;
@color-text-placeholder: #BBBBC5;
@color-border: #E8E8ED;
@color-divider: #F0F0F4;
@color-bg-white: #FFFFFF;
@color-bg-gray: #F7F8FA;
@color-bg-warm: #FFFBF5;

// 语义色
@color-success: #2D6A4F;
@color-warning: #D4883A;
@color-error: #C1292E;

// ---------- 字体 ----------

@font-family-base: -apple-system, BlinkMacSystemFont, "PingFang SC",
  "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

@font-size-xs: 12px;
@font-size-sm: 14px;
@font-size-base: 16px;
@font-size-md: 18px;
@font-size-lg: 20px;
@font-size-xl: 24px;
@font-size-2xl: 30px;
@font-size-3xl: 36px;
@font-size-hero: 42px;
@font-size-display: 48px;
@font-size-display: 48px;

@line-height-tight: 1.3;
@line-height-normal: 1.5;
@line-height-base: 1.7;
@line-height-relaxed: 1.8;
@line-height-loose: 2.0;

@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;

// ---------- 间距（8px网格） ----------

@space-xs: 4px;
@space-sm: 8px;
@space-md: 16px;
@space-lg: 24px;
@space-xl: 32px;
@space-2xl: 48px;
@space-3xl: 64px;
@space-4xl: 96px;

// ---------- 容器 ----------

@container-max-width: 1200px;
@container-padding: 20px;
@container-padding-desktop: 40px;

// ---------- 断点 ----------

@breakpoint-sm: 375px;
@breakpoint-md: 768px;
@breakpoint-lg: 1024px;
@breakpoint-xl: 1200px;

// ---------- 圆角与阴影 ----------

@border-radius-sm: 4px;
@border-radius-md: 8px;
@border-radius-lg: 16px;
@border-radius-xl: 24px;
@border-radius-full: 9999px;

// 精致的阴影层次（升级版：更有深度感）
@shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
@shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
@shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
@shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
@shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
@shadow-card-hover: 0 12px 36px rgba(45, 106, 79, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);

// ---------- 渐变 ----------

@gradient-hero: linear-gradient(135deg, #1B4332 0%, #2D6A4F 50%, #40916C 100%);
@gradient-warm: linear-gradient(135deg, #FFFBF5 0%, #FFF8F0 50%, #F0F7F4 100%);
@gradient-cool: linear-gradient(135deg, #F0F7F4 0%, #E8F3ED 50%, #D4E8DC 100%);
@gradient-accent: linear-gradient(135deg, @color-primary 0%, @color-accent 100%);

// ---------- 过渡 ----------

@transition-fast: 0.15s ease;
@transition-base: 0.25s ease;
@transition-slow: 0.4s ease;