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

/* Custom base styles */
@layer base {
  html {
    scroll-behavior: smooth;
    font-size: 16px; /* Ensuring base font size is standard */
  }

  body {
    @apply font-inter text-vmc-dark bg-white text-base leading-relaxed;
  }

  h1 {
    @apply font-inter font-bold text-4xl md:text-5xl lg:text-6xl leading-tight;
  }

  h2 {
    @apply font-inter font-bold text-3xl md:text-4xl leading-tight;
  }

  h3 {
    @apply font-inter font-bold text-2xl leading-snug;
  }

  p {
    @apply text-base md:text-lg leading-relaxed;
  }

  .subtitle {
    @apply text-lg md:text-xl lg:text-2xl leading-relaxed text-gray-600;
  }
}

/* Custom components */
@layer components {
  .btn-primary {
    @apply inline-flex items-center px-6 py-3 border-2 border-gray-900 text-base md:text-lg font-medium 
    rounded-md text-white bg-vmc-green hover:bg-vmc-green/90 focus:outline-none focus:ring-2 
    focus:ring-offset-2 focus:ring-vmc-green transition-colors duration-200 
    shadow-[3px_3px_0px_0px_rgba(17,24,39,1)];
  }

  .btn-secondary {
    @apply px-6 py-3 text-base md:text-lg bg-vmc-dark text-white rounded-lg hover:bg-gray-700 
    transition-colors font-semibold;
  }

  .btn-outline {
    @apply px-6 py-3 text-base md:text-lg border-2 border-vmc-green text-vmc-green rounded-lg 
    hover:bg-vmc-green hover:text-white transition-all font-semibold;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-vmc-gradient-start to-vmc-gradient-end text-transparent bg-clip-text;
  }

  .feature-card {
    @apply relative p-8 bg-white rounded-xl transition-all duration-300;
    opacity: 1;
    transform: translateY(0);
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgba(34, 197, 94, 0.2), transparent) border-box;
  }

  .feature-card.hidden-card {
    opacity: 0;
    transform: translateY(20px);
  }

  .feature-card:hover {
    @apply shadow-lg;
    border-color: rgba(34, 197, 94, 0.2);
    transform: translateY(-4px);
  }

  .feature-card .icon-container {
    @apply flex items-center justify-center w-14 h-14 mb-6 bg-vmc-cream rounded-lg 
    transition-all duration-300 ease-in-out;
  }

  .feature-card:hover .icon-container {
    @apply bg-vmc-green;
  }

  .feature-card:hover .icon-container svg {
    @apply text-white scale-110 transform transition-transform duration-300;
  }

  .feature-card h3 {
    @apply text-xl md:text-2xl font-semibold text-vmc-dark mb-3;
  }

  .feature-card p {
    @apply text-base md:text-lg text-gray-600 leading-relaxed;
  }

  .feature-card::before {
    content: '';
    @apply absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300;
    background: radial-gradient(
      800px circle at var(--mouse-x) var(--mouse-y),
      rgba(34, 197, 94, 0.06),
      transparent 40%
    );
    pointer-events: none;
  }

  .feature-card:hover::before {
    @apply opacity-100;
  }

  /* Animation classes */
  .animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .gradient-blur {
    @apply absolute w-[150px] h-[150px] rounded-full bg-vmc-green/15 blur-[40px] animate-float-hero;
  }

  .aspect-video {
    @apply relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  }

  .aspect-video > * {
    @apply absolute top-0 left-0 w-full h-full;
  }

  /* Pricing Cards */
  .pricing-card {
    @apply relative p-8 bg-white rounded-xl transition-all duration-300;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgba(34, 197, 94, 0.2), transparent) border-box;
  }

  .pricing-card.popular {
    @apply border-2 border-vmc-green relative transform scale-105 shadow-xl;
  }

  .pricing-card.popular::before {
    content: 'Most Popular';
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 bg-vmc-green text-white 
    px-4 py-1 rounded-full text-sm font-medium;
  }

  .pricing-card .price {
    @apply text-4xl md:text-5xl font-bold mb-2;
    background: linear-gradient(135deg, #22c55e, #4F46E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .pricing-card .period {
    @apply text-base text-gray-500 ml-2;
    -webkit-text-fill-color: #6B7280;
  }

  .pricing-card .features {
    @apply mt-6 space-y-4;
  }

  .pricing-card .features li {
    @apply flex items-start;
  }

  .pricing-card .features li svg {
    @apply w-5 h-5 text-vmc-green flex-shrink-0 mr-3 mt-0.5;
  }

  .pricing-card .features li span {
    @apply text-gray-600;
  }

  .pricing-card .btn-pricing {
    @apply w-full mt-8 py-3 px-6 rounded-lg text-center font-medium transition-all duration-200
    focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .pricing-card .btn-pricing.primary {
    @apply bg-vmc-green text-white border-2 border-gray-900 
    shadow-[3px_3px_0px_0px_rgba(17,24,39,1)] hover:bg-vmc-green/90;
  }

  .pricing-card .btn-pricing.secondary {
    @apply bg-white text-vmc-green border-2 border-vmc-green 
    hover:bg-vmc-green hover:text-white;
  }

  /* Loading States */
  .price-loading {
    @apply animate-pulse bg-gray-200 rounded h-10 w-32 inline-block;
  }

  /* Price Toggle */
  .price-toggle {
    @apply relative inline-flex items-center p-1 rounded-lg bg-gray-100 mt-8 mb-12;
  }

  .price-toggle-option {
    @apply px-4 py-2 text-sm font-medium rounded-md cursor-pointer transition-colors duration-200;
  }

  .price-toggle-option.active {
    @apply bg-white text-vmc-dark shadow-sm;
  }

  .price-toggle-option:not(.active) {
    @apply text-gray-500 hover:text-vmc-dark;
  }

  /* Paddle MoR Notice */
  .paddle-mor-notice {
    @apply text-center text-sm text-gray-600 mt-4 max-w-2xl mx-auto;
  }
}

/* Custom utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .bg-gradient-subtle {
    background: linear-gradient(
      135deg,
      rgba(255, 251, 245, 0.8) 0%,
      rgba(236, 253, 245, 0.4) 50%,
      rgba(255, 251, 245, 0.8) 100%
    );
  }

  .bg-gradient-dark {
    background: linear-gradient(
      135deg,
      rgba(17, 24, 39, 0.98) 0%,
      rgba(34, 197, 94, 0.05) 50%,
      rgba(17, 24, 39, 0.98) 100%
    );
  }
}

/* Footer */
footer {
    background: #f8fafc;
    padding: 4rem 1rem 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.footer-section h4 {
    color: #1e3a8a;
    margin-bottom: 1rem;
}

.footer-section a {
    display: block;
    color: #4b5563;
    text-decoration: none;
    margin: 0.5rem 0;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #2563eb;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
}