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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  
  --color-glass: rgba(255, 255, 255, 0.7);
  --color-glass-border: rgba(0, 0, 0, 0.05);
  --color-accent: #ff4e00;
}

@layer base {
  body {
    @apply bg-[#fdfdfd] text-[#1a1a1a] antialiased overflow-hidden;
    font-family: var(--font-sans);
  }
}

.glass {
  @apply backdrop-blur-xl bg-white/70 border border-black/5 shadow-sm;
}

.glass-dark {
  @apply backdrop-blur-2xl bg-white/80 border border-black/5 shadow-md;
}

.text-glow {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.gradient-bg {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 78, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 122, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.05) 0%, transparent 70%);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-black/10 rounded-full hover:bg-black/20 transition-colors;
}