@import "tailwindcss";

@theme {
  /* Custom color palette - plant aesthetic */
  --color-sage-50: #f5f9f6;
  --color-sage-100: #e8f3eb;
  --color-sage-200: #c8e6d0;
  --color-sage-300: #a4d4b4;
  --color-sage-400: #7fb069;
  --color-sage-500: #5a9650;
  --color-sage-600: #4a7c42;
  --color-sage-700: #3a6235;
  --color-sage-800: #2d4d2a;
  --color-sage-900: #1f3520;

  /* Neutral colors */
  --color-charcoal-50: #f7f8f8;
  --color-charcoal-100: #e8eaeb;
  --color-charcoal-200: #d1d5d8;
  --color-charcoal-300: #a8b1b7;
  --color-charcoal-400: #7d8a93;
  --color-charcoal-500: #636e72;
  --color-charcoal-600: #525c61;
  --color-charcoal-700: #444d51;
  --color-charcoal-800: #3a4145;
  --color-charcoal-900: #2d3436;

  /* Font family */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fafafa;
  color: var(--color-charcoal-900);
  margin: 0 auto;
  max-width: 100vw;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Scroll animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

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

/* Staggered animation delays */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}