/* ===================================================================
   LNCLASS DESIGN SYSTEM - TAILWIND 4 (OPTIMIZED)
   =================================================================== */

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

/* 2. Configuration du Thème */
@theme {
    /* --- TYPOGRAPHIE --- */
    --font-display: "Montserrat", sans-serif;
    --font-body: "Inter", sans-serif;

    /* --- COULEURS LNCLASS --- */
    --color-primary: #0066ff;
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-hover: #0052cc;

    --color-secondary: #1a1a1a;

    --color-success: #00c851;
    --color-warning: #ff8800;
    --color-error: #ff4444;

    --color-neutral-50: #f8f9fa;
    --color-neutral-100: #e9ecef;
    --color-neutral-200: #dee2e6;
    --color-neutral-300: #ced4da;
    --color-neutral-400: #adb5bd;
    --color-neutral-500: #868e96;
    --color-neutral-600: #6c757d;
    --color-neutral-700: #495057;
    --color-neutral-800: #343a40;
    --color-neutral-900: #212529;

    --color-surface: #ffffff;
    --color-surface-dim: #f8f9fa;
    --color-border: #e9ecef;

    /* --- RADIUS --- */
    --radius-ln: 0.75rem;
    --radius-card: 1rem;
    --radius-pill: 9999px;

    /* --- ANIMATIONS --- */
    --animate-fade-out: fade-out 0.3s ease-out forwards;
    --animate-fade-in: fade-in 0.3s ease-out forwards;
    --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Keyframes */
@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Layer Components */
@layer components {

    /* --- BOUTONS (CORRIGÉ & STABILISÉ) --- */

    /* 1. Styles partagés appliqués directement aux sélecteurs (Fixe l'erreur @apply) */
    .btn-base,
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 font-display font-medium rounded-[var(--radius-ln)] transition-all duration-200 active:scale-95 focus:outline-none focus:ring-4 disabled:opacity-50 disabled:cursor-not-allowed;
        /* 2. Bordure transparente par défaut (Fixe le décalage de pixel) */
        @apply border border-transparent;
    }

    .btn-primary {
        @apply bg-primary text-white shadow-sm;

        &:hover {
            @apply bg-primary-hover shadow-md;
        }

        &:focus {
            @apply ring-primary/30;
        }
    }

    .btn-secondary {
        /* Écrase la bordure transparente par une grise */
        @apply bg-white text-neutral-800 border-neutral-200;

        &:hover {
            @apply bg-neutral-50;
        }

        &:focus {
            @apply ring-neutral-200;
        }
    }

    .btn-ghost {
        @apply bg-transparent text-primary shadow-none;

        &:hover {
            @apply bg-primary/10;
        }
    }

    .btn-danger {
        @apply bg-error text-white;

        &:hover {
            @apply bg-red-600;
        }

        &:focus {
            @apply ring-error/30;
        }
    }

    /* --- CARTES --- */
    .card-ln {
        @apply bg-surface rounded-[var(--radius-card)] border border-neutral-100 overflow-hidden transition-all duration-300;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

        &:hover {
            @apply border-primary/20;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }
    }

    /* --- FORMULAIRES --- */
    .input-ln {
        @apply w-full rounded-[var(--radius-ln)] border-neutral-300 text-neutral-900 shadow-sm py-3 px-4 placeholder:text-neutral-400 transition-colors;

        /* Ajout de outline-none pour un focus propre */
        &:focus {
            @apply border-primary ring-primary outline-none;
        }
    }

    .label-ln {
        @apply block text-sm font-medium text-neutral-700 mb-1.5;
    }

    /* --- BADGES --- */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-primary {
        @apply bg-primary/10 text-primary;
    }

    .badge-success {
        @apply bg-success/10 text-success;
    }

    .badge-warning {
        @apply bg-warning/10 text-warning;
    }

    .badge-error {
        @apply bg-error/10 text-error;
    }
}

/* 5. Utilitaires */
@layer utilities {
    .hover-scale {
        @apply transition-transform duration-300 ease-out;

        &:hover {
            @apply scale-105;
        }
    }

    .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}