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

@layer base {
  :root {
    --background: 100 6% 97%;
    --foreground: 180 25% 14%;
    --card: 0 0% 100%;
    --card-foreground: 180 25% 14%;
    --popover: 0 0% 100%;
    --popover-foreground: 180 25% 14%;
    --primary: 165 80% 21%;
    --primary-foreground: 0 0% 100%;
    --secondary: 36 30% 69%;
    --secondary-foreground: 180 25% 14%;
    --muted: 90 10% 92%;
    --muted-foreground: 180 10% 38%;
    --accent: 174 75% 31%;
    --accent-foreground: 0 0% 6%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 10%;
    --border: 90 10% 88%;
    --input: 90 10% 85%;
    --ring: 165 80% 21%;
    --radius: 0.625rem;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
  }
}

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

/* Custom animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes count-up {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

.animate-count-up {
  animation: count-up 0.5s ease-out forwards;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--secondary));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}