@import "tailwindcss";

@plugin "@tailwindcss/typography";

@layer base {
  :root {
    --sidebarcolor: #e6fdfa; /* Custom teal-100/50 solid equivalent */
  }

  body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
}

@layer components {
  .markdown-content h1 {
    @apply text-3xl font-bold mb-6 mt-8 text-gray-900;
  }
  .markdown-content h2 {
    @apply text-2xl font-semibold mb-4 mt-6 text-gray-800;
  }
  .markdown-content h3 {
    @apply text-xl font-semibold mb-3 mt-5 text-gray-800;
  }
  .markdown-content p {
    @apply mb-4 leading-relaxed text-gray-700;
  }
  .markdown-content ul {
    @apply mb-4 ml-6 list-disc;
  }
  .markdown-content li {
    @apply mb-2 text-gray-700;
  }
  .markdown-content strong {
    @apply font-semibold text-gray-900;
  }
  
  /* What's New notification content styling */
  .whats-new-content h1 {
    @apply text-xl font-bold mb-4 text-gray-900;
  }
  .whats-new-content h2 {
    @apply text-lg font-semibold mb-3 text-gray-800;
  }
  .whats-new-content h3 {
    @apply text-base font-semibold mb-2 text-blue-800;
  }
  .whats-new-content p {
    @apply mb-3 leading-relaxed text-gray-700;
  }
  .whats-new-content ul {
    @apply mb-3 ml-4 list-disc text-gray-700;
  }
  .whats-new-content li {
    @apply mb-1 text-gray-700;
  }
  .whats-new-content strong {
    @apply font-semibold text-gray-900;
  }
  .whats-new-content hr {
    @apply border-gray-300 my-4;
  }
}

/* Custom sidebar background */
.bg-sidebarcolor {
  background-color: var(--sidebarcolor);
}

.sidebar-link {
  @apply flex items-center px-2 py-1 text-cyan-400 hover:text-cyan-300 hover:bg-slate-700 rounded-lg w-full cursor-pointer;
}

.sidebar-sublink {
  @apply block px-2 py-1 text-sm text-slate-300 hover:text-white hover:bg-slate-700 rounded transition-colors;
}