@import "tailwindcss";

:root {
  /* Premium Dark Theme Palette */
  --background: 260 30% 4%;
  /* #0a050e - Deepest Violet/Black */
  --foreground: 260 10% 98%;
  /* #fbfafc */

  --card: 260 25% 8%;
  /* #120d18 */
  --card-foreground: 260 10% 98%;

  --popover: 260 25% 8%;
  --popover-foreground: 260 10% 98%;

  --primary: 265 89% 66%;
  /* #9d4edd - Vibrant Violet */
  --primary-foreground: 0 0% 100%;

  --secondary: 260 20% 15%;
  --secondary-foreground: 260 10% 98%;

  --muted: 260 20% 15%;
  --muted-foreground: 260 10% 65%;

  --accent: 265 89% 66%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 260 10% 98%;

  --border: 260 20% 15%;
  --input: 260 20% 15%;
  --ring: 265 89% 66%;

  --radius: 1rem;
}



body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(157, 78, 221, 0.15), transparent 40%),
    radial-gradient(circle at 0% 50%, rgba(157, 78, 221, 0.05), transparent 30%),
    radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.05), transparent 30%);
  background-attachment: fixed;
}

.glass {
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.glass-hover:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transition: all 300ms;
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, white, rgb(233, 213, 255), rgb(192, 132, 252));
}

.text-gradient-primary {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, rgb(192, 132, 252), rgb(59, 130, 246));
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}