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

:root {
  --background: #ffffff;
  --foreground: #171717;
  --gradient-purple: #a855f7; /* from-purple-500 */
  --gradient-violet: #8b5cf6; /* via-violet-500 */
  --gradient-pink: #ec4899; /* to-pink-500 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 0.4rem; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent; /* Track background */
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--gradient-purple),
    var(--gradient-violet),
    var(--gradient-pink)
  ); /* Custom gradient */
  border-radius: 0.4rem; /* Optional: Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    var(--gradient-purple),
    var(--gradient-pink)
  ); /* Change on hover */
}

::-moz-scrollbar {
  width: 0.4rem; /* Width for Firefox */
}

::-moz-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--gradient-purple),
    var(--gradient-violet),
    var(--gradient-pink)
  );
  border-radius: 0.4rem;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .purple-pink-gradient {
    position: relative; /* 'relative' */
    background-clip: text; /* 'bg-clip-text' */
    color: transparent; /* 'text-transparent' */
    background-repeat: no-repeat; /* 'bg-no-repeat' */
    background-image: linear-gradient(to right, #a855f7, #8b5cf6, #ec4899);
  }
  /* Glassmorphism Card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Glow Button */
.glow-btn {
  background-color: #1a202c;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  color: white;
  text-shadow: 0 0 10px #a020f0; /* Bright purple text glow */
  box-shadow: 0 0 20px rgba(160, 32, 240, 0.8), 0 0 30px rgba(160, 32, 240, 0.5); /* Purple glow */
  transition: box-shadow 0.3s ease-in-out;
}

.glow-btn:hover {
  box-shadow: 0 0 30px rgb(195, 98, 255), 0 0 40px rgba(160, 32, 240, 1); /* Stronger purple glow on hover */
}



}
