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

@layer base {
  :root {
    --vylo-dark: #0a0a0f;
    --vylo-darker: #050507;
    --vylo-primary: #00f0ff;
    --vylo-secondary: #ff00ff;
    --vylo-accent: #7b2ff7;
  }

  body {
    @apply bg-vylo-darker text-white font-sans antialiased;
  }

  * {
    @apply border-vylo-dark;
  }
}

@layer components {
  .vylo-card {
    @apply bg-vylo-dark border border-vylo-accent/20 rounded-xl p-6 shadow-lg backdrop-blur-sm;
    @apply hover:border-vylo-accent/40 transition-all duration-300;
  }

  .vylo-button {
    @apply bg-gradient-to-r from-vylo-accent to-vylo-primary text-white font-semibold;
    @apply px-6 py-3 rounded-lg shadow-lg hover:shadow-vylo-accent/50;
    @apply transition-all duration-300 hover:scale-105;
  }

  .vylo-input {
    @apply bg-vylo-dark border border-vylo-accent/30 rounded-lg px-4 py-3 text-white;
    @apply focus:border-vylo-primary focus:ring-2 focus:ring-vylo-primary/50;
    @apply transition-all duration-200;
  }

  .vylo-glow {
    @apply shadow-[0_0_15px_rgba(123,47,247,0.5)];
  }

  .vylo-text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-vylo-accent to-vylo-primary;
  }
}

@layer utilities {
  .text-glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
  }

  @keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--vylo-darker);
}

::-webkit-scrollbar-thumb {
  background: var(--vylo-accent);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vylo-primary);
}