/* Prose/Typography styles for rich text content - Tailwind v4 compatible */
/* Using OKLCH color space for better perceptual uniformity and vibrant colors */

:root {
  /* Base colors */
  --prose-body: oklch(0.5479 0.0172 247.8583); /* slate-600 */
  --prose-heading: oklch(0.3231 0.0285 247.8581); /* slate-800 */
  --prose-link: oklch(0.6482 0.1366 231.6386); /* cyan-600 */
  --prose-link-hover: oklch(0.5763 0.1231 233.1427); /* cyan-700 */
  --prose-border: oklch(0.8684 0.006 247.8559); /* slate-300 */
  --prose-code-bg: oklch(0.3176 0.0143 264.5518); /* gray-800 */
  --prose-code-text: oklch(0.9216 0.0043 264.5368); /* gray-200 */
  
  /* Theme colors */
  --prose-orange: oklch(0.646 0.222 41.116);
  --prose-orange-hover: oklch(0.5706 0.2136 41.3849);
  --prose-blue: oklch(0.6482 0.1366 231.6386);
  --prose-blue-hover: oklch(0.5763 0.1231 233.1427);
  --prose-green: oklch(0.6381 0.1939 149.5793);
  --prose-green-hover: oklch(0.5547 0.1721 149.5739);
  --prose-amber: oklch(0.6871 0.203 62.4472);
  --prose-amber-hover: oklch(0.6151 0.1836 60.1305);
  --prose-indigo: oklch(0.5672 0.2437 279.6958);
  --prose-indigo-hover: oklch(0.5072 0.2207 279.8419);
}

.prose {
  color: var(--prose-body);
  max-width: 65ch;
}

.prose-lg {
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Large prose heading sizes - match section titles
 * Using compound selectors (.prose.prose-lg) for higher specificity without !important.
 * Specificity (0,2,1) beats single utility classes (0,1,0).
 */
.prose.prose-lg h1 {
  font-size: 3rem; /* 48px - matches text-5xl */
  line-height: 1.1;
}

.prose.prose-lg h2 {
  font-size: 2.25rem; /* 36px - matches text-4xl (section titles) */
  line-height: 1.2;
}

/* Responsive sizing for h2 to match section titles (text-4xl lg:text-5xl) */
@media (min-width: 1024px) {
  .prose.prose-lg h2 {
    font-size: 3rem; /* 48px - matches text-5xl on desktop */
  }
}

.prose.prose-lg h3 {
  font-size: 1.5rem; /* 24px - matches text-2xl */
  line-height: 1.4;
}

.prose.prose-lg h4 {
  font-size: 1.25rem; /* 20px - matches text-xl */
  line-height: 1.5;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose strong,
.prose code {
  color: var(--prose-heading);
  font-weight: 600;
}

.prose code {
  font-size: 0.875em;
}

.prose code::before,
.prose code::after {
  content: "`";
}

.prose em {
  font-style: italic;
}

.prose a {
  color: var(--prose-link);
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: var(--prose-link-hover);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: var(--prose-heading);
}

.prose h1 {
  font-weight: 800;
  font-size: 3rem; /* 48px - matches text-5xl */
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.prose h2 {
  font-weight: 700;
  font-size: 2.25rem; /* 36px - matches text-4xl (section titles) */
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.prose h3 {
  font-weight: 600;
  font-size: 1.5rem; /* 24px - matches text-2xl */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.prose h4 {
  font-weight: 600;
  font-size: 1.25rem; /* 20px - matches text-xl */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.prose h5,
.prose h6 {
  font-weight: 600;
  font-size: 1.125rem; /* 18px - matches text-lg */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose blockquote {
  font-weight: 500;
  font-style: italic;
  color: var(--prose-body);
  border-left-width: 0.25rem;
  border-left-color: var(--prose-border);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}

.prose pre {
  color: var(--prose-code-text);
  background-color: var(--prose-code-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}

.prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose pre code::before,
.prose pre code::after {
  content: none;
}

.prose :first-child {
  margin-top: 0;
}

.prose :last-child {
  margin-bottom: 0;
}

.prose.max-w-none {
  max-width: none;
}

/* Theme color variants for prose - OKLCH color space */
/* Headings use -600 to match section titles, links hover to -700 */
.prose-orange h1,
.prose-orange h2,
.prose-orange h3,
.prose-orange h4,
.prose-orange h5,
.prose-orange h6 {
  color: var(--prose-orange);
}

.prose-orange a {
  color: var(--prose-orange);
}

.prose-orange a:hover {
  color: var(--prose-orange-hover);
}

.prose-blue h1,
.prose-blue h2,
.prose-blue h3,
.prose-blue h4,
.prose-blue h5,
.prose-blue h6 {
  color: var(--prose-blue);
}

.prose-blue a {
  color: var(--prose-blue);
}

.prose-blue a:hover {
  color: var(--prose-blue-hover);
}

.prose-green h1,
.prose-green h2,
.prose-green h3,
.prose-green h4,
.prose-green h5,
.prose-green h6 {
  color: var(--prose-green);
}

.prose-green a {
  color: var(--prose-green);
}

.prose-green a:hover {
  color: var(--prose-green-hover);
}

.prose-gray h1,
.prose-gray h2,
.prose-gray h3,
.prose-gray h4,
.prose-gray h5,
.prose-gray h6 {
  color: var(--prose-heading);
}

.prose-gray a {
  color: var(--prose-link);
}

.prose-gray a:hover {
  color: var(--prose-link-hover);
}

.prose-amber h1,
.prose-amber h2,
.prose-amber h3,
.prose-amber h4,
.prose-amber h5,
.prose-amber h6 {
  color: var(--prose-amber);
}

.prose-amber a {
  color: var(--prose-amber);
}

.prose-amber a:hover {
  color: var(--prose-amber-hover);
}

.prose-indigo h1,
.prose-indigo h2,
.prose-indigo h3,
.prose-indigo h4,
.prose-indigo h5,
.prose-indigo h6 {
  color: var(--prose-indigo);
}

.prose-indigo a {
  color: var(--prose-indigo);
}

.prose-indigo a:hover {
  color: var(--prose-indigo-hover);
}