@digiko-npm/designsystem 0.9.42 → 0.9.44

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.41 */
+/* @ds/designsystem v0.9.43 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -312,6 +312,15 @@
   --ds-text-6xl: 3.75rem;     /* 60px */
   --ds-text-7xl: 4.5rem;      /* 72px */
 
+  /* --- Editorial long-form fluid sizes ---
+       Promoted from esys/blog.css on 12 Apr 2026 after the blog incident.
+       These target magazine-style article reading, between the functional
+       UI scale (ds-text-*) and the display scale (ds-hero-title). Used by
+       .ds-editorial-title and .ds-editorial-lede in components/prose.css. */
+  --ds-text-editorial-title: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);  /* 40 → 72px */
+  --ds-text-editorial-lede: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18 → 22px */
+  --ds-text-editorial-body: 1.0625rem; /* 17px fixed — sweet spot for long-form body */
+
   /* --- Font Weights --- */
   --ds-weight-light: 300;
   --ds-weight-normal: 400;
@@ -696,7 +705,7 @@ strong, b {
 code, kbd, samp {
   font-family: var(--ds-font-mono);
   font-size: 0.9em;
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   padding: 2px 6px;
   border-radius: var(--ds-radius-sm);
 }
@@ -1312,7 +1321,7 @@ hr {
   padding: 2px;
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
   cursor: pointer;
   transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
@@ -1397,7 +1406,7 @@ hr {
   }
 .ds-toggle:hover {
 
-    background-color: var(--ds-color-bg-elevated-hover);
+    background-color: var(--ds-color-surface-elevated-hover);
   }
 .ds-toggle[aria-checked="true"]:hover,
 .ds-toggle--checked:hover {
@@ -1608,7 +1617,7 @@ hr {
 .ds-custom-select__panel {
   position: fixed;
   z-index: var(--ds-z-dropdown);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   box-shadow: var(--ds-shadow-lg);
@@ -1707,7 +1716,7 @@ hr {
 
 .ds-custom-select__option--selected,
 .ds-custom-select__option--selected:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
   font-weight: var(--ds-weight-medium);
 }
@@ -1852,7 +1861,7 @@ hr {
   font-family: var(--ds-font-sans);
   line-height: var(--ds-leading-none);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   color: var(--ds-color-text-secondary);
   white-space: nowrap;
@@ -2085,7 +2094,7 @@ hr {
   max-height: 16rem;
   overflow-y: auto;
   overscroll-behavior: contain;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   box-shadow: var(--ds-shadow-lg);
@@ -2160,7 +2169,7 @@ hr {
 
 .ds-combobox__option--active,
 .ds-combobox__option--active:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 
@@ -2260,7 +2269,7 @@ hr {
   font-family: var(--ds-font-sans);
   line-height: var(--ds-leading-none);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   color: var(--ds-color-text-secondary);
   white-space: nowrap;
@@ -2767,7 +2776,7 @@ hr {
     z-index: var(--ds-z-dropdown);
     inset-block-start: calc(100% + var(--ds-offset-sm));
     inset-inline-start: 0;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -2822,7 +2831,7 @@ hr {
   }
 .ds-datepicker__nav:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 .ds-datepicker__nav:focus-visible {
@@ -2883,7 +2892,7 @@ hr {
   }
 .ds-datepicker__day:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
     }
 .ds-datepicker__day:focus-visible {
 
@@ -2939,7 +2948,7 @@ hr {
   }
 .ds-datepicker__today:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
       border-color: var(--ds-color-border-hover);
     }
@@ -2971,7 +2980,7 @@ hr {
   }
 .ds-datepicker__step:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 .ds-datepicker__step:focus-visible {
@@ -3167,7 +3176,7 @@ hr {
     appearance: none;
     width: 100%;
     height: 0.375rem;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-full);
     outline: none;
     cursor: pointer;
@@ -3390,7 +3399,7 @@ hr {
     width: 3rem;
     height: 3rem;
     border-radius: var(--ds-radius-xl);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
     transition: color var(--ds-duration-fast) var(--ds-ease-default);
   }
@@ -3613,7 +3622,7 @@ hr {
   border-radius: var(--ds-radius-full);
   white-space: nowrap;
   border: 1px solid var(--ds-color-border);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   color: var(--ds-color-text-secondary);
 
   /* Semantic variants — subtle bg + bright text + subtle border */
@@ -3731,7 +3740,7 @@ hr {
   font-family: var(--ds-font-sans);
   line-height: var(--ds-leading-none);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   color: var(--ds-color-text-secondary);
   white-space: nowrap;
@@ -3793,37 +3802,37 @@ hr {
   }
 .ds-tag--primary {
 
-    background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-interactive-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-interactive);
     border-color: var(--ds-color-interactive-border, var(--ds-color-interactive));
   }
 .ds-tag--success {
 
-    background-color: var(--ds-color-success-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-success-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-success);
     border-color: var(--ds-color-success-border, var(--ds-color-success));
   }
 .ds-tag--warning {
 
-    background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-warning-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-warning);
     border-color: var(--ds-color-warning-border, var(--ds-color-warning));
   }
 .ds-tag--error {
 
-    background-color: var(--ds-color-error-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-error-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-error);
     border-color: var(--ds-color-error-border, var(--ds-color-error));
   }
 .ds-tag--info {
 
-    background-color: var(--ds-color-info-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-info-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-info);
     border-color: var(--ds-color-info-border, var(--ds-color-info));
   }
 .ds-tag--purple {
 
-    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-accent-purple, var(--ds-color-interactive));
     border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
   }
@@ -3937,7 +3946,7 @@ hr {
   font-size: var(--ds-text-xs);
   font-family: inherit;
   color: var(--ds-color-text-secondary);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
   white-space: nowrap;
@@ -4010,7 +4019,7 @@ hr {
   width: var(--ds-size-3);
   height: var(--ds-size-3);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   color: var(--ds-color-text-secondary);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);
@@ -4189,7 +4198,7 @@ hr {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
   }
 
@@ -4215,6 +4224,7 @@ hr {
              <th class="ds-table__cell--checkbox"><input class="ds-checkbox" /></th>
              <th><button class="ds-table__sort ds-table__sort--asc">Name</button></th>
              <th>Email</th>
+             <th class="ds-table__cell--truncate">City</th>
              <th class="ds-table__cell--shrink">Actions</th>
            </tr>
          </thead>
@@ -4358,6 +4368,16 @@ hr {
 
 /* --- Special cell types --- */
 
+/* Truncate cell: long text with ellipsis (city names, categories, etc.)
+   Default max-width is 12rem. Override per cell via inline --_cell-max. */
+.ds-table__cell--truncate {
+  --_cell-max: 12rem;
+  max-width: var(--_cell-max);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Shrink cell: action buttons, icons, checkboxes */
 .ds-table__cell--shrink {
   width: 1%;
@@ -4403,7 +4423,7 @@ hr {
   inset-inline-end: var(--ds-space-4);
   height: 0.75rem;
   transform: translateY(-50%);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-sm);
   animation: ds-table-skeleton-pulse 1.5s ease-in-out infinite;
 }
@@ -4641,7 +4661,7 @@ hr {
       }
 .ds-description-list--striped .ds-description-list__item:nth-child(odd) {
 
-      background-color: var(--ds-color-bg-subtle);
+      background-color: var(--ds-color-surface);
       padding-inline: var(--ds-space-3);
       border-radius: var(--ds-radius-md);
     }
@@ -4754,7 +4774,7 @@ hr {
     width: 1rem;
     height: 1rem;
     border-radius: var(--ds-radius-full);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 2px solid var(--ds-color-border);
     z-index: 1;
   }
@@ -4865,7 +4885,7 @@ hr {
 
   width: 100%;
   height: 0.5rem;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-full);
   overflow: hidden;
 
@@ -5082,7 +5102,7 @@ hr {
 .ds-skeleton {
 
   display: block;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-md);
   animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
 
@@ -5639,7 +5659,7 @@ hr {
 .ds-sidebar__link--active:hover {
 
       color: var(--ds-color-text);
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
     }
 
 
@@ -5812,7 +5832,7 @@ hr {
 
     border-block-end: none;
     gap: var(--ds-space-1);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-lg);
     padding: var(--ds-space-1);
 
@@ -5840,7 +5860,7 @@ hr {
 .ds-tabs--pills .ds-tab--active,
 .ds-tabs--pills .ds-tab--active:hover {
 
-        background-color: var(--ds-color-bg-elevated);
+        background-color: var(--ds-color-surface-elevated);
         color: var(--ds-color-text);
         box-shadow: var(--ds-shadow-sm);
         border-block-end: none;
@@ -6017,14 +6037,14 @@ hr {
     font-weight: var(--ds-weight-medium);
     line-height: var(--ds-leading-snug);
     color: var(--ds-color-text-tertiary);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-full);
     min-width: 1.25rem;
   }
 .ds-tab--active .ds-tab__count {
 
     color: var(--ds-color-text-secondary);
-    background-color: var(--ds-color-bg-elevated);
+    background-color: var(--ds-color-surface-elevated);
   }
 
 
@@ -6264,7 +6284,7 @@ hr {
   align-items: center;
   gap: var(--ds-space-0-5);
   padding: var(--ds-space-0-5);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-lg);
   border: 1px solid var(--ds-color-border-subtle);
 
@@ -6317,7 +6337,7 @@ hr {
 .ds-segmented__item--active,
 .ds-segmented__item--active:hover {
 
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
       box-shadow: var(--ds-shadow-sm);
     }
@@ -6640,7 +6660,7 @@ hr {
 .ds-toolbar__btn--active:hover {
 
       color: var(--ds-color-text);
-      background: var(--ds-color-bg-elevated);
+      background: var(--ds-color-surface-elevated);
       border-color: var(--ds-color-border);
     }
 .ds-toolbar__badge {
@@ -6704,7 +6724,7 @@ hr {
     }
 .ds-toolbar__segmented-btn--active {
 
-      background: var(--ds-color-bg-elevated);
+      background: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
     }
 
@@ -7967,7 +7987,7 @@ hr {
     display: flex;
     flex-direction: column;
     padding-block: var(--ds-space-1-5);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -8055,7 +8075,7 @@ hr {
   }
 .ds-dropdown__item:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 .ds-dropdown__item:focus-visible {
@@ -8067,7 +8087,7 @@ hr {
 .ds-dropdown__item--active,
 .ds-dropdown__item--active:hover {
 
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
     }
 .ds-dropdown__item--danger:hover {
@@ -8170,7 +8190,7 @@ hr {
 
     position: absolute;
     z-index: var(--ds-z-dropdown);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -8344,7 +8364,7 @@ hr {
     height: 4px;
     margin: var(--ds-space-2) auto;
     border-radius: var(--ds-radius-full);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     flex-shrink: 0;
   }
 .ds-bottom-sheet__header {
@@ -8538,7 +8558,7 @@ hr {
     }
 .ds-command__content {
 
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -8620,13 +8640,13 @@ hr {
   }
 .ds-command__item:hover {
 
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 .ds-command__item--active,
 .ds-command__item--active:hover {
 
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
 
       
@@ -8767,7 +8787,7 @@ hr {
     }
 .ds-card--elevated {
 
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     box-shadow: var(--ds-shadow-lg);
   }
 .ds-card--hover:hover {
@@ -8813,7 +8833,7 @@ hr {
     width: 100%;
     aspect-ratio: 16/10;
     object-fit: cover;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
 
     
     
@@ -9418,7 +9438,7 @@ hr {
     position: relative;
     overflow: hidden;
     border-radius: var(--ds-radius-xl);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     cursor: pointer;
 
     
@@ -9454,7 +9474,7 @@ hr {
     border-radius: var(--ds-radius-md);
     overflow: hidden;
     cursor: pointer;
-    background: var(--ds-color-bg-muted);
+    background: var(--ds-color-surface-muted);
     transition:
       border-color var(--ds-duration-fast) var(--ds-ease-default),
       opacity var(--ds-duration-fast) var(--ds-ease-default);
@@ -9498,7 +9518,7 @@ hr {
     height: 4rem;
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-md);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
     font-size: var(--ds-text-sm);
     font-weight: var(--ds-weight-medium);
@@ -9907,7 +9927,7 @@ hr {
 .ds-admin__sidebar-badge {
   border-radius: var(--ds-radius-md);
   border: 1px solid var(--ds-color-border);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: var(--ds-space-0-5) var(--ds-space-1-5);
   font-size: var(--ds-text-xs);
   font-weight: var(--ds-weight-medium);
@@ -9945,7 +9965,7 @@ hr {
 
 .ds-admin__nav-item--active,
 .ds-admin__nav-item--active:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 
@@ -9995,7 +10015,7 @@ hr {
 }
 
 .ds-admin__subnav-item--active {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 
@@ -10229,13 +10249,13 @@ hr {
 .ds-prose-block code {
   font-family: var(--ds-font-mono);
   font-size: var(--ds-text-sm);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: 0.125em 0.375em;
   border-radius: var(--ds-radius-sm);
 }
 
 .ds-prose-block pre {
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: var(--ds-space-4);
   border-radius: var(--ds-radius-lg);
   overflow-x: auto;
@@ -10287,6 +10307,153 @@ hr {
   margin-block-end: 1em;
 }
 
+/* ==========================================================================
+   Editorial long-form typography (promoted from esys blog — 12 Apr 2026)
+
+   Three classes that together make an article page look like a magazine
+   instead of a dashboard. They fill the gap between .ds-hero-title (too
+   big for articles) and .ds-prose-block (whose h2 is 4xl — too heavy for
+   reading rhythm).
+
+   Usage:
+     <h1 class="ds-editorial-title">The title of the article</h1>
+     <p class="ds-editorial-lede">The lead paragraph, larger than body.</p>
+     <div class="ds-editorial-body">
+       <h2>Section</h2>
+       <p>Body text at 17px, line-height loose, with proper h2/h3 scale.</p>
+     </div>
+
+   Designed for: blog posts, long-form articles, editorial landing, magazine
+   layouts. NOT for admin UI, dashboards, or functional copy — use
+   .ds-heading-ui / .ds-section-title / .ds-prose-block for those.
+   ========================================================================== */
+
+.ds-editorial-title {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-editorial-title);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin: 0;
+}
+
+.ds-editorial-lede {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-editorial-lede);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+  margin: 0;
+  max-width: 600px;
+}
+
+.ds-editorial-body {
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-editorial-body);
+  line-height: var(--ds-leading-loose);
+}
+
+.ds-editorial-body > * + * {
+  margin-block-start: var(--ds-space-4);
+}
+
+.ds-editorial-body h2 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-2xl);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-8);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h3 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-xl);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-snug);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-6);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h4 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-lg);
+  font-weight: var(--ds-font-display-weight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-5);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body a {
+  color: var(--ds-color-interactive);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ds-editorial-body a:hover {
+  text-decoration: none;
+}
+
+.ds-editorial-body strong {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-editorial-body ul,
+.ds-editorial-body ol {
+  padding-inline-start: var(--ds-space-6);
+}
+
+.ds-editorial-body ul { list-style-type: disc; }
+.ds-editorial-body ol { list-style-type: decimal; }
+
+.ds-editorial-body li + li {
+  margin-block-start: var(--ds-space-2);
+}
+
+.ds-editorial-body blockquote {
+  border-inline-start: 3px solid var(--ds-color-border-hover);
+  padding-inline-start: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+  font-style: italic;
+}
+
+.ds-editorial-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-editorial-body hr {
+  border: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-6);
+}
+
+.ds-editorial-body pre {
+  background: var(--ds-color-surface-muted);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-md);
+  overflow-x: auto;
+}
+
+.ds-editorial-body code {
+  background: var(--ds-color-surface-muted);
+  padding: 0.125em 0.375em;
+  border-radius: var(--ds-radius-sm);
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+}
+
+.ds-editorial-body pre code {
+  background: transparent;
+  padding: 0;
+}
+
 
 /* === Action — Trigger operations and commands === */
 /* ==========================================================================
@@ -10386,7 +10553,7 @@ hr {
   }
 .ds-btn--secondary {
 
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text);
     border-color: var(--ds-color-border);
 
@@ -10395,7 +10562,7 @@ hr {
 .ds-btn--secondary:hover {
 
       border-color: var(--ds-color-border-hover);
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       opacity: 1;
     }
 .ds-btn--outline {
@@ -10883,7 +11050,7 @@ hr {
   padding: var(--ds-space-0-5) var(--ds-space-1-5);
   font-family: var(--ds-font-mono);
   font-size: var(--ds-text-xs);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-block-end-width: 2px;
   border-radius: var(--ds-radius-sm);
@@ -11016,7 +11183,7 @@ hr {
   font-family: inherit;
   line-height: 1;
   color: var(--ds-color-text-tertiary);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-sm);
   pointer-events: none;
@@ -11053,7 +11220,7 @@ hr {
   position: fixed;
   max-height: min(22rem, calc(100dvh - 5rem));
   overflow-y: auto;
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   box-shadow: var(--ds-shadow-lg);
@@ -11103,7 +11270,7 @@ hr {
 
 .ds-search__result--active,
 .ds-search__result--active:hover {
-  background: var(--ds-color-bg-elevated);
+  background: var(--ds-color-surface-elevated);
 }
 
 .ds-search__result:focus-visible {
@@ -11231,7 +11398,7 @@ hr {
     border-inline-start: none;
     border-inline-end: none;
     max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
-    background: var(--ds-color-bg-muted);
+    background: var(--ds-color-surface-muted);
     backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
     -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
   }
@@ -12007,11 +12174,11 @@ a:hover .ds-sortable__handle,
 /* --- Background Color --- */
 .ds-bg-base { background-color: var(--ds-color-bg); }
 .ds-bg-surface { background-color: var(--ds-color-surface); }
-.ds-bg-subtle { background-color: var(--ds-color-bg-subtle); }
-.ds-bg-elevated { background-color: var(--ds-color-bg-elevated); }
+.ds-bg-subtle { background-color: var(--ds-color-surface); }
+.ds-bg-elevated { background-color: var(--ds-color-surface-elevated); }
 .ds-bg-inverted { background-color: var(--ds-color-inverted); color: var(--ds-color-on-inverted); }
 .ds-bg-hover { background-color: var(--ds-color-surface-hover); }
-.ds-bg-muted { background-color: var(--ds-color-bg-muted); }
+.ds-bg-muted { background-color: var(--ds-color-surface-muted); }
 .ds-bg-overlay { background-color: var(--ds-color-overlay); }
 .ds-bg-nav { background-color: var(--ds-color-nav-bg); }
 
@@ -12462,9 +12629,9 @@ a:hover .ds-sortable__handle,
 
 /* --- Hover: Background --- */
 .hover\:ds-bg-base:hover { background-color: var(--ds-color-bg); }
-.hover\:ds-bg-subtle:hover { background-color: var(--ds-color-bg-subtle); }
-.hover\:ds-bg-muted:hover { background-color: var(--ds-color-bg-muted); }
-.hover\:ds-bg-elevated:hover { background-color: var(--ds-color-bg-elevated); }
+.hover\:ds-bg-subtle:hover { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-muted:hover { background-color: var(--ds-color-surface-muted); }
+.hover\:ds-bg-elevated:hover { background-color: var(--ds-color-surface-elevated); }
 .hover\:ds-bg-surface:hover { background-color: var(--ds-color-surface); }
 .hover\:ds-bg-hover:hover { background-color: var(--ds-color-surface-hover); }
 .hover\:ds-bg-inverted:hover { background-color: var(--ds-color-inverted); }
@@ -12543,8 +12710,8 @@ a:hover .ds-sortable__handle,
    ========================================================================== */
 
 .active\:ds-bg-hover:active { background-color: var(--ds-color-surface-hover); }
-.active\:ds-bg-muted:active { background-color: var(--ds-color-bg-muted); }
-.active\:ds-bg-elevated:active { background-color: var(--ds-color-bg-elevated); }
+.active\:ds-bg-muted:active { background-color: var(--ds-color-surface-muted); }
+.active\:ds-bg-elevated:active { background-color: var(--ds-color-surface-elevated); }
 .active\:ds-scale-95:active { transform: scale(0.95); }
 .active\:ds-scale-98:active { transform: scale(0.98); }
 
@@ -12562,7 +12729,7 @@ a:hover .ds-sortable__handle,
 .disabled\:ds-cursor-not-allowed[aria-disabled="true"] { cursor: not-allowed; }
 
 .disabled\:ds-bg-subtle:disabled,
-.disabled\:ds-bg-subtle[aria-disabled="true"] { background-color: var(--ds-color-bg-subtle); }
+.disabled\:ds-bg-subtle[aria-disabled="true"] { background-color: var(--ds-color-surface); }
 
 .disabled\:ds-pointer-events-none:disabled,
 .disabled\:ds-pointer-events-none[aria-disabled="true"] { pointer-events: none; }