@theme {
  --color-primary: #4f46e5;
  --color-primary-hover: #6366f1;
  --color-secondary: #2563eb;
  --color-secondary-hover: #0ea5e9;
  --color-accent: #ff6b35;
  --color-accent-hover: #f7931e;
  --color-footer-bg: #151b2c;
  --color-text-dark: #0f172a;
  --color-text-light: #64748b;
  
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}

/* Custom base styles */
@layer base {
  body {
    @apply font-sans text-text-dark bg-slate-50 antialiased;
  }
}

/* Custom utilities */
@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
  }
  
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-primary to-secondary;
  }
  
  .bg-gradient-accent {
    @apply bg-gradient-to-r from-accent to-accent-hover;
  }
}

/* Specific component styles that might need vanilla CSS for complex hover states */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-sidebar {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sidebar.active {
  transform: translateX(0);
}

.overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Injected JIT classes for accessibility fixes */
.text-\[\#0369a1\] { color: #0369a1 !important; }
.bg-\[\#0369a1\] { background-color: #0369a1 !important; }
.border-\[\#0369a1\] { border-color: #0369a1 !important; }

.hover\:text-\[\#0369a1\]:hover { color: #0369a1 !important; }
.hover\:bg-\[\#0369a1\]:hover { background-color: #0369a1 !important; }
.hover\:border-\[\#0369a1\]:hover { border-color: #0369a1 !important; }

.group:hover .group-hover\:text-\[\#0369a1\] { color: #0369a1 !important; }
.group:hover .group-hover\:bg-\[\#0369a1\] { background-color: #0369a1 !important; }

.group\/link:hover .group-hover\/link\:bg-\[\#0369a1\] { background-color: #0369a1 !important; }
.group\/link:hover .group-hover\/link\:text-\[\#0369a1\] { color: #0369a1 !important; }

/* Injected 700 series tailwind colors in case they weren't compiled */
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-green-700 { background-color: #15803d !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.bg-red-700 { background-color: #b91c1c !important; }
.text-slate-500 { color: #64748b !important; }

/* Logo Slider */
.logo-slider-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
  padding: 10px 0;
}
.logo-slider-wrapper::before,
.logo-slider-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.logo-slider-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.logo-slider-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.logo-track {
  display: inline-flex;
  gap: 3rem;
  align-items: center;
  animation: marquee 20s linear infinite;
}
.logo-track:hover {
  animation-play-state: paused;
}
@media (min-width: 768px) {
  .logo-track {
    gap: 5rem;
  }
  .logo-slider-wrapper::before,
  .logo-slider-wrapper::after {
    width: 150px;
  }
}


/* Injected missing Tailwind classes that were not compiled */
@media (min-width: 640px) {
  .sm\\:block { display: block !important; }
  .sm\\:hidden { display: none !important; }
}
@media (min-width: 768px) {
  .md\\:block { display: block !important; }
  .md\\:hidden { display: none !important; }
  .md\\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
}
.h-8 { height: 2rem !important; width: auto !important; }

/* Fix Z-Index issue on cart page */
#navbar { z-index: 9999 !important; }
.mega-menu { z-index: 10000 !important; }