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

/* Regular */
@font-face {
    font-family: "inter";
    src: url("../fonts/ltr/inter/regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: "inter";
    src: url("../fonts/ltr/inter/medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Semi Bold */
@font-face {
    font-family: "inter";
    src: url("../fonts/ltr/inter/semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: "inter";
    src: url("../fonts/ltr/inter/bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Sections */
.te-section {
    @apply py-section-default-mobile md:py-section-default;
}

.te-section-small {
    @apply py-section-sm-mobile md:py-section-sm;
}

.te-section-medium {
    @apply py-section-md-mobile md:py-section-md;
}

.te-section-large {
    @apply py-section-lg-mobile md:py-section-lg;
}

/* Add this to your main CSS file */
html.no-transition,
html.no-transition *,
html.no-transition *:before,
html.no-transition *:after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

@layer components {
    .color-option {
        @apply w-8 h-8 rounded-full border-2 shadow-md 
           transition-all duration-200 ease-in-out hover:scale-110;
    }

    .color-option-default {
        @apply border-gray-300 hover:border-primary-300;
    }

    .color-option-active {
        @apply border-primary-500;
    }

    .size-option {
        @apply px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out 
           rounded-md border;
    }

    .size-option-default {
        @apply text-gray-700 dark:text-gray-300 
           bg-white dark:bg-gray-700 
           border-gray-300 dark:border-gray-600 
           hover:border-primary-300 
           focus:outline-none focus:ring-2 focus:ring-primary-500;
    }

    .size-option-active {
        @apply text-white bg-primary-600 border-primary-600;
    }

    .product-item .color-option {
        @apply w-4 h-4;
    }
    .product-item .size-option {
        @apply px-2 py-1 text-xs;
    }
}
