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

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

@layer base {
  :root {
    --background: 220 25% 6%;
    --foreground: 210 20% 95%;

    --card: 220 20% 10%;
    --card-foreground: 210 20% 95%;

    --popover: 220 20% 10%;
    --popover-foreground: 210 20% 95%;

    --primary: 165 100% 42%;
    --primary-foreground: 220 25% 6%;

    --secondary: 220 18% 14%;
    --secondary-foreground: 210 20% 90%;

    --muted: 220 15% 16%;
    --muted-foreground: 215 15% 55%;

    --accent: 185 80% 50%;
    --accent-foreground: 220 25% 6%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 165 100% 42%;

    --radius: 0.75rem;

    --sidebar-background: 220 20% 8%;
    --sidebar-foreground: 210 20% 90%;
    --sidebar-primary: 165 100% 42%;
    --sidebar-primary-foreground: 220 25% 6%;
    --sidebar-accent: 220 18% 14%;
    --sidebar-accent-foreground: 210 20% 90%;
    --sidebar-border: 220 15% 18%;
    --sidebar-ring: 165 100% 42%;

    /* Custom tokens */
    --glow: 165 100% 42%;
    --glow-cyan: 185 80% 50%;
    --surface-glass: 220 20% 10%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

@layer utilities {
  .glass-card {
    @apply bg-card/60 backdrop-blur-xl border border-border/50 rounded-xl;
  }

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

  .gradient-border {
    @apply relative;
    background: linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
                linear-gradient(135deg, hsl(var(--primary)), hsl(var(--glow-cyan))) border-box;
    border: 1px solid transparent;
  }

  .glow-primary {
    box-shadow: 0 0 30px -5px hsl(var(--primary) / 0.4);
  }

  .glow-sm {
    box-shadow: 0 0 15px -3px hsl(var(--primary) / 0.3);
  }

  .section-padding {
    @apply py-20 md:py-28 px-4;
  }

  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }

  .text-gradient-hero {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--primary)) 50%, hsl(var(--glow-cyan)) 100%);
  }

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

  .animate-scroll-left {
    animation: scroll-left 30s linear infinite;
  }

  .animate-count-up {
    animation: count-up 2s ease-out forwards;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px -5px hsl(var(--primary) / 0.3); }
  50% { box-shadow: 0 0 40px -5px hsl(var(--primary) / 0.6); }
}

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

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

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5);
}