@import "tailwindcss";

html, body {
  height: 100%;
}

@layer components {
  .docs-container {
    @apply mx-auto w-full max-w-5xl px-6;
  }

  .docs-panel {
    @apply overflow-hidden rounded-3xl bg-white/95 shadow-2xl ring-1 ring-slate-200/60 backdrop-blur;
  }

  .docs-cta {
    @apply inline-flex items-center rounded-full bg-white/10 px-5 py-2 text-sm font-semibold uppercase tracking-wide;
    @apply text-slate-100 transition hover:bg-white/20;
  }

  .docs-markdown {
    @apply space-y-8 px-8 py-12 text-base leading-relaxed text-slate-700 sm:px-12 sm:py-16;
  }

  .docs-markdown h1,
  .docs-markdown h2,
  .docs-markdown h3 {
    @apply font-semibold text-slate-900;
  }

  .docs-markdown h1 {
    @apply text-4xl;
  }

  .docs-markdown h2 {
    @apply text-3xl mt-12;
  }

  .docs-markdown h3 {
    @apply text-2xl mt-8;
  }

  .docs-markdown p {
    @apply text-lg;
  }

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

  .docs-markdown a {
    @apply font-semibold text-sky-600 underline decoration-2 underline-offset-4 transition hover:text-sky-500;
  }

  .docs-markdown ul {
    @apply list-disc space-y-2 pl-6;
  }

  .docs-markdown ol {
    @apply list-decimal space-y-2 pl-6;
  }

  .docs-markdown li {
    @apply text-lg leading-relaxed;
  }

  .docs-markdown code {
    @apply rounded-md bg-slate-900/90 px-2 py-1 font-mono text-sm text-slate-100;
  }

  .docs-markdown pre {
    @apply overflow-x-auto rounded-2xl bg-slate-900 p-6 text-sm text-slate-100 shadow-inner;
  }

  .docs-markdown pre code {
    @apply bg-transparent p-0 text-[0.95rem];
  }

  .docs-markdown table {
    @apply w-full table-auto divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 text-left text-sm;
  }

  .docs-markdown thead {
    @apply bg-slate-50 font-semibold text-slate-600;
  }

  .docs-markdown th,
  .docs-markdown td {
    @apply px-4 py-3 align-top;
  }

  .docs-markdown blockquote {
    @apply border-l-4 border-sky-500/70 bg-sky-50/60 px-6 py-4 text-lg italic text-slate-700;
  }

  .docs-markdown hr {
    @apply my-12 border-t border-slate-200;
  }
}