<div class="glass rounded-2xl p-6">Standard card</div>
<div class="glass-strong rounded-2xl p-6">Nav/modal</div>
<div class="glass-subtle rounded-xl p-4">Hover overlay</div>

<div class="liquid-glass rounded-3xl p-8">Premium surface</div>
<div class="liquid-glass-elevated rounded-3xl p-8">Hero card</div>

<div class="iridescent-glass rounded-3xl p-8">Rainbow-shift featured</div>
<div class="bubble-shine rounded-full w-24 h-24">Badge/orb</div>

// Primary
<button className="bg-brand-primary text-white rounded-lg px-4 py-2 font-medium shadow-glow-brand hover:scale-[1.02] transition-all duration-fast">
  Primary Action
</button>

// Crystal
<button className="bg-gradient-crystal text-cosmic-void rounded-lg px-4 py-2 font-medium shadow-glow-sm">
  Crystal Action
</button>

// Ghost
<button className="text-text-secondary hover:text-text-primary rounded-lg px-4 py-2 font-medium transition-colors">
  Ghost Action
</button>

// Standard
<div className="glass rounded-2xl p-6 hover-lift glow-card">
  <h3 className="font-display text-fluid-2xl text-gradient-crystal mb-4">Title</h3>
  <p className="font-sans text-fluid-base text-text-secondary">Description</p>
</div>

// Featured
<div className="liquid-glass rounded-3xl p-8 border-gradient">
  <h3 className="font-display text-fluid-3xl text-gradient-brand mb-4">Featured</h3>
</div>

<h1 className="text-gradient-crystal">Crystal</h1>
<h1 className="text-gradient-brand">Violet → Crystal</h1>
<h1 className="text-gradient-fire">Fire → Gold</h1>
<h1 className="text-gradient-gold">Gold</h1>

// Page background
<div className="bg-cosmic-void bg-cosmic-mesh min-h-screen">

// Hero with mesh gradient
<section className="bg-mesh-gradient py-24 lg:py-32">

// Aurora atmospheric
<section className="bg-aurora py-24">

// Cosmic fade in
const cosmicFadeIn = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
};

// Stagger container
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.08 } }
};

// Hover
whileHover={{ scale: 1.02, y: -4 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }}