@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 84%, 5%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 84%, 5%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222, 84%, 5%);
  --primary: hsl(217, 91%, 59%);
  --primary-foreground: hsl(0, 0%, 100%);
  --primary-dark: hsl(225, 83%, 40%);
  --primary-light: hsl(214, 100%, 97%);
  --secondary: hsl(210, 40%, 40%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215, 16%, 47%);
  --accent: hsl(210, 40%, 95%);
  --accent-foreground: hsl(222, 84%, 5%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  --ring: hsl(217, 91%, 59%);
  --success: hsl(160, 84%, 39%);
  --warning: hsl(32, 95%, 44%);
  --hero-gradient: linear-gradient(135deg, hsl(214, 100%, 97%) 0%, hsl(213, 94%, 88%) 50%, hsl(213, 85%, 80%) 100%);
  --font-sans: 'Inter', sans-serif;
  --radius: 0.5rem;
}

.dark {
  --background: hsl(222, 84%, 5%);
  --foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 5%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222, 84%, 5%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: hsl(217, 91%, 59%);
  --primary-foreground: hsl(0, 0%, 100%);
  --primary-dark: hsl(225, 83%, 40%);
  --primary-light: hsl(214, 100%, 97%);
  --secondary: hsl(217, 32%, 17%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32%, 17%);
  --muted-foreground: hsl(215, 20%, 65%);
  --accent: hsl(217, 32%, 17%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62%, 30%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32%, 17%);
  --input: hsl(217, 32%, 17%);
  --ring: hsl(217, 91%, 59%);
  --success: hsl(160, 84%, 39%);
  --warning: hsl(32, 95%, 44%);
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
}

@layer components {
  .hero-gradient {
    background: var(--hero-gradient);
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  .animate-slide-right {
    animation: slideRight 2s ease-in-out infinite;
  }
  
  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }
}

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

@keyframes slideRight {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
}