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

@theme {
  --color-brand-primary: #10B981; /* Emerald 500 */
  --color-brand-secondary: #059669; /* Emerald 600 */
  --color-bg-dark: #050505;
  --color-surface: #121212;
  --color-border: rgba(255, 255, 255, 0.08);
  
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
}

@layer base {
  body {
    @apply bg-[var(--color-bg-dark)] text-[#E5E5E5] font-sans antialiased selection:bg-[var(--color-brand-primary)] selection:text-black;
  }
}

.glass {
  @apply bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-3xl;
}

.text-gradient {
  @apply bg-clip-text text-transparent bg-linear-to-br from-white to-white/60;
}

.grid-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}