@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: 260 10% 5%;
  --foreground: 210 40% 98%;
  
  --card: 260 10% 8%;
  --card-foreground: 210 40% 98%;
  
  --popover: 260 10% 5%;
  --popover-foreground: 210 40% 98%;
  
  --primary: 330 80% 60%; /* Pink / Magenta */
  --primary-foreground: 210 40% 98%;
  
  --secondary: 260 10% 12%;
  --secondary-foreground: 210 40% 98%;
  
  --muted: 260 10% 15%;
  --muted-foreground: 215 20.2% 65.1%;
  
  --accent: 260 10% 15%;
  --accent-foreground: 210 40% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 260 10% 15%;
  --input: 260 10% 15%;
  --ring: 330 80% 60%;
  
  --surface: 260 10% 8%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-gradient {
  background: linear-gradient(135deg, #f9a8d4 0%, hsl(var(--primary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shadow-glow {
  box-shadow: 0 0 40px -10px rgba(236, 72, 153, 0.3);
}

.shadow-card {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-track.reverse {
  animation-direction: reverse;
}

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

.bg-page-glow {
  position: relative;
}

.pulse-ring {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}