/* ===================================== pipi AI Product Manager - 淡蓝色专属配色系统 简约 | 灵动 | 有设计感 ===================================== */ :root { /* ===== 主色系 - 淡蓝色渐变 ===== */ --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd; --primary-300: #7dd3fc; --primary-400: #38bdf8; --primary-500: #0ea5e9; --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985; --primary-900: #0c4a6e; /* ===== 辅助色系 - 和谐搭配 ===== */ --accent-mint: #67e8f9; /* 薄荷蓝 - 用于强调和亮点 */ --accent-sky: #87ceeb; /* 天空蓝 - 用于次要元素 */ --accent-powder: #b3d9ff; /* 粉蓝色 - 用于背景装饰 */ --accent-ice: #e6f7ff; /* 冰蓝色 - 用于浅色背景 */ --accent-steel: #94a3b8; /* 钢蓝色 - 用于文字和边框 */ /* ===== 中性色系 - 淡蓝灰调 ===== */ --neutral-50: #f8fafc; /* 极浅蓝白 */ --neutral-100: #f1f5f9; /* 浅蓝白 */ --neutral-200: #e2e8f0; /* 浅蓝灰 */ --neutral-300: #cbd5e1; /* 中浅蓝灰 */ --neutral-400: #94a3b8; /* 中蓝灰 */ --neutral-500: #64748b; /* 深蓝灰 */ --neutral-600: #475569; /* 更深蓝灰 */ --neutral-700: #334155; /* 深蓝灰 */ --neutral-800: #1e293b; /* 极深蓝灰 */ --neutral-900: #0f172a; /* 近黑蓝 */ /* ===== 功能色系 - 淡蓝色调和 ===== */ --success-light: #a7f3d0; /* 成功-浅色 */ --success-main: #10b981; /* 成功-主色 */ --success-dark: #047857; /* 成功-深色 */ --warning-light: #fde68a; /* 警告-浅色 */ --warning-main: #f59e0b; /* 警告-主色 */ --warning-dark: #d97706; /* 警告-深色 */ --error-light: #fecaca; /* 错误-浅色 */ --error-main: #ef4444; /* 错误-主色 */ --error-dark: #dc2626; /* 错误-深色 */ /* ===== 语义色彩变量 ===== */ --color-brand-primary: var(--primary-500); --color-brand-primary-hover: var(--primary-600); --color-brand-primary-active: var(--primary-700); --color-brand-secondary: var(--accent-sky); --color-brand-secondary-hover: var(--primary-400); --color-brand-secondary-active: var(--primary-500); --color-brand-accent: var(--accent-mint); --color-brand-muted: var(--accent-powder); /* ===== 背景色系 ===== */ --bg-primary: var(--neutral-50); --bg-secondary: var(--primary-50); --bg-card: #ffffff; --bg-card-hover: var(--neutral-50); --bg-overlay: rgba(14, 165, 233, 0.05); --bg-glass: rgba(255, 255, 255, 0.85); /* ===== 文字色系 ===== */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-500); --text-accent: var(--primary-600); --color-text-accent: var(--primary-600); /* 统一命名，确保打字机光标可见 */ --text-on-primary: #ffffff; --text-on-secondary: var(--neutral-700); /* ===== 边框色系 ===== */ --border-light: var(--neutral-200); --border-medium: var(--neutral-300); --border-accent: var(--primary-300); --border-focus: var(--primary-500); /* ===== 阴影系统 - 淡蓝色调 ===== */ --shadow-xs: 0 1px 2px 0 rgba(14, 165, 233, 0.05); --shadow-sm: 0 1px 3px 0 rgba(14, 165, 233, 0.1), 0 1px 2px 0 rgba(14, 165, 233, 0.06); --shadow-md: 0 4px 6px -1px rgba(14, 165, 233, 0.1), 0 2px 4px -1px rgba(14, 165, 233, 0.06); --shadow-lg: 0 10px 15px -3px rgba(14, 165, 233, 0.1), 0 4px 6px -2px rgba(14, 165, 233, 0.05); --shadow-xl: 0 20px 25px -5px rgba(14, 165, 233, 0.1), 0 10px 10px -5px rgba(14, 165, 233, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(14, 165, 233, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(14, 165, 233, 0.06); --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3); --shadow-float: 0 20px 40px -8px rgba(14, 165, 233, 0.15); /* ===== 渐变系统 - 淡蓝色主题 ===== */ --gradient-primary: linear-gradient(135deg, var(--primary-400), var(--primary-600)); --gradient-secondary: linear-gradient(135deg, var(--accent-sky), var(--primary-500)); --gradient-accent: linear-gradient(135deg, var(--accent-mint), var(--accent-sky)); --gradient-subtle: linear-gradient(135deg, var(--primary-50), var(--neutral-50)); --gradient-overlay: linear-gradient(135deg, var(--primary-500) 0%, var(--accent-mint) 100%); /* 径向渐变 */ --gradient-radial-soft: radial-gradient(circle at center, var(--primary-100) 0%, transparent 70%); --gradient-radial-glow: radial-gradient(circle at center, rgba(14, 165, 233, 0.1) 0%, transparent 70%); --gradient-radial-intense: radial-gradient(circle at center, var(--accent-mint) 0%, var(--primary-400) 100%); /* 动态渐变 */ --gradient-animated: linear-gradient( -45deg, var(--primary-400), var(--accent-sky), var(--accent-mint), var(--primary-500) ); /* ===== 过渡和动画 ===== */ --transition-fast: 0.15s ease-out; --transition-medium: 0.3s ease-out; --transition-slow: 0.5s ease-out; --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-smooth: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ===== 特殊效果色彩 ===== */ --color-glow: rgba(14, 165, 233, 0.6); --color-shimmer: rgba(255, 255, 255, 0.8); --color-pulse: rgba(14, 165, 233, 0.4); --color-ripple: rgba(14, 165, 233, 0.2); /* ===== 分类主题色 ===== */ /* AI技能主题 */ --ai-primary: var(--primary-500); --ai-secondary: var(--primary-300); --ai-accent: var(--accent-mint); --ai-bg: var(--primary-50); /* 数据分析主题 */ --data-primary: var(--accent-sky); --data-secondary: var(--primary-400); --data-accent: var(--accent-powder); --data-bg: rgba(135, 206, 235, 0.1); /* 产品管理主题 */ --pm-primary: var(--primary-600); --pm-secondary: var(--accent-mint); --pm-accent: var(--primary-300); --pm-bg: var(--neutral-50); /* ===== 响应式断点变量 ===== */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; } /* ===== 深色模式变量（可选） ===== */ @media (prefers-color-scheme: dark) { :root { --bg-primary: var(--neutral-900); --bg-secondary: var(--neutral-800); --bg-card: var(--neutral-800); --bg-glass: rgba(30, 41, 59, 0.85); --text-primary: var(--neutral-100); --text-secondary: var(--neutral-300); --text-muted: var(--neutral-400); --border-light: var(--neutral-700); --border-medium: var(--neutral-600); /* 调整阴影在深色模式下的表现 */ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); } } /* ===== 无障碍支持 ===== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-medium: 0.01ms; --transition-slow: 0.01ms; --transition-bounce: 0.01ms; --transition-smooth: 0.01ms; } } /* ===== 高对比度模式 ===== */ @media (prefers-contrast: high) { :root { --color-brand-primary: #0369a1; --text-primary: #000000; --text-secondary: #1e293b; --border-medium: #475569; } }