/* Prose styles for markdown content */
@layer components {
  .markdown {
    color: var(--color-gray-700) !important;

    & * {
      margin: revert !important;
      padding: revert !important;
    }

    & .markdown-section {
      padding: calc(var(--spacing) * 6) !important;
      margin-bottom: calc(var(--spacing) * 6) !important;
      background-color: white !important;
      border-radius: var(--radius-2xl) !important;
      box-shadow: var(--shadow-sm) !important;
      border: 1px solid var(--color-gray-200) !important;
    }

    /* Syntax highlighting for code blocks */
    & pre.highlight {
      margin-top: calc(var(--spacing) * 5) !important;
      margin-bottom: calc(var(--spacing) * 5) !important;
      padding: calc(var(--spacing) * 4) !important;
      border-radius: var(--radius-md) !important;
      overflow-x: auto !important;
      border: 1px solid var(--color-gray-200) !important;
    }

    & pre.highlight code {
      background-color: transparent !important;
      padding: 0 !important;
      font-size: 0.875rem !important;
      line-height: 1.7 !important;
    }

    & p {
      margin-top: calc(var(--spacing) * 5) !important;
      margin-bottom: calc(var(--spacing) * 5) !important;
    }

    & a {
      color: var(--color-primary-600) !important;
      text-decoration: underline !important;
      font-weight: 500 !important;
    }

    & strong {
      color: var(--color-gray-900) !important;
      font-weight: 600 !important;
    }

    & ol {
      list-style-type: decimal !important;
      margin-top: calc(var(--spacing) * 5) !important;
      margin-bottom: calc(var(--spacing) * 5) !important;
      padding-left: calc(var(--spacing) * 6.5) !important;
    }

    & ul {
      list-style-type: disc !important;
      margin-top: calc(var(--spacing) * 5) !important;
      margin-bottom: calc(var(--spacing) * 5) !important;
      padding-left: calc(var(--spacing) * 6.5) !important;
    }

    & li {
      margin-top: calc(var(--spacing) * 2) !important;
      margin-bottom: calc(var(--spacing) * 2) !important;
      display: list-item !important;
    }

    /* Nested lists */
    & li > ul,
    & li > ol {
      margin-top: calc(var(--spacing) * 2) !important;
      margin-bottom: calc(var(--spacing) * 2) !important;
      padding-left: calc(var(--spacing) * 6.5) !important;
    }

    & li > ul {
      list-style-type: circle !important;
    }

    & li > ol {
      list-style-type: lower-alpha !important;
    }

    & ol > li::marker {
      font-weight: 400 !important;
      color: var(--color-gray-500) !important;
    }

    & ul > li::marker {
      color: var(--color-gray-400) !important;
    }

    & hr {
      opacity: .7!important;
      width: 95%!important;
      border: calc(var(--spacing)*2) solid var(--color-white)!important;
      border-radius: calc(var(--spacing)*2)!important;
      margin-top: calc(var(--spacing) * 12) !important;
      margin-bottom: calc(var(--spacing) * 12) !important;
    }

    & blockquote {
      font-weight: 500 !important;
      font-style: italic !important;
      color: var(--color-gray-900) !important;
      border-left-width: 0.25rem !important;
      border-left-color: var(--color-gray-200) !important;
      margin-top: calc(var(--spacing) * 6.4) !important;
      margin-bottom: calc(var(--spacing) * 6.4) !important;
      padding-left: calc(var(--spacing) * 4) !important;
    }

    & h1 {
      color: var(--color-gray-900) !important;
      font-weight: 800 !important;
      font-size: 2.25em !important;
      margin-top: 0 !important;
      margin-bottom: 0.8888889em !important;
      line-height: 1.1111111 !important;
    }

    & h2 {
      color: var(--color-gray-900) !important;
      font-weight: 700 !important;
      font-size: 1.5em !important;
      margin-top: calc(var(--spacing) * 8) !important;
      margin-bottom: calc(var(--spacing) * 4) !important;
      line-height: 1.3333333 !important;
    }

    & h3 {
      color: var(--color-gray-900) !important;
      font-weight: 600 !important;
      font-size: 1.25em !important;
      margin-top: calc(var(--spacing) * 6.4) !important;
      margin-bottom: calc(var(--spacing) * 2.4) !important;
      line-height: 1.6 !important;
    }

    & h4 {
      color: var(--color-gray-900) !important;
      font-weight: 600 !important;
      margin-top: calc(var(--spacing) * 6) !important;
      margin-bottom: calc(var(--spacing) * 2) !important;
      line-height: 1.5 !important;
    }

    & img {
      margin-top: calc(var(--spacing) * 8) !important;
      margin-bottom: calc(var(--spacing) * 8) !important;
    }

    & code {
      color: var(--color-gray-900) !important;
      font-weight: 600 !important;
      font-size: 0.875em !important;
      background-color: var(--color-gray-100) !important;
      padding: 0.2em 0.4em !important;
      border-radius: var(--radius-sm) !important;
    }

    & pre {
      color: var(--color-gray-200) !important;
      background-color: var(--color-gray-800) !important;
      overflow-x: auto !important;
      font-weight: 400 !important;
      font-size: 0.875em !important;
      line-height: 1.7142857 !important;
      margin-top: calc(var(--spacing) * 6.857) !important;
      margin-bottom: calc(var(--spacing) * 6.857) !important;
      border-radius: var(--radius-md) !important;
      padding: calc(var(--spacing) * 3.428) calc(var(--spacing) * 4.571) !important;
    }

    & pre code {
      background-color: transparent !important;
      padding: 0 !important;
      font-weight: inherit !important;
      color: inherit !important;
      font-size: inherit !important;
      border-radius: 0 !important;
    }

    & table {
      width: 100% !important;
      table-layout: auto !important;
      text-align: left !important;
      margin-top: calc(var(--spacing) * 8) !important;
      margin-bottom: calc(var(--spacing) * 8) !important;
      font-size: 0.875em !important;
      line-height: 1.7142857 !important;
    }

    & thead {
      border-bottom-width: 1px !important;
      border-bottom-color: var(--color-gray-300) !important;
    }

    & thead th {
      color: var(--color-gray-900) !important;
      font-weight: 600 !important;
      vertical-align: bottom !important;
      padding: 0 calc(var(--spacing) * 2.286) calc(var(--spacing) * 2.286) calc(var(--spacing) * 2.286) !important;
    }

    & tbody tr {
      border-bottom-width: 1px !important;
      border-bottom-color: var(--color-gray-200) !important;
    }

    & tbody tr:last-child {
      border-bottom-width: 0 !important;
    }

    & tbody td {
      vertical-align: baseline !important;
      padding: calc(var(--spacing) * 2.286) !important;
    }

    & tfoot {
      border-top-width: 1px !important;
      border-top-color: var(--color-gray-300) !important;
    }

    & tfoot td {
      vertical-align: top !important;
      padding: calc(var(--spacing) * 2.286) !important;
    }
  }
}