@import "tailwindcss";

@theme {
  --color-primary-50: #effcf2;
  --color-primary-100: #d8f8df;
  --color-primary-200: #aef0bd;
  --color-primary-300: #72df8f;
  --color-primary-400: #34c759;
  --color-primary-500: #128a2e;
  --color-primary-600: #08751f;
  --color-primary-700: #04531a;
  --color-primary-800: #033d16;
  --color-primary-900: #022b10;
  
  --color-gold-50: #fefce8;
  --color-gold-100: #fef9c3;
  --color-gold-200: #fef08a;
  --color-gold-300: #f4e4a6;
  --color-gold-400: #d4a843;
  --color-gold-500: #b8860b;
  --color-gold-600: #92700c;
  
  --color-cream: #fff9df;
  
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  
  --animate-fade-in-up: fadeInUp 0.8s ease forwards;
  --animate-fade-in-down: fadeInDown 0.8s ease forwards;
  --animate-fade-in: fadeIn 0.8s ease forwards;
  --animate-slide-in-left: slideInLeft 0.8s ease forwards;
  --animate-slide-in-right: slideInRight 0.8s ease forwards;
  --animate-float: float 6s ease-in-out infinite;
  
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes slideInRight {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer base {
  body {
    background:
      radial-gradient(circle at 15% 0%, rgba(216, 248, 223, 0.48), transparent 30rem),
      #ffffff;
  }

  ::selection {
    background: #128a2e;
    color: #ffffff;
  }
}

@layer components {
  .farm-button {
    box-shadow: 0 12px 24px rgba(4, 83, 26, 0.18);
  }

  .farm-button:hover {
    box-shadow: 0 16px 32px rgba(4, 83, 26, 0.26);
  }

  .farm-card {
    border: 1px solid rgba(4, 83, 26, 0.12);
    box-shadow: 0 12px 32px rgba(2, 43, 16, 0.08);
  }

  .farm-card:hover {
    box-shadow: 0 22px 46px rgba(2, 43, 16, 0.14);
  }

  .farm-soft-panel {
    background: linear-gradient(135deg, rgba(239, 252, 242, 0.94), rgba(255, 249, 223, 0.82));
    border: 1px solid rgba(18, 138, 46, 0.14);
  }
}

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

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #128a2e;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #04531a;
}