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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-pack-green { background-color: #2d4a22; }
    .bg-pack-dark { background-color: #1c2819; }
    .bg-pack-kraft { background-color: #d4b895; }
    .bg-pack-light { background-color: #f7f7f7; }
    
    .text-pack-green { color: #2d4a22; }
    .text-pack-dark { color: #1c2819; }
    .text-pack-kraft { color: #d4b895; }
    
    .border-pack-green { border-color: #2d4a22; }
    .border-pack-kraft { border-color: #d4b895; }
    
    .btn-pack {
        @apply inline-flex items-center justify-center bg-[#2d4a22] text-white font-sans font-semibold px-8 py-3 rounded hover:bg-[#1c2819] transition-colors duration-300;
    }
    
    .btn-pack-outline {
        @apply inline-flex items-center justify-center border-2 border-[#2d4a22] text-[#2d4a22] font-sans font-semibold px-8 py-3 rounded hover:bg-[#2d4a22] hover:text-white transition-colors duration-300;
    }
    
    .nav-link {
        @apply text-[#1c2819] hover:text-[#2d4a22] font-sans font-medium text-sm transition-colors duration-300 relative;
    }
    .nav-link.active {
        @apply text-[#2d4a22];
    }
    .nav-link::after {
        content: '';
        @apply absolute w-full h-[2px] bg-[#2d4a22] bottom-[-4px] left-0 scale-x-0 origin-right transition-transform duration-300;
    }
    .nav-link:hover::after, .nav-link.active::after {
        @apply scale-x-100 origin-left;
    }

    .pack-card {
        @apply bg-white p-8 rounded-lg shadow-sm border border-gray-100 hover:shadow-xl hover:border-[#d4b895] transition-all duration-300;
    }
}