design-system.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 现代化设计系统 - 基础变量 */
:root {
  /* 主色调 - 渐变蓝紫色系 */
  --ds-primary-50: #f0f9ff;
  --ds-primary-100: #e0f2fe;
  --ds-primary-200: #bae6fd;
  --ds-primary-300: #7dd3fc;
  --ds-primary-400: #38bdf8;
  --ds-primary-500: #0ea5e9;
  --ds-primary-600: #0284c7;
  --ds-primary-700: #0369a1;
  --ds-primary-800: #075985;
  --ds-primary-900: #0c4a6e;

  /* 渐变色彩 */
  --ds-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ds-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --ds-gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --ds-gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --ds-gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  
  /* 毛玻璃效果 */
  --ds-glass-bg: rgba(255, 255, 255, 0.1);
  --ds-glass-bg-dark: rgba(0, 0, 0, 0.1);
  --ds-glass-border: rgba(255, 255, 255, 0.2);
  --ds-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  
  /* 阴影系统 */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* 圆角系统 */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-2xl: 1.5rem;
  
  /* 间距系统 */
  --ds-space-xs: 0.25rem;
  --ds-space-sm: 0.5rem;
  --ds-space-md: 1rem;
  --ds-space-lg: 1.5rem;
  --ds-space-xl: 2rem;
  --ds-space-2xl: 3rem;
  
  /* 字体系统 */
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-base: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.25rem;
  --ds-font-size-2xl: 1.5rem;
  
  /* 动画时长 */
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 300ms;
  --ds-duration-slow: 500ms;
  
  /* Z-index 层级 */
  --ds-z-dropdown: 1000;
  --ds-z-modal: 1050;
  --ds-z-popover: 1060;
  --ds-z-tooltip: 1070;
}

/* 毛玻璃效果基础类 */
.glass-effect {
  background: var(--ds-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-glass-shadow);
}

.glass-effect-dark {
  background: var(--ds-glass-bg-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--ds-glass-shadow);
}

/* 渐变背景类 */
.gradient-primary {
  background: var(--ds-gradient-primary);
}

.gradient-secondary {
  background: var(--ds-gradient-secondary);
}

.gradient-success {
  background: var(--ds-gradient-success);
}

.gradient-warning {
  background: var(--ds-gradient-warning);
}

.gradient-danger {
  background: var(--ds-gradient-danger);
}

/* 现代化按钮样式 */
.btn-modern {
  @apply relative overflow-hidden rounded-lg px-6 py-3 font-medium text-white transition-all duration-300 ease-out;
  background: var(--ds-gradient-primary);
  box-shadow: var(--ds-shadow-md);
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-lg);
}

.btn-modern:active {
  transform: translateY(0);
  box-shadow: var(--ds-shadow-md);
}

.btn-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-modern:hover::before {
  left: 100%;
}

/* 现代化输入框样式 */
.input-modern {
  @apply w-full rounded-lg border-0 bg-white/10 px-4 py-3 text-gray-900 placeholder-gray-500 backdrop-blur-sm transition-all duration-300;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--ds-shadow-sm);
}

.input-modern:focus {
  @apply outline-none ring-2 ring-blue-500/50;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: var(--ds-shadow-md);
}

/* 现代化卡片样式 */
.card-modern {
  @apply rounded-xl p-6 transition-all duration-300;
  background: var(--ds-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow-lg);
}

.card-modern:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-xl);
}

/* 现代化弹窗背景 */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 动画类 */
.animate-fade-in {
  animation: fadeIn var(--ds-duration-normal) ease-out;
}

.animate-slide-up {
  animation: slideUp var(--ds-duration-normal) ease-out;
}

.animate-scale-in {
  animation: scaleIn var(--ds-duration-fast) ease-out;
}

.animate-bounce-in {
  animation: bounceIn var(--ds-duration-slow) ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    transform: translateY(20px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes scaleIn {
  from { 
    transform: scale(0.95); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 640px) {
  .card-modern {
    @apply p-4;
  }
  
  .btn-modern {
    @apply px-4 py-2 text-sm;
  }
  
  .input-modern {
    @apply px-3 py-2 text-sm;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-glass-bg: rgba(0, 0, 0, 0.2);
    --ds-glass-border: rgba(255, 255, 255, 0.1);
  }
  
  .input-modern {
    @apply text-white placeholder-gray-400;
    background: rgba(0, 0, 0, 0.2);
  }
  
  .input-modern:focus {
    background: rgba(0, 0, 0, 0.3);
  }
}