/* ========================================================================
   🚔 FONT
======================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap");

/* ========================================================================
   🎨 TAILWIND
======================================================================== */
@import "tailwindcss";

/* ========================================================================
   🎨 STYLES PERSONNALISÉS
   ======================================================================== */

@layer base {
    :root {
        --background: 30 100% 97%; /* crème */
        --foreground: 340 20% 30%; /* warm dark text */
        --card: 0 0% 100%;
        --card-foreground: 340 20% 30%;
        --popover: 0 0% 100%;
        --popover-foreground: 340 20% 30%;
        --primary: 340 82% 52%; /* rose poudré */
        --primary-foreground: 0 0% 100%;
        --secondary: 15 100% 70%; /* rose pêche */
        --secondary-foreground: 0 0% 100%;
        --muted: 340 20% 94%;
        --muted-foreground: 340 15% 55%;
        --accent: 270 70% 75%; /* lavande douce */
        --accent-foreground: 340 20% 30%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 98%;
        --border: 340 30% 90%;
        --input: 340 30% 90%;
        --ring: 340 82% 52%;
        --radius: 0.75rem; /* 12px */

        /* Custom brand colors */
        --gold: 40 100% 60%;
        --cream: 30 100% 97%;
    }

    .dark {
        /* Slightly muted warm tones for dark mode if needed, but primarily focusing on pastel for default */
        --background: 340 20% 12%;
        --foreground: 30 100% 97%;
        --card: 340 15% 15%;
        --card-foreground: 30 100% 97%;
        --popover: 340 15% 15%;
        --popover-foreground: 30 100% 97%;
        --primary: 340 82% 65%;
        --primary-foreground: 340 20% 12%;
        --secondary: 15 80% 65%;
        --secondary-foreground: 340 20% 12%;
        --muted: 340 15% 20%;
        --muted-foreground: 340 20% 75%;
        --accent: 270 60% 70%;
        --accent-foreground: 340 20% 12%;
        --border: 340 20% 25%;
        --input: 340 20% 25%;
        --ring: 340 82% 65%;
    }
}

@layer base {
    * {
        border-color: hsl(var(--border));
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        font-family: "Quicksand", sans-serif;
        overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Outfit", sans-serif;
        text-wrap: balance;
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.3;
    }

    p {
        line-height: 1.625;
    }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    /* ── Couleurs texte ── */
    .text-primary {
        color: hsl(var(--primary));
    }
    .text-secondary {
        color: hsl(var(--secondary));
    }
    .text-accent {
        color: hsl(var(--accent));
    }
    .text-foreground {
        color: hsl(var(--foreground));
    }
    .text-foreground\/80 {
        color: hsl(var(--foreground) / .8);
    }
    .text-muted-foreground {
        color: hsl(var(--muted-foreground));
    }

    /* ── Couleurs fond ── */
    .bg-primary {
        background-color: hsl(var(--primary));
    }
    .bg-secondary {
        background-color: hsl(var(--secondary));
    }
    .bg-accent {
        background-color: hsl(var(--accent));
    }
    .bg-accent\/10 {
        background-color: hsl(var(--accent) / .1);
    }
    .bg-background {
        background-color: hsl(var(--background));
    }
    .bg-card {
        background-color: hsl(var(--card));
    }
    .bg-muted {
        background-color: hsl(var(--muted));
    }
    .bg-gold {
        background-color: hsl(var(--gold));
    }
    .bg-cream {
        background-color: hsl(var(--cream));
    }

    /* ── Bordures ── */
    .border-primary {
        border-color: hsl(var(--primary));
    }
    .border-border {
        border-color: hsl(var(--border));
    }

    /* ── Ombres colorées ── */
    .shadow-primary {
        box-shadow: 0 4px 20px hsl(var(--primary) / 0.1);
    }
    .shadow-primary-lg {
        box-shadow: 0 20px 40px hsl(var(--primary) / 0.2);
    }

    /* ── SVG Fill (requis pour BookCardComponent) ── */
    .fill-primary {
        fill: hsl(var(--primary));
    }
    .fill-secondary {
        fill: hsl(var(--secondary));
    }
    .fill-transparent {
        fill: transparent;
    }

    /* ── Z-index nommés ── */
    .z-toast {
        z-index: 9999;
    }
    .z-modal {
        z-index: 1000;
    }
    .z-overlay {
        z-index: 500;
    }

    /* ── Typographie ── */
    .font-heading {
        font-family: "Outfit", sans-serif;
    }
    .font-body {
        font-family: "Quicksand", sans-serif;
    }

    /* ── Dégradé texte ── */
    .text-gradient {
        background: linear-gradient(
            to right,
            hsl(var(--primary)),
            hsl(var(--secondary))
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── Details/Summary ── */
    .review-toggle .review-full {
        display: none;
    }

    .review-toggle[open] .review-short {
         display: none;
    }

    .review-toggle[open] .review-full {
         display: inline;
    }

    /* ── Animations ── */
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out both;
    }
    .animate-fade-in-up-delay-1 {
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }
    .animate-fade-in-up-delay-2 {
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }
    .animate-fade-in-up-delay-3 {
        animation: fadeInUp 0.6s ease-out 0.3s both;
    }
    .animate-fade-in-up-delay-4 {
        animation: fadeInUp 0.6s ease-out 0.4s both;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notif-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes notif-slide-in {
    from { opacity: 0; transform: translateX(calc(100% + 1rem)); }
    to   { opacity: 1; transform: translateX(0); }
}

[data-notification-type-value] {
    animation: notif-slide-in 0.3s ease forwards;
}