/* ============================================================ 清清童创 v3.0 质感 tokens 版本：v3.0 (2026-07-06) — P0 质感基础 说明：在 v2.0 变量体系上新增，不重复定义已有变量 ============================================================ */ /* ==================== 表面处理 tokens ==================== */ :root { /* ── 噪点纹理（柔和儿童风格，非工业噪音）── */ --surface-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E"); /* ── 卡片光泽高光 (::after 伪元素用) ── */ --surface-gloss: linear-gradient( 135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.08) 100% ); /* ── 品牌辉光 ── */ --surface-glow-purple: 0 0 30px rgba(180, 167, 246, 0.25); --surface-glow-orange: 0 0 28px rgba(255, 169, 77, 0.3); --surface-glow-pink: 0 0 24px rgba(255, 143, 163, 0.25); --surface-glow-blue: 0 0 24px rgba(116, 192, 252, 0.25); --surface-glow-green: 0 0 24px rgba(105, 219, 124, 0.25); /* ── 轻量纹理叠加（比 grain 更 subtle）── */ --surface-dots: radial-gradient(circle, rgba(180, 167, 246, 0.06) 1px, transparent 1px); --surface-dots-size: 20px 20px; } /* ==================== 玻璃 tokens ==================== */ :root { --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.88); --glass-bg-light: rgba(255, 255, 255, 0.55); --glass-border: 1px solid rgba(255, 255, 255, 0.45); --glass-border-strong: 1px solid rgba(255, 255, 255, 0.7); --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.25); --glass-blur: 14px; --glass-blur-strong: 20px; --glass-saturate: 1.8; } /* ==================== 3D 按钮 tokens ==================== */ :root { --btn-3d-offset: 4px; /* 品牌紫按钮 */ --btn-3d-purple-bg: var(--color-primary-dark, #5B3BB8); --btn-3d-shadow: 0 4px 0 rgba(91, 59, 184, 0.3), 0 6px 16px rgba(91, 59, 184, 0.2); --btn-3d-pressed: 0 1px 0 rgba(91, 59, 184, 0.15), 0 2px 6px rgba(91, 59, 184, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.12); /* 暖橙 CTA 按钮 */ --btn-3d-orange-bg: var(--color-orange, #FFA94D); --btn-3d-shadow-orange: 0 4px 0 rgba(255, 169, 77, 0.3), 0 6px 16px rgba(255, 169, 77, 0.22); --btn-3d-pressed-orange: 0 1px 0 rgba(255, 169, 77, 0.15), 0 2px 6px rgba(255, 169, 77, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 粉色次要按钮 */ --btn-3d-pink-bg: var(--color-pink, #FF8FA3); --btn-3d-shadow-pink: 0 4px 0 rgba(255, 143, 163, 0.3), 0 6px 16px rgba(255, 143, 163, 0.2); --btn-3d-pressed-pink: 0 1px 0 rgba(255, 143, 163, 0.15), 0 2px 6px rgba(255, 143, 163, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 绿色成功按钮 */ --btn-3d-green-bg: var(--color-green, #69DB7C); --btn-3d-shadow-green: 0 4px 0 rgba(105, 219, 124, 0.3), 0 6px 16px rgba(105, 219, 124, 0.2); --btn-3d-pressed-green: 0 1px 0 rgba(105, 219, 124, 0.15), 0 2px 6px rgba(105, 219, 124, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1); } /* ==================== 动效 tokens ==================== */ :root { /* 曲线 */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* 时长 */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 500ms; --duration-reveal: 700ms; /* 交错延迟 */ --stagger-card: 60ms; --stagger-list: 80ms; } /* ==================== Z-space 分层 tokens ==================== */ /* ⚠️ 注意：v2.0 已有 --z-base 到 --z-tooltip 这里新增的是 v3.0 专用语义层，不覆盖已有值 如需对齐，应用层使用 var(--z-v3-*) 引用 */ :root { --z-v3-bg: 0; --z-v3-card: 1; --z-v3-floating: 10; --z-v3-sticky: 50; --z-v3-overlay: 100; --z-v3-modal: 200; --z-v3-toast: 300; } /* ==================== 暗色模式 tokens 覆盖 ==================== */ body.dark-mode { /* 表面处理 */ --surface-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.06'/%3E%3C/svg%3E"); --surface-gloss: linear-gradient( 135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.02) 100% ); --surface-glow-purple: 0 0 40px rgba(180, 167, 246, 0.15); --surface-glow-orange: 0 0 36px rgba(255, 169, 77, 0.18); --surface-glow-pink: 0 0 32px rgba(255, 143, 163, 0.15); --surface-glow-blue: 0 0 32px rgba(116, 192, 252, 0.15); --surface-glow-green: 0 0 32px rgba(105, 219, 124, 0.15); --surface-dots: radial-gradient(circle, rgba(180, 167, 246, 0.04) 1px, transparent 1px); /* 玻璃 */ --glass-bg: rgba(26, 26, 46, 0.75); --glass-bg-strong: rgba(26, 26, 46, 0.92); --glass-bg-light: rgba(26, 26, 46, 0.55); --glass-border: 1px solid rgba(255, 255, 255, 0.08); --glass-border-strong: 1px solid rgba(255, 255, 255, 0.15); --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05); /* 3D 按钮 */ --btn-3d-shadow: 0 4px 0 rgba(102, 126, 234, 0.25), 0 6px 16px rgba(102, 126, 234, 0.15); --btn-3d-pressed: 0 1px 0 rgba(102, 126, 234, 0.1), 0 2px 6px rgba(102, 126, 234, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2); --btn-3d-shadow-orange: 0 4px 0 rgba(255, 169, 77, 0.25), 0 6px 16px rgba(255, 169, 77, 0.18); --btn-3d-pressed-orange: 0 1px 0 rgba(255, 169, 77, 0.1), 0 2px 6px rgba(255, 169, 77, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2); --btn-3d-shadow-pink: 0 4px 0 rgba(255, 143, 163, 0.25), 0 6px 16px rgba(255, 143, 163, 0.15); --btn-3d-pressed-pink: 0 1px 0 rgba(255, 143, 163, 0.1), 0 2px 6px rgba(255, 143, 163, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2); --btn-3d-shadow-green: 0 4px 0 rgba(105, 219, 124, 0.25), 0 6px 16px rgba(105, 219, 124, 0.15); --btn-3d-pressed-green: 0 1px 0 rgba(105, 219, 124, 0.1), 0 2px 6px rgba(105, 219, 124, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2); }