// Prose utility for rich typography (v1 compatible)

// Extracted prose rules into a Less mixin so variants can include base styles
.prose-mixin() {
  line-height: var(--leading-normal);
  max-width: 65ch;

  h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-6);
    margin-top: var(--spacing-8);
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-4);
    margin-top: var(--spacing-8);
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-4);
    margin-top: var(--spacing-6);
  }

  h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-2);
    margin-top: var(--spacing-6);
  }

  h5, h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-2);
    margin-top: var(--spacing-4);
  }

  p {
    margin-bottom: var(--spacing-6);

    + p {
      margin-top: calc(-1 * var(--spacing-2));
    }
  }

  ul, ol {
    margin-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

  li {
    margin-bottom: var(--spacing-2);

    ul, ol {
      margin-top: var(--spacing-2);
      margin-bottom: var(--spacing-2);
    }
  }

  blockquote {
    border-left: 4px solid hsl(var(--border));
    padding-left: var(--spacing-4);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-6);
    font-style: italic;
    color: hsl(var(--muted-foreground));
  }

  code {
    background-color: hsl(var(--muted));
    color: hsl(var(--destructive));
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: var(--font-mono);
  }

  pre {
    margin-bottom: var(--spacing-6);

    code {
      display: block;
      background-color: hsl(var(--foreground));
      color: hsl(var(--background));
      padding: var(--spacing-6);
      border-radius: var(--radius-md);
      overflow-x: auto;
      font-size: 0.875em;
    }
  }

  hr {
    border: 0;
    height: 1px;
    background-color: hsl(var(--border));
    margin: var(--spacing-8) 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-6);

    th {
      border-bottom: 2px solid hsl(var(--border));
      padding: var(--spacing-2) var(--spacing-4);
      text-align: left;
      font-weight: var(--font-semibold);
    }

    td {
      border-bottom: 1px solid hsl(var(--border));
      padding: var(--spacing-2) var(--spacing-4);
    }

    tr:last-child td {
      border-bottom: none;
    }
  }

  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--transition-base);

    &:hover {
      opacity: 0.8;
    }
  }

  img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-6);
    border-radius: var(--radius-sm);
  }

  figure {
    margin: 0 0 var(--spacing-6) 0;

    figcaption {
      font-size: var(--text-sm);
      color: hsl(var(--muted-foreground));
      margin-top: var(--spacing-2);
      text-align: center;
    }
  }
}

/**
 * @section Prose Typography
 */

/** @public Rich typography for article content */
.prose { .prose-mixin(); }

/** @public Small prose variant */
.prose-sm {
  .prose-mixin();
  font-size: var(--text-sm);

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-base); }
}

/** @public Large prose variant */
.prose-lg {
  .prose-mixin();
  font-size: var(--text-lg);

  h1 { font-size: calc(var(--text-4xl) * 1.1); }
  h2 { font-size: calc(var(--text-xl) * 1.1); }
  h3 { font-size: calc(var(--text-lg) * 1.1); }
}

/** @public Prose layout - max-width constraint */
.prose-layout {
  max-width: 65ch;
}

/** @public Reset prose styles */
.no-prose {
  max-width: none !important;
  line-height: var(--leading-normal) !important;

  * {
    margin: 0 !important;
    padding: 0 !important;
  }
}