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

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --primary: 224.3 76.3% 48%;
        --primary-foreground: 0 0% 100%;
        --info: 188.7 94.5% 42.7%;
        --info-foreground: 0 0% 100%;
        --success: 142.1 70.6% 45.3%;
        --success-foreground: 0 0% 100%;
        --warning: 45.4 93.4% 47.5%;
        --warning-foreground: 0 0% 100%;
        --error: 0 84.2% 60.2%;
        --error-foreground: 0 0% 100%;
        --muted: 215 13.8% 34.1%;
        --border: 240 5.9% 90%;
        --radius: 0.75rem;
    }

    .dark {
        --background: 0 0% 0%;
        --foreground: 0 0% 100%;
        --secondary: 240 10% 10%;
        --secondary-foreground: 240 4.8% 95.9%;
        --primary: 224.3 76.3% 48%;
        --primary-foreground: 0 0% 100%;
        --info: 196.4 63.6% 23.7%;
        --info-foreground: 0 0% 100%;
        --success: 142.8 64.2% 24.1%;
        --success-foreground: 0 0% 100%;
        --warning: 35.5 91.7% 32.9%;
        --warning-foreground: 0 0% 100%;
        --error: 0 62.8% 30.6%;
        --error-foreground: 0 0% 100%;
        --muted: 220 8.9% 46.1%;
        --border: 240 3.7% 15.9%;
        --radius: 0.75rem;
    }
}

@layer base {

    html,
    body {
        font-family: "YekanBakh";
    }

    [x-cloak] {
        @apply !hidden
    }

    .swiper .swiper-button-prev,
    .swiper .swiper-button-next {
        @apply flex items-center justify-center w-11 h-11 bg-background border border-border rounded-full text-foreground
    }

        .swiper .swiper-button-prev::after,
        .swiper .swiper-button-next::after {
            @apply text-lg
        }

    .swiper .swiper-button-disabled {
        @apply !opacity-0
    }

    .description h1,
    .description h2 {
        @apply font-black text-xl mb-3
    }

    .description h3,
    .description h4 {
        @apply font-black text-lg mb-3
    }

    .description h5 {
        @apply font-black text-base mb-3
    }

    .description h6 {
        @apply font-black text-sm mb-3
    }

    .description p {
        @apply text-muted text-sm mb-5
    }

    .description img {
        @apply block max-w-full rounded-3xl mx-auto mb-5
    }
}