现代渐变风

STYLE: Modern Gradient
TYPE: Vibrant, energetic gradient design

MUST USE:
- Gradient backgrounds: bg-gradient-to-r from-violet-500 to-fuchsia-500
- Glass morphism cards: backdrop-blur-xl bg-white/10 border-white/20
- Dark base background: bg-slate-950 or bg-[#1e1b4b]
- Gradient text: bg-gradient-to-r bg-clip-text text-transparent
- Colored shadows: shadow-violet-500/25
- Large rounded corners: rounded-2xl, rounded-3xl
- Glow orbs for decoration: blur-3xl opacity-30

MUST AVOID:
- Solid color backgrounds (main areas)
- Monotone gray schemes
- Sharp corners (rounded-none)
- Old-style gradients (vertical button gradients)
- Visual clutter from too many gradients
- Dark text on dark gradients

COLOR COMBOS:
- Violet to Fuchsia: from-violet-500 to-fuchsia-500
- Cyan to Blue: from-cyan-500 to-blue-500
- Pink to Orange: from-pink-500 to-orange-500
- Multi-color: from-violet-500 via-fuchsia-500 to-cyan-500

TYPOGRAPHY:
- Headings: White or gradient text
- Body: text-white/70 or text-white/80
- Font weight: font-medium to font-semibold

## Animation & Interaction Rules

- Gradient Flow: 渐变交互应包含色带位移（如 bg-[length:200%_auto] + hover:bg-right），避免静态变亮/变暗。
- Neon Dispersion: hover 时彩色阴影扩散半径显著增加，强化未来感光晕。
- Zero-Gravity Float: 卡片与按钮可轻微上浮并微缩放，建议 duration-500 + ease-out。
- Luminous Borders: 半透明边框在 hover 时提亮到品牌色透明度，形成被内部光线点亮的边缘。

/* Modern Gradient Global Styles */
@layer base {
  body {
    @apply bg-slate-950 text-white antialiased;
  }
}

/* Gradient text utility */
.gradient-text {
  @apply bg-gradient-to-r from-violet-400 via-fuchsia-400 to-pink-400 bg-clip-text text-transparent;
}

/* Glow orb decoration */
.glow-orb {
  @apply absolute blur-3xl opacity-30 pointer-events-none;
}

/* Animated gradient background */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}
/* Modern Gradient Design Tokens */
:root {
  --modern-gradient-primary: #8b5cf6;
  --modern-gradient-secondary: #1e1b4b;
  --modern-gradient-accent: #06b6d4;
  --modern-gradient-glow: rgba(139, 92, 246, 0.3);
}

.modern-gradient-card {
  position: relative;
  overflow: hidden;
}

.modern-gradient-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), transparent);
  pointer-events: none;
}

.modern-gradient-card:hover::before {
  opacity: 1;
}

.modern-gradient-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(139, 92, 246, 0.08);
}

.modern-gradient-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.modern-gradient-animate-in {
  animation: modern-gradient-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-white/20",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-lg shadow-violet-500/20",
    "md": "shadow-xl shadow-violet-500/25",
    "lg": "shadow-2xl shadow-violet-500/30",
    "none": "shadow-none",
    "hover": "shadow-2xl shadow-violet-500/40",
    "focus": "ring-2 ring-violet-500/50",
    "colored": {
      "violet": "shadow-xl shadow-violet-500/30",
      "fuchsia": "shadow-xl shadow-fuchsia-500/30",
      "cyan": "shadow-xl shadow-cyan-500/30"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-[1.02]",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-bold",
    "body": "font-normal",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-20 md:py-32",
    "container": "px-4 md:px-8",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6 md:gap-8",
      "lg": "gap-8 md:gap-16"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-slate-950",
      "secondary": "bg-slate-900",
      "accent": [
        "bg-gradient-to-r from-violet-500 to-fuchsia-500",
        "bg-gradient-to-r from-cyan-500 to-blue-500"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/80",
      "muted": "text-white/60"
    },
    "button": {
      "primary": "bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white",
      "secondary": "backdrop-blur-xl bg-white/10 border border-white/20 text-white",
      "danger": "bg-gradient-to-r from-red-600 to-orange-600 text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-slate-50",
      "shadow-sm",
      "shadow-md",
      "text-gray-900",
      "text-black",
      "rounded-none"
    ],
    "patterns": [
      "^bg-white$",
      "^bg-gray-[1-4]00",
      "^bg-slate-[1-4]00",
      "^text-gray-[89]00",
      "^text-black"
    ],
    "reasons": {
      "bg-white": "Modern Gradient uses dark backgrounds for contrast",
      "shadow-sm": "Use colored shadows: shadow-xl shadow-violet-500/30",
      "text-black": "Use text-white or text-white/80 on dark backgrounds"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "rounded-2xl",
      "font-medium",
      "transition-all duration-300"
    ],
    "card": [
      "backdrop-blur-xl",
      "bg-white/10",
      "border border-white/20",
      "rounded-3xl"
    ],
    "input": [
      "px-5 py-3.5",
      "backdrop-blur-xl",
      "bg-white/10",
      "border border-white/20",
      "rounded-2xl",
      "text-white",
      "placeholder:text-white/40",
      "focus:border-violet-500/50",
      "focus:ring-2 focus:ring-violet-500/20"
    ]
  }
}