globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-primary text-light;
  }
}

@layer components {
  .glassmorphism {
    @apply bg-muted bg-opacity-30 backdrop-filter backdrop-blur-lg;
  }

  .gradient-text {
    background: linear-gradient(to right, #32D3E7, #EBF4F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .btn-primary {
    @apply px-6 py-2 rounded-full font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50 transform hover:scale-105;
    background: linear-gradient(to right, #32D3E7, #EBF4F1);
  }

  .btn-primary:hover {
    background: linear-gradient(to right, #32D3E7, #D1E0DB);
  }

  .btn-secondary {
    @apply px-6 py-2 rounded-full border border-accent text-accent font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50 transform hover:scale-105 hover:bg-accent hover:text-primary;
  }
}

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

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px -5px #32D3E7;
  }
  to {
    box-shadow: 0 0 20px 5px #32D3E7;
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Custom Tailwind Colors */
@layer utilities {
  .bg-primary {
    background-color: #0B133A; /* Primary color */
  }
  .text-primary {
    color: #0B133A;
  }
  .bg-accent {
    background-color: #32D3E7; /* Accent color */
  }
  .text-accent {
    color: #32D3E7;
  }
  .bg-light {
    background-color: #EBF4F1; /* Light background */
  }
  .text-light {
    color: #EBF4F1;
  }
  .bg-muted {
    background-color: #D1E0DB; /* Muted background */
  }
  .text-muted {
    color: #D1E0DB;
  }
  .ring-accent {
    --tw-ring-color: #32D3E7;
  }
}