// 温润东方风设计系统 — Warm Eastern Design // 赤土橙 #C4623A 贯穿全场,米底留白呼吸 // ─── 色彩 ─── $pri: #C4623A; // 赤土橙 (accent) $pri-l: #F0DDD4; // 赤土浅 $pri-d: #8B3E1F; // 赤土深 $pri-surface: #F5F0EB; // 温润米底 $acc: #5B7A5E; // 鼠尾草绿 (success) $acc-l: #E8F0E8; // 成功浅 $acc-d: #3D5A40; // 成功深(渐变中间色) $bg: #F5F0EB; // 主背景 (warm cream) $card: #FFFFFF; // 卡片白 $white: #FFFFFF; // 纯白(文字/图标在彩色底上) $surface-alt: #EDE8E2; // 辅助底 $tx: #2D2A26; // 主文字 (warm black) $tx2: #5A554F; // 次文字 (warm gray) — AA 正文对比度 ~5.5:1 $tx3: #78716C; // 淡文字 — AA 正文对比度 ~4.6:1(仅 ≥24px) $bd: #E8E2DC; // 边框 $bd-l: #F0EBE5; // 浅边框 $dan: #B54A4A; // 危险 (muted red) $dan-l: #FDEAEA; // 危险浅 $wrn: #C4873A; // 警告 (warm amber) $wrn-l: #FFF3E0; // 警告浅 $wrn-d: #8B6F4E; // 警告深(渐变中间色) // ─── 医生端色彩(靛蓝系)─── $doc-pri: #3A6B8C; // 医生端主色 $doc-pri-l: #D4E5F0; // 医生端浅色 $doc-pri-d: #2A4F6A; // 医生端深色 // ─── 功能色 ─── $wechat: #07C160; // 微信绿 // ─── 圆角(对齐原型 T.r:16, T.rSm:12, T.rXs:8)─── $r: 16px; $r-sm: 12px; $r-xs: 8px; $r-lg: 20px; $r-pill: 999px; // ─── 老年友好触控参数 ─── $touch-min: 48px; $btn-primary-h: 52px; // 对齐原型 height:52 $menu-item-h: 64px; $tab-h: 56px; $font-min: 22px; $input-h: 56px; // ─── 间距阶梯(SCSS 编译时变量,与 CSS Token 对应)─── $sp-2xs: 4px; $sp-xs: 8px; $sp-sm: 12px; $sp-md: 16px; $sp-section: 20px; $sp-lg: 24px; $sp-xl: 32px; $sp-2xl: 48px; // ─── TabBar 底部安全区 ─── $tabbar-space: 100px; // ─── 阴影(原型 boxShadow 参数,略增可见度)─── $shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.06); $shadow-md: 0 2px 12px rgba(45, 42, 38, 0.10); $shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.15); $shadow-btn: 0 4px 16px rgba(196, 98, 58, 0.3); // 主按钮阴影 $shadow-tab: 0 2px 8px rgba(196, 98, 58, 0.25); // 选中Tab阴影 $shadow-btn-doc: 0 4px 16px rgba(58, 107, 140, 0.3); // 医生端按钮阴影 $shadow-tab-doc: 0 2px 8px rgba(58, 107, 140, 0.25); // 医生端Tab阴影 // ─── 焦点环(无障碍)─── @import 'focus-ring';