@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-tailor-navy { background-color: #0f172a; }
    .bg-tailor-linen { background-color: #FAF9F6; }
    .bg-tailor-gold { background-color: #d4af37; }
    
    .text-tailor-navy { color: #0f172a; }
    .text-tailor-gold { color: #d4af37; }
    .text-tailor-linen { color: #FAF9F6; }
    
    .border-tailor-gold { border-color: #d4af37; }
    .border-tailor-navy { border-color: #0f172a; }
    
    .font-serif-tailor { font-family: 'Cormorant Garamond', serif; }
    .font-sans-tailor { font-family: 'Lato', sans-serif; }
    
    .btn-tailor {
        @apply inline-flex items-center justify-center bg-[#0f172a] text-[#FAF9F6] font-sans-tailor uppercase tracking-[0.2em] text-xs py-4 px-10 hover:bg-[#d4af37] transition-all duration-500 border border-[#0f172a] hover:border-[#d4af37];
    }
    
    .btn-tailor-outline {
        @apply inline-flex items-center justify-center border border-[#d4af37] text-[#d4af37] font-sans-tailor uppercase tracking-[0.2em] text-xs py-4 px-10 hover:bg-[#d4af37] hover:text-[#0f172a] transition-all duration-500;
    }
    
    .nav-link {
        @apply text-slate-400 hover:text-[#d4af37] font-sans-tailor text-xs uppercase tracking-[0.15em] transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-2 left-0 w-0 h-px bg-[#d4af37] transition-all duration-500;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#FAF9F6];
    }
    
    /* Subtle thread pattern background */
    .bg-pattern-thread {
        background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%, #1e293b), 
                          linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%, #1e293b);
        background-size: 4px 4px;
        background-position: 0 0, 2px 2px;
    }
}

.stitched-border {
    position: relative;
}
.stitched-border::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px dashed rgba(212, 175, 55, 0.4);
    pointer-events: none;
    z-index: 10;
}