:root {
  /* Creative Theme - Vibrant Artistic Colors */
  --color-primary: 249 115 22; /* Orange 500 */
  --color-secondary: 239 68 68; /* Red 500 */
  --color-accent: 236 72 153; /* Pink 500 */
  --color-bg: 255 251 235; /* Yellow 50 */
  --color-surface: 255 255 255; /* White */
  --color-card: 255 255 255; /* White */
  --color-text: 124 45 18; /* Orange 900 */
  --color-text-muted: 154 52 18; /* Orange 800 */
  --color-border: 254 215 170; /* Orange 200 */
  
  /* Creative specific colors */
  --color-creative-yellow: 250 204 21; /* Yellow 400 */
  --color-creative-pink: 236 72 153; /* Pink 500 */
  --color-creative-purple: 168 85 247; /* Purple 500 */
}

body {
  background: linear-gradient(135deg, rgb(var(--color-bg)), rgb(254 240 138), rgb(253 230 138));
  color: rgb(var(--color-text));
}

.btn-primary {
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
  color: white;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-weight: 700;
  transition: all 0.3s;
  box-shadow: 0 10px 25px rgba(var(--color-primary), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 15px 35px rgba(var(--color-primary), 0.4);
}

.creative-card {
  background: rgb(var(--color-card));
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(var(--color-primary), 0.1);
  border: 2px solid transparent;
  transition: all 0.3s;
}

.creative-card:hover {
  border-color: rgb(var(--color-primary));
  transform: translateY(-5px) rotate(1deg);
  box-shadow: 0 20px 40px rgba(var(--color-primary), 0.2);
}

.creative-gradient-text {
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)), rgb(var(--color-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Floating animation */
@keyframes creative-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.creative-float {
  animation: creative-float 3s ease-in-out infinite;
}

/* Pulse glow effect */
@keyframes creative-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--color-primary), 0.3); }
  50% { box-shadow: 0 0 30px rgba(var(--color-accent), 0.5); }
}

.creative-pulse {
  animation: creative-pulse 2s ease-in-out infinite;
}