@theme {
    --font-display: 'iranyekan';
}

@theme {
    --color-bg: #fff;
    --color-fg: #1E293B;
    --color-fg-2: #475569;
    --color-primary: #0284C7;
    --color-primary-dark: #016293;
    --color-primary-fg-1: #fff;
    --color-primary-light: #eff6ff;
    --color-placeholder: #64748B;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-disabled: #E2E8F0;
    --color-disabled-fg: #94A3B8;

    --color-border: #E2E8F0;

    --color-neutral-50: #fafafa;
    --color-neutral-100: #F5F5F5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-400: #a1a1a1;
    --color-red-500: #EF4444;
    --color-red-800: #9f0712;
    --color-white: #fff;
    --color-slate-50: #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-red-100: #FEE2E2;
    --color-green-100: #DCFCE7;
    --color-green-500: #22C55E;
    --color-blue-600: #155dfc;
    --color-yellow-400: #fdc700;

    --color-error: #EF4444;

    --radius-3xl: 1.25rem;

    /* Social Media */
    --instagram: #EF4444;
    --instagram-light: #FEF2F2;
    --telegram: #3B82F6;
    --telegram-light: #EFF6FF;
    --whatsapp: #16A34A;
    --whatsapp-light: #F0FDF4;
}

@theme {
    --text-h1: 1.75rem;
    --text-h1--line-height: 1.7;
    --text-h1--font-weight: 600;

    --text-h2: 1.5rem;
    --text-h2--line-height: 1.8;
    --text-h2--font-weight: 600;

    --text-h3: 1.25rem;
    --text-h3--line-height: 2;
    --text-h3--font-weight: 600;

    --text-body: 1rem;
    --text-body--line-height: 2;
    --text-body--font-weight: 400;

    --text-body-s: 0.875rem;
    --text-body-s--line-height: 2;
    --text-body-s--font-weight: 400;

    --text-detail: 0.75rem;
    --text-detail--line-height: 2;
    --text-detail--font-weight: 400;

    --shadow-drawer: 0px -2px 4px 0px #00000014;
}

@layer components {
    body {
        @apply font-display bg-bg text-fg text-body;
        @apply data-[scroll=false]:overflow-hidden;
    }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    input, textarea {
        @apply focus-visible:outline-primary;
    }

    select {
        @apply appearance-none;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
}

@theme {
    --animate-megamenu: megamenu 150ms ease-in-out;
    --animate-megamenu-mobile: megamenu-mobile 500ms ease-out;
    --animate-dropdown: dropdown 150ms ease-in-out;
    --animate-wiggle: wiggle 300ms ease-in-out;
    --animate-overlay: overlay 300ms forwards ease-in-out;
    --animate-detail: detail 300ms forwards ease-in-out;

    @keyframes megamenu {
        0% {
            transform-origin: top;
            transform: translateY(-20px) scaleY(0.9);
            opacity: 0.5;
        }
        100% {
            transform-origin: top;
            transform: translateY(0) scaleY(1);
            opacity: 1;
        }
    }

    @keyframes megamenu-mobile {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }

    @keyframes dropdown {
        0% {
            transform-origin: top;
            transform: translateY(-10px) scaleY(0.9);
            opacity: 0.5;
        }
        100% {
            transform-origin: top;
            transform: translateY(0) scaleY(1);
            opacity: 1;
        }
    }

    @keyframes wiggle {
        0% {
            transform-origin: center;
            transform: rotate(0deg);
        }
        25% {
            transform-origin: center;
            transform: rotate(15deg);
        }
        75% {
            transform-origin: center;
            transform: rotate(-15deg);
        }
        100% {
            transform-origin: center;
            transform: rotate(0deg);
        }
    }

    @keyframes overlay {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            display: none;
            visibility: hidden;
        }
    }

    @keyframes detail {
        0%{
            overflow-y: hidden;
        }
        100% {
            overflow-y: auto;
        }
    }
}

:root {
    --logo-height: 40px;
    --megamenu-height: 350px;

    --product-s-width: 80px;
    --product-s-height: 80px;

    --product-md-width: 136px;
    --product-md-height: 136px;

    --product-lg-width: 173px;
    --product-lg-height: 173px;

    --category-l-width: 128px;
    --category-l-height: 128px;

    --post-m-width: 100px;
    --post-m-height: 100px;

    --footer-certificate-height: 70px;
    --footer-certificate-width: 70px;

    --mini-cart-width: 500px;
    --mini-cart-height: 400px;
}

@media (max-width: 1024px) {
    :root {
        --mini-cart-width: min(calc(100dvw - 50px), 400px);
    }
}