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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit", sans-serif;
  
  --color-brand: #0d9488; /* Teal 600 */
  --color-brand-light: #2dd4bf; /* Teal 400 */
  --color-brand-dark: #0f766e; /* Teal 700 */
  
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2.5rem;
  
  --spacing-section: 12rem;
}

/* Hide Google Translate Bar */
.goog-te-banner-frame.skiptranslate, 
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
body {
  top: 0 !important;
}
.goog-tooltip {
  display: none !important;
}
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@layer base {
  body {
    @apply text-slate-900 antialiased bg-white font-sans selection:bg-brand/10 selection:text-brand;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight text-slate-950;
  }
}

@layer components {
  .section-padding {
    @apply py-32 sm:py-48;
  }
  .markdown-body {
    @apply mx-auto max-w-3xl text-[18px] text-slate-600 leading-[1.8] font-sans;
  }

  .markdown-body h2 {
    @apply text-3xl sm:text-4xl font-display font-bold mt-16 mb-8 tracking-tight text-slate-900 border-b border-slate-100 pb-4;
  }

  .markdown-body h3 {
    @apply text-2xl font-bold mt-12 mb-6 tracking-tight text-slate-800;
  }

  .markdown-body p {
    @apply mb-6;
  }

  .markdown-body ul, .markdown-body ol {
    @apply mb-8 ml-6 space-y-3;
  }

  .markdown-body blockquote {
    @apply pl-8 border-l-4 border-brand-light italic text-slate-800 text-xl my-12 leading-relaxed bg-slate-50 py-8 pr-8 rounded-r-2xl;
  }

  .markdown-body strong {
    @apply font-semibold text-slate-900;
  }

  .markdown-body a {
    @apply text-brand font-medium underline decoration-brand/30 underline-offset-4 hover:decoration-brand transition-all;
  }

  .markdown-body img {
    @apply rounded-3xl my-12 shadow-md border border-slate-100;
  }

  /* Glass Effects */
  .glass {
    @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-sm;
  }

  .glass-dark {
    @apply bg-slate-950/80 backdrop-blur-xl border border-white/10 shadow-2xl;
  }

  /* Buttons */
  .btn-primary {
    @apply px-6 py-3 bg-brand text-white rounded-xl font-semibold hover:bg-brand-dark transition-all active:scale-95 shadow-sm hover:shadow-teal-200/50;
  }

  .btn-outline {
    @apply px-6 py-3 border border-slate-200 rounded-xl font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95 text-slate-700;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}