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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-tire-dark { background-color: #1A1A1D; }
    .bg-tire-darker { background-color: #0F0F11; }
    .bg-tire-yellow { background-color: #FFC000; }
    .bg-tire-gray { background-color: #2D2D31; }
    
    .text-tire-yellow { color: #FFC000; }
    .text-tire-gray { color: #A0A0A5; }
    
    .border-tire-yellow { border-color: #FFC000; }
    .border-tire-gray { border-color: #2D2D31; }
    
    .font-teko { font-family: 'Teko', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    .btn-tire {
        @apply inline-flex items-center justify-center bg-[#FFC000] text-[#1A1A1D] font-teko text-xl tracking-wide py-3 px-8 hover:bg-white transition-colors duration-300;
    }
    
    .btn-tire-outline {
        @apply inline-flex items-center justify-center border-2 border-[#FFC000] text-[#FFC000] font-teko text-xl tracking-wide py-3 px-8 hover:bg-[#FFC000] hover:text-[#1A1A1D] transition-colors duration-300;
    }
    
    .nav-link {
        @apply text-white hover:text-[#FFC000] font-inter text-sm font-medium transition-colors duration-300;
    }
    
    .nav-link.active {
        @apply text-[#FFC000];
    }
}

/* Custom Gradients */
.bg-tire-gradient {
    background: linear-gradient(135deg, #2D2D31 0%, #1A1A1D 100%);
}

/* Tire Tread Pattern Background */
.bg-tread-pattern {
    background-image: 
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 10px, transparent 10px, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 10px, transparent 10px, transparent 20px);
}