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

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

@layer base {
  :root {
    --background: 0 0% 2%;
    --foreground: 0 0% 100%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 100%;
    --primary: 216 100% 67%;
    --primary-foreground: 0 0% 2%;
    --secondary: 0 0% 11%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 11%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 100% 70%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 216 100% 67%;
    --radius: 0.625rem;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-[#5b9aff] to-[#8fb8ff];
  }

  .text-gradient-orange {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-[#ff8c42] to-[#ff6b6b];
  }

  .glow-blue {
    box-shadow: 0 0 15px rgba(91, 154, 255, 0.4);
  }

  .glow-blue-strong {
    box-shadow: 0 0 25px rgba(91, 154, 255, 0.6);
  }

  .glass-card {
    @apply bg-white/[0.03] border border-white/10 backdrop-blur-sm;
  }

  .glass-nav {
    @apply backdrop-blur-xl bg-[#050505]/80 border-b border-white/5;
  }

  /* Responsive text utilities */
  .hero-title {
    @apply text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight;
  }

  .section-title {
    @apply text-2xl sm:text-3xl md:text-4xl font-bold;
  }

  .section-subtitle {
    @apply text-sm sm:text-base;
  }
}

html {
  scroll-behavior: smooth;
}

/* Performance: scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: #1c1c1c;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5b9aff;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile tap highlight removal */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* Image loading placeholder */
img {
  background-color: #0a0a0a;
}