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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Outfit", ui-serif, Georgia, serif;

  /* Clinical Ocean Blue / Cyan */
  --color-primary-50: #f0fdfd;
  --color-primary-100: #cffafe;
  --color-primary-200: #a5f3fc;
  --color-primary-300: #67e8f9;
  --color-primary-400: #22d3ee;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #155e75;
  --color-primary-900: #164e63;
  --color-primary-950: #083344;

  /* Clean minimal grays replacing warm sand */
  --color-sand-50: #ffffff;
  --color-sand-100: #f8fafc;
  --color-sand-200: #f1f5f9;
  --color-sand-300: #e2e8f0;
  --color-sand-400: #cbd5e1;
  --color-sand-500: #94a3b8;
  
  --color-stone-900: #0f172a;
  --color-stone-800: #1e293b;
  --color-stone-50: #f8fafc;
}

@layer base {
  body {
    @apply font-sans bg-stone-50 text-stone-900 antialiased selection:bg-primary-200 selection:text-primary-900;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif tracking-tight text-stone-900;
  }
}

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

@layer components {
  .blog-content p {
    @apply text-lg text-stone-600 font-light leading-relaxed mb-6;
  }
  .blog-content h2 {
    @apply text-3xl font-serif text-stone-900 mt-12 mb-6;
  }
  .blog-content h3 {
    @apply text-2xl font-serif text-stone-900 mt-8 mb-4;
  }
  .blog-content blockquote {
    @apply border-l-4 border-primary-500 bg-sand-200/50 px-8 py-6 rounded-r-2xl italic font-serif text-xl text-stone-800 my-10 shadow-sm;
  }
}