@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@theme {
  --color-gray-custom: #6b7280;
  --color-gray-custom-light: #9ca3af;
}

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    @apply bg-white text-black leading-relaxed;
  }
}

@layer components {
  .btn-primary {
    @apply bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors duration-200 font-medium;
  }

  .btn-secondary {
    @apply border-2 border-black text-black px-6 py-3 rounded-full hover:bg-black hover:text-white transition-all duration-200 font-medium;
  }

  .text-patois {
    @apply font-medium text-lg leading-relaxed;
  }

  .text-french {
    @apply font-normal text-lg leading-relaxed;
    color: var(--color-gray-custom);
  }
}
