developer-portfolios/app/globals.css

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

@layer base {
  :root {
    --background-light: 0 0% 100%;
    --background-dark: 222.2 84% 4.9%;
    --text-light: 222.2 47.4% 11.2%;
    --text-dark: 210 40% 98%;
    --primary: 221.2 83.2% 53.3%;
    --primary-dark: 222.2 47.4% 11.2%;
    --primary-light: 210 40% 98%;
    --secondary: 142.1 76.2% 36.3%;
    --secondary-dark: 142.1 70.6% 45.3%;
    --secondary-light: 138 76.5% 96.7%;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply min-h-screen font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
  }
}

@layer components {
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
  }
  
  .glass-card {
    @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg;
  }
}

/* Animations */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-floating {
  animation: floating 5s ease-in-out infinite;
}

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary/50 dark:bg-primary/70 rounded-full;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-primary/70 dark:bg-primary/90;
}

/* Focus styles for accessibility */
:focus-visible {
  @apply outline-none ring-2 ring-primary/50 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

/* Smooth theme transition */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}