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

@layer base {
  :root {
    --font-inter: "Inter", system-ui, sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-white text-ink-900 antialiased;
    font-feature-settings: "cv11", "ss01";
  }

  ::selection {
    @apply bg-whatsapp/25 text-ink-900;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-whatsapp ring-offset-2 ring-offset-white dark:ring-offset-ink-950;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  .glass {
    @apply bg-white/60 backdrop-blur-xl border border-white/60 dark:bg-white/5 dark:border-white/10;
  }

  .glass-card {
    @apply glass shadow-card dark:shadow-card-dark rounded-3xl;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-[linear-gradient(90deg,#16A34A,#25D366,#4ADE80,#25D366,#16A34A)] bg-[length:200%_auto] animate-gradient-move;
  }

  .section-pad {
    @apply py-20 sm:py-28;
  }

  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-full border border-whatsapp/25 bg-whatsapp/10 px-4 py-1.5 text-sm font-medium text-whatsapp-dark dark:text-whatsapp-light;
  }

  .btn-glow {
    @apply relative overflow-hidden shadow-[0_0_0_0_rgba(37,211,102,0.5)] transition-shadow duration-300 hover:shadow-glow;
  }
}

@layer utilities {
  .bg-grid {
    background-image: linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .mask-fade-b {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
}