:root { /* 极光蓝紫渐变色系 - 高级物流主题 */ /* 主色调 - 深邃蓝紫 */ --aurora-950: #0A0E27; /* 极夜深蓝 */ --aurora-900: #0F1729; /* 深空蓝 */ --aurora-800: #1A2942; /* 午夜蓝 */ --aurora-700: #273E63; /* 深海蓝 */ --aurora-600: #3B5998; /* 皇家蓝 */ --aurora-500: #5B7EC2; /* 极光蓝 - 主色 */ --aurora-400: #7B9FE0; /* 天际蓝 */ --aurora-300: #9BB9F1; /* 晨曦蓝 */ --aurora-200: #BDD4F7; /* 薄雾蓝 */ --aurora-100: #E0EBFB; /* 冰晶蓝 */ --aurora-50: #F3F7FE; /* 极光白 */ /* 紫色调 - 神秘感 */ --purple-900: #1E0E3E; /* 深紫 */ --purple-800: #2D1B69; /* 皇家紫 */ --purple-700: #3F2B96; /* 贵族紫 */ --purple-600: #5141C3; /* 极光紫 */ --purple-500: #6B5DD3; /* 薰衣草紫 */ --purple-400: #8B7FE5; /* 丁香紫 */ --purple-300: #ACA3F2; /* 淡紫 */ --purple-200: #CFC9F8; /* 浅紫 */ --purple-100: #E9E6FC; /* 极浅紫 */ /* 青色调 - 科技感 */ --cyan-600: #0891B2; /* 科技青 */ --cyan-500: #06B6D4; /* 青蓝 */ --cyan-400: #22D3EE; /* 亮青 */ --cyan-300: #67E8F9; /* 浅青 */ --cyan-200: #A5F3FC; /* 极浅青 */ /* 高级渐变组合 */ --gradient-aurora: linear-gradient(135deg, var(--aurora-600) 0%, var(--purple-600) 50%, var(--cyan-500) 100%); --gradient-premium: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #6B8DD6 50%, #8E37D7 75%, #667eea 100%); --gradient-mesh: radial-gradient(at 20% 80%, var(--purple-400) 0%, transparent 50%), radial-gradient(at 80% 20%, var(--cyan-400) 0%, transparent 50%), radial-gradient(at 40% 40%, var(--aurora-400) 0%, transparent 50%), linear-gradient(135deg, var(--aurora-950) 0%, var(--purple-900) 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); --gradient-holographic: linear-gradient(45deg, #ff0080, #ff8c00, #ffd700, #00ff00, #00ffff, #0080ff, #ff0080); --gradient-card: linear-gradient(135deg, rgba(91, 126, 194, 0.1) 0%, rgba(107, 93, 211, 0.05) 50%, rgba(6, 182, 212, 0.1) 100%); --gradient-text: linear-gradient(90deg, var(--aurora-400) 0%, var(--purple-400) 33%, var(--cyan-400) 66%, var(--aurora-400) 100%); /* 毛玻璃效果背景 */ --glass-white: rgba(255, 255, 255, 0.08); --glass-white-hover: rgba(255, 255, 255, 0.12); --glass-dark: rgba(10, 14, 39, 0.6); --glass-purple: rgba(81, 65, 195, 0.1); --glass-cyan: rgba(6, 182, 212, 0.1); /* 霓虹光效 */ --neon-blue: #00d4ff; --neon-purple: #a855f7; --neon-pink: #ec4899; --glow-blue: 0 0 20px rgba(0, 212, 255, 0.5); --glow-purple: 0 0 20px rgba(168, 85, 247, 0.5); --glow-pink: 0 0 20px rgba(236, 72, 153, 0.5); /* 文字颜色 */ --text-primary: var(--aurora-50); --text-secondary: var(--aurora-200); --text-muted: var(--aurora-300); --text-accent: var(--cyan-400); --text-gradient: var(--gradient-text); /* 背景色 */ --bg-primary: var(--aurora-950); --bg-secondary: var(--aurora-900); --bg-tertiary: var(--aurora-800); --bg-card: var(--glass-white); --bg-overlay: rgba(10, 14, 39, 0.8); /* 边框 */ --border-default: rgba(255, 255, 255, 0.1); --border-hover: rgba(255, 255, 255, 0.2); --border-accent: var(--cyan-500); --border-gradient: linear-gradient(90deg, var(--purple-500), var(--cyan-500)); /* 高级阴影 */ --shadow-neon: 0 0 20px rgba(91, 126, 194, 0.5), 0 0 40px rgba(107, 93, 211, 0.3), 0 0 60px rgba(6, 182, 212, 0.2); --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(91, 126, 194, 0.2); --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(107, 93, 211, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37), inset 0 0 0 1px rgba(255, 255, 255, 0.1); --shadow-text: 0 0 10px rgba(91, 126, 194, 0.8), 0 0 20px rgba(107, 93, 211, 0.6), 0 0 30px rgba(6, 182, 212, 0.4); /* 动画时长 */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --duration-slowest: 1200ms; /* 动画缓动函数 */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-elastic: cubic-bezier(0.68, -0.55, 0.32, 1.55); --ease-back: cubic-bezier(0.36, 0, 0.66, -0.56); /* 模糊效果 */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(16px); --blur-xl: blur(24px); --blur-2xl: blur(40px); --backdrop-blur: blur(12px); /* 字体系统 */ --font-display: 'Orbitron', 'Space Grotesk', sans-serif; --font-primary: 'Inter', 'PingFang SC', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* 字体大小 - 响应式 */ --text-xs: clamp(0.75rem, 1.5vw, 0.875rem); --text-sm: clamp(0.875rem, 2vw, 1rem); --text-base: clamp(1rem, 2.5vw, 1.125rem); --text-lg: clamp(1.125rem, 3vw, 1.25rem); --text-xl: clamp(1.25rem, 3.5vw, 1.5rem); --text-2xl: clamp(1.5rem, 4vw, 2rem); --text-3xl: clamp(2rem, 5vw, 2.5rem); --text-4xl: clamp(2.5rem, 6vw, 3.5rem); --text-5xl: clamp(3rem, 7vw, 4.5rem); --text-6xl: clamp(3.5rem, 8vw, 6rem); /* 间距系统 */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* 圆角 */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-3xl: 3rem; --radius-full: 9999px; /* 装饰性元素 */ --pattern-grid: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236B5DD3' fill-opacity='0.1'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E"); /* 特殊效果 */ --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E"); /* 动画关键帧定义 */ --animation-float: float 6s ease-in-out infinite; --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animation-gradient: gradient 8s linear infinite; --animation-glow: glow 2s ease-in-out infinite alternate; }