@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-tex-primary { background-color: #F8F9FA; }
    .bg-tex-dark { background-color: #1B263B; }
    .bg-tex-accent { background-color: #415A77; }
    .bg-tex-light { background-color: #E0E1DD; }
    
    .text-tex-primary { color: #1B263B; }
    .text-tex-accent { color: #415A77; }
    .text-tex-muted { color: #778DA9; }
    
    .border-tex-accent { border-color: #415A77; }
    .border-tex-dark { border-color: #1B263B; }
    
    .font-space { font-family: 'Space Grotesk', sans-serif; }
    .font-outfit { font-family: 'Outfit', sans-serif; }
    
    .btn-tex {
        @apply inline-flex items-center justify-center bg-[#1B263B] text-white font-space text-sm font-medium tracking-wide py-4 px-8 hover:bg-[#415A77] transition-all duration-300;
    }
    
    .btn-tex-outline {
        @apply inline-flex items-center justify-center border-2 border-[#1B263B] text-[#1B263B] font-space text-sm font-medium tracking-wide py-3.5 px-8 hover:bg-[#1B263B] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-[#1B263B] hover:text-[#415A77] font-space text-sm font-medium transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1 left-0 w-0 h-[2px] bg-[#415A77] transition-all duration-300;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#415A77];
    }
}

/* Woven Texture pattern for backgrounds */
.bg-woven {
    background-color: #F8F9FA;
    background-image: linear-gradient(45deg, #E0E1DD 25%, transparent 25%, transparent 75%, #E0E1DD 75%, #E0E1DD), 
                      linear-gradient(45deg, #E0E1DD 25%, transparent 25%, transparent 75%, #E0E1DD 75%, #E0E1DD);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.fabric-card {
    @apply relative overflow-hidden bg-white border border-[#E0E1DD] transition-all duration-500 hover:shadow-xl hover:-translate-y-1;
}

.fabric-img-wrapper {
    @apply overflow-hidden;
}

.fabric-img-wrapper img {
    @apply transition-transform duration-700;
}

.fabric-card:hover .fabric-img-wrapper img {
    transform: scale(1.08);
}

.fabric-overlay {
    @apply absolute inset-0 bg-[#1B263B]/80 flex flex-col items-center justify-center opacity-0 transition-opacity duration-300 backdrop-blur-sm;
}

.fabric-card:hover .fabric-overlay {
    @apply opacity-100;
}