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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-recycle-primary { background-color: #16A34A; } /* Leaf Green */
    .bg-recycle-secondary { background-color: #14532D; } /* Dark Forest Green */
    .bg-recycle-accent { background-color: #84CC16; } /* Lime Green */
    .bg-recycle-dark { background-color: #111827; } /* Almost Black */
    .bg-recycle-light { background-color: #F8FAFC; }
    
    .text-recycle-primary { color: #16A34A; }
    .text-recycle-secondary { color: #14532D; }
    .text-recycle-accent { color: #84CC16; }
    
    .font-manrope { font-family: 'Manrope', sans-serif; }
}

body {
    font-family: 'Manrope', sans-serif;
    color: #475569;
    background-color: #FFFFFF;
}

.recycle-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#16A34A] text-white font-bold rounded hover:bg-[#14532D] transition-all duration-300 shadow-[4px_4px_0px_#14532D] hover:translate-y-1 hover:shadow-none;
}

.recycle-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#16A34A] text-[#16A34A] font-bold rounded hover:bg-[#16A34A] hover:text-white transition-all duration-300;
}

/* Industrial Pattern Background */
.industrial-pattern {
    background-color: #F8FAFC;
    background-image: radial-gradient(#94A3B8 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Recycling Arrow Animation */
.recycle-spin {
    animation: spin 8s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Solid Industrial Card */
.industrial-card {
    @apply bg-white p-8 border-2 border-gray-100 hover:border-[#16A34A] transition-all duration-300 relative overflow-hidden;
    box-shadow: 6px 6px 0px rgba(22, 163, 74, 0.1);
}

.industrial-card:hover {
    box-shadow: 6px 6px 0px rgba(22, 163, 74, 1);
    transform: translate(-2px, -2px);
}

.industrial-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 50%, #16A34A 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.industrial-card:hover::after {
    opacity: 1;
}