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

/* Design system - Bibliothèque Magistrale */

@layer components {
    .btn-primary {
        @apply bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition duration-150 active:scale-95 font-medium;
    }

    .btn-secondary {
        @apply bg-gray-300 dark:bg-zinc-600 text-gray-700 dark:text-zinc-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-500 transition duration-150 active:scale-95 font-medium;
    }

    .btn-danger {
        @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition duration-150 active:scale-95 font-medium;
    }

    .card {
        @apply bg-white dark:bg-zinc-800 rounded-lg shadow-sm hover:shadow-md hover:-translate-y-0.5 transition duration-150;
    }

    .input-field {
        @apply w-full rounded-md border-gray-300 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 shadow-sm focus:border-teal-500 focus:ring-teal-500 transition duration-150;
    }

    .badge-available {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300;
    }

    .badge-borrowed {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 dark:bg-orange-900/40 text-orange-800 dark:text-orange-300;
    }
}

@layer utilities {
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in-out;
    }

    .animate-shake           { animation: shake 300ms ease-out; }
    .animate-slide-down      { animation: slide-down 200ms ease-out; }
    .animate-fade-up         { animation: fade-up 300ms ease-out; }
    .animate-ripple-expand   { animation: ripple-expand 400ms ease-out forwards; }
    .animate-favorite-bounce { animation: favorite-bounce 200ms ease-out; }
}

/* FOUC protection pour scroll-reveal : masque les éléments seulement quand Stimulus est connecté */
[data-controller~="scroll-reveal"] [data-reveal] {
    opacity: 0;
}

/* View Transitions — durée du fondu croisé entre navigations Turbo */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 150ms;
    animation-timing-function: ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-4px); }
  40%, 80%  { transform: translateX(4px); }
}

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

@keyframes ripple-expand {
  from { transform: scale(0);   opacity: 0.3; }
  to   { transform: scale(1.5); opacity: 0; }
}

@keyframes fade-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes favorite-bounce {
  0%   { transform: scale(1);    }
  40%  { transform: scale(0.85); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1);    }
}

@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;
    }
}