@plugin '@tailwindcss/typography';

/* html {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 300;
} */

@layer base {
  .prose {
    @apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;
  }

  .prose a {
    @apply break-words hover:!text-accent;
  }

  .prose a {
    color: #d26878 !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    word-break: break-all;
  }

  .prose thead th:first-child,
  tbody td:first-child,
  tfoot td:first-child {
    padding-inline-start: 0.5714286em !important;
  }

  .prose h2#table-of-contents {
    @apply mb-2;
  }

  .prose details {
    @apply inline-block cursor-pointer text-foreground select-none;
  }

  .prose summary {
    @apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
  }

  .prose h2#table-of-contents+p {
    @apply hidden;
  }

  /* ===== Code Blocks & Syntax Highlighting ===== */
  pre:has(code) {
    @apply border border-border;
  }

  code,
  blockquote {
    word-wrap: break-word;
  }

  pre>code {
    white-space: pre;
  }

  /* Apply Dark Theme (if multi-theme specified) */
  html[data-theme="dark"] pre:has(code),
  html[data-theme="dark"] pre:has(code) span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}