fix: add margin-block-start to headings for proper section separation

Headings had margin-block-end (connecting to content below) but no
margin-block-start (separating from content above). This caused h3
elements like "Status variants" on the design system page to sit
flush against the preceding section.

Add margin-block-start: 1.5em to h2-h4 — space scales proportionally
with heading size for natural typographic rhythm. h1 is exempted
(typically the first element on a page). Add :first-child rule to
prevent leading margin when a heading opens its container.

Author: danielnaab

src/design/base.css

@@ -12,9 +12,10 @@
     line-height: 1.2;
     font-weight: 700;
     font-family: var(--font-sans);
+    margin-block-start: 1.5em;
     margin-block-end: 0.5em;
   }
-  h1 { font-size: var(--step-4); line-height: 1.15; }
+  h1 { font-size: var(--step-4); line-height: 1.15; margin-block-start: 0; }
   h2 { font-size: var(--step-3); }
   h3 { font-size: var(--step-2); }
   h4 { font-size: var(--step-1); }
@@ -83,7 +84,10 @@
   small {
     font-size: var(--step--1);
   }
-  /* Prevent trailing margin on the last flow element in a container */
+  /* Prevent leading/trailing margin on first/last flow elements in a container */
+  :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, pre):first-child {
+    margin-block-start: 0;
+  }
   :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, pre):last-child {
     margin-block-end: 0;
   }