@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "IBM Plex Serif", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;

  --color-light-bg: #FFFFFF;
  --color-light-surface: #F8FAFC;
  --color-light-border: rgba(0, 0, 0, 0.08);
  --color-light-card: #FFFFFF;
  
  --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-typing: typing 2s steps(40, end);
}

@layer base {
  body {
    @apply bg-white text-slate-900 antialiased selection:bg-brand-500/20 selection:text-brand-900;
  }
}

@layer components {
  .glass-nav {
    @apply bg-white/80 backdrop-blur-xl border-b border-slate-200;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-slate-950 via-slate-800 to-slate-700;
  }

  .grid-bg {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  }

  .glow-bg {
    @apply absolute inset-0 pointer-events-none overflow-hidden;
    background: 
      radial-gradient(circle at 50% -20%, rgba(56, 189, 248, 0.08), transparent 70%),
      radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.03), transparent 50%),
      radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.03), transparent 50%);
  }

  .card-glow {
    @apply relative overflow-hidden border border-slate-200 bg-white hover:border-slate-300 transition-all duration-300 shadow-sm hover:shadow-md;
  }

  .card-glow::after {
    content: "";
    @apply absolute inset-0 opacity-0 transition-opacity duration-500 pointer-events-none;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 0, 0, 0.02), transparent 40%);
  }

  .card-glow:hover::after {
    @apply opacity-100;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}