:root {
  /* Colorful Theme - Vibrant & Modern */
  --color-primary: 249 115 22; /* Orange 500 */
  --color-secondary: 236 72 153; /* Pink 500 */
  --color-accent: 168 85 247; /* Purple 500 */
  --color-bg: 255 255 255; /* White */
  --color-surface: 249 250 251; /* Gray 50 */
  --color-card: 243 244 246; /* Gray 100 */
  --color-text: 17 24 39; /* Gray 900 */
  --color-text-muted: 75 85 99; /* Gray 600 */
  --color-border: 229 231 235; /* Gray 200 */
  --color-hero-bg: linear-gradient(135deg, rgb(249 115 22) 0%, rgb(236 72 153) 50%, rgb(168 85 247) 100%);
  
  /* Colorful accents */
  --color-yellow: 250 204 21; /* Yellow 400 */
  --color-green: 34 197 94; /* Green 500 */
  --color-blue: 59 130 246; /* Blue 500 */
  --color-red: 239 68 68; /* Red 500 */
}

body {
  background-color: rgb(var(--color-bg)) !important;
  color: rgb(var(--color-text)) !important;
}

.btn-primary {
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary))) !important;
  color: white !important;
  border-radius: 9999px; /* Full rounded */
  padding: 0.75rem 2rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.4) !important;
}

.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;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px) rotate(1deg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}