106 行
2.4 KiB
Plaintext
106 行
2.4 KiB
Plaintext
// ============================================
|
||
// 呼籁旅行官网 - 设计变量
|
||
// 视觉定位：精致温暖，草原+大地色调
|
||
// ============================================
|
||
|
||
// ---------- 色彩系统 ----------
|
||
|
||
// 主色 - 深林绿：自然、稳重、值得信赖
|
||
@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-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;
|
||
|
||
@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.04);
|
||
@shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||
@shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
@shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
@shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
|
||
@shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
|
||
|
||
// ---------- 过渡 ----------
|
||
|
||
@transition-fast: 0.15s ease;
|
||
@transition-base: 0.25s ease;
|
||
@transition-slow: 0.4s ease;
|