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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;

  --color-primary: #003B5C;
  --color-secondary: #00D1C1;
  --color-accent: #C6F432;
  
  --shadow-warm: 0 20px 50px -12px rgba(0, 59, 92, 0.12);
  --shadow-teal: 0 20px 50px -12px rgba(0, 209, 193, 0.15);
}

@layer base {
  body {
    @apply font-sans selection:bg-secondary/30 text-primary;
  }
  
  h1, h2, h3, h4 {
    @apply font-display tracking-tight;
  }
}

.glass {
  @apply bg-white/70 backdrop-blur-xl border border-white/20;
}

.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-accent;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}