src/client/index.css

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

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

:root {
  /* Dark mode default */
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;

  --card: 240 10% 6%;
  --card-foreground: 0 0% 98%;

  --popover: 240 10% 6%;
  --popover-foreground: 0 0% 98%;

  --primary: 250 100% 65%;
  --primary-foreground: 0 0% 100%;

  --secondary: 240 5% 15%;
  --secondary-foreground: 0 0% 98%;

  --muted: 240 5% 15%;
  --muted-foreground: 240 5% 65%;

  --accent: 250 100% 65%;
  --accent-foreground: 0 0% 100%;

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

  --border: 240 5% 15%;
  --input: 240 5% 15%;
  --ring: 250 100% 65%;

  --radius: 0.75rem;

  --font-sans: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased selection:bg-primary/20 selection:text-primary;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight;
  }
}

/* Custom Utilities */
.glass {
  @apply bg-background/60 backdrop-blur-xl border border-white/5;
}

.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-white via-white/80 to-white/60;
}

.text-gradient-primary {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-400 to-pink-500;
}

.card-hover {
  @apply transition-all duration-300 hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-muted rounded-full hover:bg-muted-foreground/50 transition-colors;
}

/* Syntax Highlighting overrides */
code[class*="language-"],
pre[class*="language-"] {
  @apply text-sm font-mono !bg-transparent !text-sm;
  text-shadow: none !important;
}