@import "tailwindcss";

:root {
  /* Modern AI/Crypto Color Palette - Light Mode */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 262 83% 58%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 262 83% 58%;
  --radius: 0.75rem;
  
  /* Gradient colors */
  --gradient-start: 262 83% 58%;
  --gradient-mid: 280 87% 65%;
  --gradient-end: 310 100% 65%;
  
  /* Glow effects */
  --glow-primary: rgba(139, 92, 246, 0.5);
  --glow-secondary: rgba(236, 72, 153, 0.5);
}

.dark {
  /* Modern AI/Crypto Color Palette - Dark Mode */
  --background: 222 47% 5%;
  --foreground: 210 40% 98%;
  --card: 222 47% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 8%;
  --popover-foreground: 210 40% 98%;
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 262 83% 58%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 262 83% 58%;
  
  /* Gradient colors - More vibrant in dark */
  --gradient-start: 262 83% 58%;
  --gradient-mid: 280 87% 65%;
  --gradient-end: 310 100% 65%;
  
  /* Glow effects */
  --glow-primary: rgba(139, 92, 246, 0.4);
  --glow-secondary: rgba(236, 72, 153, 0.4);
}

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

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(
    135deg,
    hsl(var(--gradient-start)) 0%,
    hsl(var(--gradient-mid)) 50%,
    hsl(var(--gradient-end)) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient Border */
.gradient-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: var(--radius);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  padding: 1px;
  background: linear-gradient(
    135deg,
    hsl(var(--gradient-start)) 0%,
    hsl(var(--gradient-mid)) 50%,
    hsl(var(--gradient-end)) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Glass Effect */
.glass {
  background: hsl(var(--card) / 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Glow Effects */
.glow-primary {
  box-shadow: 0 0 40px var(--glow-primary);
}

.glow-secondary {
  box-shadow: 0 0 40px var(--glow-secondary);
}

/* Animated Background Grid */
.bg-grid {
  background-image: 
    linear-gradient(to right, hsl(var(--border) / 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Animated Gradient Background */
.animated-gradient-bg {
  background: linear-gradient(
    -45deg,
    hsl(var(--background)),
    hsl(var(--secondary)),
    hsl(var(--background)),
    hsl(var(--muted))
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

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

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 20px var(--glow-primary);
    opacity: 1;
  }
  50% { 
    box-shadow: 0 0 40px var(--glow-primary), 0 0 60px var(--glow-secondary);
    opacity: 0.8;
  }
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Button Styles */
.btn-primary {
  background: linear-gradient(
    135deg,
    hsl(var(--gradient-start)) 0%,
    hsl(var(--gradient-mid)) 50%,
    hsl(var(--gradient-end)) 100%
  );
  color: hsl(var(--primary-foreground));
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--glow-primary);
}

.btn-secondary {
  background: transparent;
  color: hsl(var(--foreground));
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid hsl(var(--border));
  cursor: pointer;
}

.btn-secondary:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--primary));
}

/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
  .container { max-width: 1400px; }
}

/* Section Base Styles */
.section {
  position: relative;
  overflow: hidden;
}

/* Card Hover Effect */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .card-hover:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow-primary);
}