New .prose component, put it to work in the docs

scss/content/_prose.scss

@@ -2,9 +2,10 @@
 @use "../mixins/transition" as *;
 
 @layer content {
-  .content-body {
+  .prose {
     --#{$prefix}content-font-size: 16px;
     --#{$prefix}content-gap: 24px;
+    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
 
     position: relative;
     max-width: 1000px;
@@ -38,12 +39,30 @@
     h4,
     h5,
     h6 {
+      --bs-heading-color: var(--bs-emphasis-color);
+
       margin-top: 0;
       margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
       font-weight: 500;
       line-height: 1.25;
     }
 
+    h1,
+    h2 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
+      }
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
+      }
+    }
+
     h1 {
       font-size: 2.25em;
       line-height: 1.1;
@@ -66,15 +85,15 @@
     }
 
     a:not([class]) {
-      color: var(--ui-theme-primary-text);
+      color: var(--#{$prefix}link-color);
       text-decoration: underline;
-      text-decoration-color: color-mix(in srgb, var(--ui-theme-primary-text) 25%, transparent);
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent);
       text-underline-offset: 4px;
       @include transition(.1s text-decoration-color ease-in-out);
     }
 
     a:not([class]):hover {
-      text-decoration-color: var(--ui-theme-primary-text);
+      text-decoration-color: var(--#{$prefix}link-hover-color);
     }
 
     img {
@@ -100,6 +119,7 @@
       border: 1px solid var(--#{$prefix}border-color);
     }
 
+
     dt {
       font-weight: 500;
     }

scss/content/_reboot.scss

@@ -212,7 +212,7 @@
 
   b,
   strong {
-    font-weight: $font-weight-bolder;
+    font-weight: $font-weight-medium;
   }
 
 
@@ -220,14 +220,16 @@
   //
   // Add the correct font size in all browsers
 
-  small, .small {
+  small,
+  .small {
     @include font-size($small-font-size);
   }
 
 
   // Mark
 
-  mark, .mark {
+  mark,
+  .mark {
     padding: $mark-padding;
     color: var(--#{$prefix}highlight-color);
     background-color: var(--#{$prefix}highlight-bg);
@@ -456,8 +458,7 @@
     display: none !important;
   }
 
-  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-  //    controls in Android 4.
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`  //    controls in Android 4.
   // 2. Correct the inability to style clickable types in iOS and Safari.
   // 3. Opinionated: add "hand" cursor to non-disabled button elements.
 

scss/content/index.scss

@@ -2,4 +2,4 @@
 @forward "type";
 @forward "tables";
 @forward "images";
-@forward "content-body";
+@forward "prose";