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

/* ============================
   TAILWIND CUSTOM COMPONENTS
   ============================ */

@layer base {
  /* Typography */
  h1, h2 {
    @apply font-titre text-titre;
  }

  h1 {
    @apply text-4xl md:text-9xl font-bold leading-tight;
  }

  h2 {
    @apply text-3xl md:text-4xl font-semibold leading-snug;
  }

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

  p {
    @apply font-texte text-lg md:text-xl text-texte leading-relaxed;
  }

  a {
    @apply text-titre hover:text-titre transition-colors duration-300 underline;
  }
}

@layer components {
  /* Buttons */
  .btn-primary {
    @apply px-6 py-3 bg-[#ff6600] hover:bg-[#e65c00] text-white rounded-lg shadow-md 
      transition duration-300 font-semibold;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-lg p-6 transition-transform transform 
      hover:scale-105 hover:shadow-[0_4px_10px_rgba(222,187,77,0.6)];
  }

  .card-title {
    @apply text-2xl font-semibold text-titre mb-4;
  }

  .card-content {
    @apply text-texte text-base leading-relaxed;
  }

  /* Input Fields */
  .input-field {
    @apply block w-full px-4 py-3 bg-gray-50 text-gray-800 border border-[#ff6600] 
      rounded-lg focus:ring-2 focus:ring-[#e65c00] focus:border-[#e65c00] outline-none;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
}

@layer utilities {
  /* Utilities */
  .space-y-default > :not([hidden]) ~ :not([hidden]) {
    @apply space-y-4 md:space-y-6 lg:space-y-8;
  }

  .full-screen {
    @apply w-full min-h-screen;
  }
}

/* Custom styles */
.active {
  color: #ff6600;
}