/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Base styles */
:root {
    --background: 240 20% 99%;
    --foreground: 240 10% 10%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 10%;

    --primary: 262 83% 58%;
    --primary-foreground: 0 0% 100%;

    --secondary: 262 30% 96%;
    --secondary-foreground: 262 83% 40%;

    --muted: 240 10% 96%;
    --muted-foreground: 240 5% 46%;

    --accent: 262 60% 95%;
    --accent-foreground: 262 83% 45%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
  
    --border: 240, 10%, 90%;
    --input: 240, 10%, 90%;
    --ring: 262, 83%, 58%;
    --dark: 0 0 0;
    --white: 0 0 100%;
    
    --radius: 0.75rem;
    
    --gradient-hero: linear-gradient(135deg, hsl(262, 50%, 15%) 0%, hsl(262, 60%, 25%) 50%, hsl(280, 50%, 20%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(262, 83%, 58%) 0%, hsl(280, 70%, 55%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(262, 30%, 98%) 100%);
    --gradient-cta: linear-gradient(135deg, hsl(262, 50%, 12%) 0%, hsl(262, 60%, 20%) 100%);
    
    --shadow-soft: 0 4px 20px -4px hsl(262, 50%, 30% / 0.15);
    --shadow-card: 0 8px 30px -8px hsl(262, 50%, 30% / 0.12);
    --shadow-glow: 0 0 40px hsl(262, 83%, 58% / 0.3);
    
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.bg-fl-primary {
    background-color: hsl(var(--primary)) !important;
}

.text-fl-primary {
    color: hsl(var(--primary)) !important;
}

.text-success {
  color: rgb(34, 197, 94) !important;
}

/* Utility classes */

.gradient-hero {
  background: var(--gradient-hero);
}

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-card {
  background: var(--gradient-card);
}

.gradient-cta {
  background: var(--gradient-cta);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  color: transparent;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Keyframes for animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

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

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    hsl(262, 83%, 58% / 0) 0%,
    hsl(262, 83%, 58% / 0.3) 50%,
    hsl(262, 83%, 58% / 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}