@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply font-sans text-gray-700 antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold text-gray-900;
  }
}

@layer utilities {
  .rounded-lg {
    border-radius: 2rem;
  }
}

@layer components {
  .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .cta-gradient {
    background: linear-gradient(calc(var(--gradient-angle) * 1deg), var(--gradient-from), var(--gradient-to));
  }

  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium transition duration-200 ease-in-out;
    border-radius: 2rem;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 hover:scale-105;
  }

  .btn-secondary {
    @apply btn bg-secondary-600 text-white hover:bg-secondary-700 hover:scale-105;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 hover:scale-105;
  }

  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .card {
    @apply bg-white p-6 transition duration-200 hover:shadow-md;
    border-radius: 2rem;
  }

  .nav-link {
    @apply text-gray-600 hover:text-primary-600 font-bold transition duration-200;
  }

  .feature-grid {
    @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
  }

  /* Blog and Syntax Highlighting Styles */
  .highlight {
    @apply text-sm font-mono text-gray-200;
  }

  .highlight table {
    @apply w-full border-separate border-spacing-0;
  }

  .highlight table td {
    @apply p-0;
  }

  .highlight table td:first-child {
    @apply pr-4 text-right select-none text-gray-500 border-r border-gray-700;
  }

  .highlight table td:last-child {
    @apply pl-4 w-full;
  }

  .highlight .k, .highlight .kd {
    @apply text-purple-400 font-semibold;
  }

  .highlight .nf, .highlight .nx {
    @apply text-blue-400;
  }

  .highlight .s, .highlight .s1, .highlight .s2 {
    @apply text-green-400;
  }

  .highlight .mi, .highlight .mf {
    @apply text-orange-400;
  }

  .highlight .c, .highlight .c1, .highlight .cm {
    @apply text-gray-500 italic;
  }

  .highlight .o {
    @apply text-yellow-400;
  }

  .highlight .p {
    @apply text-gray-400;
  }

  .prose {
    @apply max-w-none;
  }

  .prose h1, .prose h2, .prose h3, .prose h4 {
    @apply font-heading font-bold text-gray-900;
  }

  .prose h1 {
    @apply text-4xl mb-8;
  }

  .prose h2 {
    @apply text-3xl mt-12 mb-6;
  }

  .prose h3 {
    @apply text-2xl mt-8 mb-4;
  }

  .prose p {
    @apply text-gray-700 leading-relaxed mb-6;
  }

  .prose a {
    @apply text-primary-600 hover:text-primary-700 no-underline;
  }

  .prose ul, .prose ol {
    @apply my-6 ml-6;
  }

  .prose li {
    @apply mb-2;
  }

  .prose blockquote {
    @apply border-l-4 border-gray-200 pl-4 italic text-gray-700 my-8;
  }

  .prose img {
    @apply rounded-lg shadow-lg my-8;
  }

  .prose code:not(pre code) {
    @apply bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .table-of-contents {
    @apply bg-gray-50 p-6 rounded-lg my-8;
  }

  .table-of-contents nav {
    @apply space-y-2;
  }

  .table-of-contents a {
    @apply text-gray-700 hover:text-primary-600 no-underline;
  }

  .table-of-contents ul {
    @apply list-none ml-4 space-y-2;
  }
}