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

: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
    }

    html:not(.dark) .dark-icon {
        @apply hidden
    }

    .dark .light-icon {
        @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
    }

    .single-swiper-slider .swiper-pagination-bullet-active {
        @apply bg-background
    }

    .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
    }

    .faq-description h2, .faq-description h3 {
        @apply font-bold text-sm text-muted
    }

    .faq-description p {
        @apply font-semibold text-xs text-muted
    }

    .faq-description ul {
        @apply flex flex-col items-start list-inside list-disc
    }

    .faq-description li {
        @apply font-semibold text-xs text-muted
    }
}