@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');


@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    @apply max-w-7xl max-md:px-4;
  }
  
  /* Responsive grid improvements */
  .gradient-grid {
    @apply grid gap-8 pt-6;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  /* Smooth transitions for interactive elements */
  .interactive-element {
    @apply transition-all duration-300 ease-out;
  }
  
  .interactive-element:hover {
    @apply transform scale-105 shadow-xl;
  }
  
  /* Enhanced focus states */
  .focus-enhanced:focus {
    @apply outline-none ring-2 ring-primary/30 ring-offset-2 ring-offset-background;
  }
  
  /* Mobile-optimized touch targets */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }
}

@layer utilities {
  /* Gradient animation keyframes */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .animate-gradient {
    animation: gradientShift 4s ease infinite;
    background-size: 400% 400%;
  }
  
  /* Search input enhancement */
  .search-enhanced {
    @apply relative transition-all duration-300;
  }
  
  .search-enhanced:focus-within {
    @apply transform scale-105 shadow-lg ring-2 ring-primary/20;
  }
}

html,
body {
  overscroll-behavior: none;
}

:root {
  --background: #000000;
  --foreground: #ffffff;

  --nav: #000000b5;

  --placeholder: #ffffff54;

  --border: #85858558;

  --muted: #1e1e1e;
  --muted-foreground: #a1a1aa;

  --muted: #1e1e1e;
  --muted-foreground: #ffffff;

  --card: #1e1e1e;
  --card-foreground: #ffffff;

  --input: #333333;

  --primary: #ffffff;
  --primary-foreground: #000000;

  --secondary: #1e1e1e;
  --secondary-foreground: #ffffff;

  --accent: #1e1e1e;
  --accent-foreground: #ffffff;

  --destructive: #ff4a4a;
  --destructive-foreground: #ffffff;

  --ring: #333333;

  --radius: 0.5rem;

  /* Additional colors */
  --success: #0070f3;
  --success-foreground: #ffffff;

  --warning: #f5a623;
  --warning-foreground: #000000;

  --info: #56b6c2;
  --info-foreground: #ffffff;

  --highlight: #79ffe1;
  --highlight-foreground: #000000;

  --focus: #888888;

  --selection: #0070f3;
  --selection-foreground: #ffffff;

  --code: #79ffe1;
  --code-background: #1e1e1e;

  --link: #3291ff;
  --link-hover: #0070f3;
  --button: #3291ff;
  --button-border: #ffffff2f;

  --grid-color: rgba(139, 92, 246, 0.025);
  /* Light purple for grid */
}

::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

body {
  background-color: var(--background);
  color: var(--foreground);
    font-family: "Tilt Neon", sans-serif !important;

}

/* For testing  */
.test1 {
  @apply border-2 border-black bg-green-300 text-black;
}

.test2 {
  @apply border-2 border-black bg-red-300 text-black;
}

.test3 {
  @apply border-2 border-black bg-blue-300 text-black;
}

.test4 {
  @apply border-2 border-black bg-yellow-300 text-black;
}




*{
  border-color: var(--border) ;
}
