/* ============================================================================ 慵懒半径 v2 · 设计 Token 体系 ---------------------------------------------------------------------------- 理念：珊瑚橙主色 + 纯白主色调 + slate 中性色阶 + elevation 阴影体系 决策依据：计划书 9.2.2 节 + 第十三节决策表（纯系统字体/不引 webfont/ 删 32s 光斑改静态 mesh/spring 弹性交互/ease-out 页面切换） ============================================================================ 结构： 1. 语义色（brand/accent/success/warning/danger/info） 2. 业务状态色（free/mine/locked/snatch/swap） 3. slate 中性色阶（z0-z4 + 50-900） 4. elevation 阴影体系（elev-0 ~ elev-4） 5. 圆角阶梯（r-xs 6 ~ r-xl 28，更精致） 6. 间距阶梯（sp-1 4 ~ sp-8 64） 7. 字号阶梯（fs-xs 12 ~ fs-4xl 48） 8. 字体策略（纯系统字体 + tabular-nums 数字等宽） 9. 动效曲线（ease-out/spring/snap + dur-1 ~ dur-4） 10. 数据可视化 8 色板 11. 布局变量（侧栏/tabbar/断点） 12. 旧名兼容映射（→ 新 token，便于旧文件渐进迁移，无需 glass.css !important 覆盖） ============================================================================ */ :root { /* ========== 1. 语义色 ========== */ --brand: #f97316; /* 主品牌 珊瑚橙 */ --brand-600: #ea580c; /* 深一档（hover/active） */ --brand-400: #fb923c; /* 浅一档 */ --brand-100: #ffedd5; /* 极浅底（徽章/选中态背景） */ --brand-glow: rgba(249, 115, 22, 0.28); /* 主色辉光 */ --accent: #0ea5e9; /* 强调 天蓝（冷暖互补） */ --success: #22c55e; /* 翠绿 成功 */ --warning: #f59e0b; /* 警示橙黄 */ --danger: #ef4444; /* 亮红 危险 */ --info: #06b6d4; /* 青蓝 信息 */ /* ========== 2. 业务状态色（轮休中心语义） ========== */ --state-free: #22c55e; /* 空闲可选 */ --state-mine: #f97316; /* 我已选 */ --state-locked: #94a3b8; /* 已管控 */ --state-snatch: #ef4444; /* 可抢夺 */ --state-swap: #0ea5e9; /* 可移形 */ /* ========== 3. slate 中性色阶 ========== */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* 语义化中性色别名（z0 最浅 ~ z4 最深） */ --z0: var(--slate-50); /* 页面底 */ --z1: var(--slate-100); /* 分区底 */ --z2: var(--slate-200); /* 描边 */ --z3: var(--slate-500); /* 次要文字 */ --z4: var(--slate-900); /* 主文字 */ /* ========== 4. elevation 阴影体系（z0 无阴影 ~ z4 最高） ========== */ --elev-0: none; --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03); --elev-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04); --elev-3: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.05); --elev-4: 0 8px 16px rgba(15, 23, 42, 0.10), 0 16px 32px rgba(15, 23, 42, 0.06); /* 主色辉光阴影（按钮聚焦/选中态） */ --elev-brand: 0 6px 20px rgba(249, 115, 22, 0.28); --elev-accent: 0 6px 20px rgba(14, 165, 233, 0.24); --elev-success:0 6px 20px rgba(34, 197, 94, 0.24); --elev-danger: 0 6px 20px rgba(239, 68, 68, 0.24); /* ========== 5. 圆角阶梯（从 18/12/24/32 收敛为 6/10/14/20/28，更精致） ========== */ --r-xs: 6px; /* 小元素：徽章/胶囊 */ --r-sm: 10px; /* 按钮/输入框 */ --r-md: 14px; /* 小卡片/单元格 */ --r-lg: 20px; /* 标准卡片/弹窗 */ --r-xl: 28px; /* 大容器/底部 sheet */ --r-full: 9999px; /* ========== 6. 间距阶梯（4 的倍数） ========== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ========== 7. 字号阶梯 ========== */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 48px; /* ========== 8. 字体策略（纯系统字体，不引 webfont） ========== */ --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", "Heiti SC", "STHeitiSC", "Source Han Sans SC", "WenQuanYi Micro Hei", -apple-system, BlinkMacSystemFont, "SF Pro SC", "Helvetica Neue", sans-serif; /* 数字等宽：执行分/次数/倒计时对齐 */ --font-num: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", "PingFang SC", monospace; --font-tabular: var(--font-sans); font-variant-numeric: tabular-nums; /* ========== 9. 动效曲线（交互 spring / 页面 ease-out / 按压 snap） ========== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 页面切换 */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 交互反馈弹性 */ --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* 按压感 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; /* 微反馈 */ --dur-2: 200ms; /* 标准过渡 */ --dur-3: 320ms; /* 入场动画 */ --dur-4: 480ms; /* 复杂动画 */ /* ========== 10. 数据可视化 8 色板 ========== */ --cat-1: #f97316; --cat-2: #0ea5e9; --cat-3: #22c55e; --cat-4: #a855f7; --cat-5: #ec4899; --cat-6: #14b8a6; --cat-7: #f43f5e; --cat-8: #6366f1; /* ========== 11. 布局变量 ========== */ --tabbar-h: 64px; /* 移动端底部 tabbar 高度 */ --sidebar-w: 240px; /* 桌面端侧栏展开宽度 */ --sidebar-collapsed: 64px; /* 桌面端侧栏折叠宽度 */ --content-max: 1440px; /* 桌面端内容区最大宽度 */ --header-h: 56px; /* 顶栏高度 */ /* 响应式断点（4 档：375 / 768 / 1024 / 1440） */ --bp-sm: 375px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; /* ========== 12. 旧名兼容映射（→ 新 token） ========== 作用：让旧业务文件（vacation.js/todo.js 等引用的旧变量名）在新版仍可用， 无需 glass.css 的 !important 覆盖层。阶段 3-6 迁移时逐步替换为新 token。 */ /* 主色 */ --primary: var(--brand); --primary-light: var(--brand-400); --primary-dark: var(--brand-600); --primary-glow: var(--brand-glow); --pink: var(--cat-5); --purple: var(--cat-4); /* 背景 */ --bg: #ffffff; /* 主背景 纯白 */ --bg-deep: var(--slate-50); /* 侧栏/分区底 */ --bg-mid: #ffffff; /* 卡面白 */ --bg-aurora: var(--slate-100); /* 次级面板 */ /* 文字 */ --text: var(--slate-900); --text-light: var(--slate-600); --text-lighter: var(--slate-500); --text-muted: var(--slate-400); --border: var(--slate-200); /* 卡片（扁平实色，无模糊） */ --card: #ffffff; --card-solid: #ffffff; --card-hover: var(--slate-50); --glass-bg: #ffffff; --glass-bg-hover: var(--slate-50); --glass-bg-dark: var(--slate-800); --glass-bg-colored: var(--brand-100); --glass-border: 1px solid var(--slate-200); --glass-border-strong: 1px solid var(--slate-300); --glass-border-soft: 1px solid var(--slate-100); --glass-blur: 0px; /* 扁平化：无模糊 */ --glass-blur-strong: 0px; --glass-highlight: none; --glass-highlight-strong: none; /* 阴影（旧名 → elevation） */ --shadow-sm: var(--elev-1); --shadow: var(--elev-2); --shadow-lg: var(--elev-3); --shadow-glow: 0 0 0 1px rgba(249, 115, 22, 0.14), var(--elev-brand); --shadow-glow-primary: var(--elev-brand); --shadow-glow-success: var(--elev-success); --shadow-glow-danger: var(--elev-danger); --shadow-glow-accent: var(--elev-accent); /* 圆角（旧名 → 新阶梯） */ --radius: var(--r-lg); /* 18 → 20 */ --radius-sm: var(--r-md); /* 12 → 14 */ --radius-lg: var(--r-xl); /* 24 → 28 */ --radius-xl: var(--r-xl); /* 32 → 28（收敛过大圆角） */ /* 动效（旧名 → 新曲线） */ --dur-fast: var(--dur-1); --dur: var(--dur-2); --dur-slow: var(--dur-3); /* 装饰光斑（v2 改为静态 mesh gradient，弱化彩色氛围） */ --orb-1: rgba(249, 115, 22, 0.06); --orb-2: rgba(168, 85, 247, 0.04); --orb-3: rgba(6, 182, 212, 0.04); --orb-4: rgba(236, 72, 153, 0.03); --orb-5: rgba(14, 165, 233, 0.03); /* 安全区（灵动岛/刘海/Home Indicator），供弹层等 fixed 元素避开系统 UI */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ============================================================================ prefers-reduced-motion：尊重用户无障碍偏好 阶段 8 主题模式（dark）预留：此处仅 light，dark 在阶段 8 用 [data-theme="dark"] 覆盖 ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ease-spring: var(--ease-out); --dur-3: var(--dur-2); --dur-4: var(--dur-3); } }