@digiko-npm/designsystem 0.9.41 → 0.9.43

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.40 */
+/* @ds/designsystem v0.9.42 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -33,8 +33,20 @@
 /* Light theme (default) */
 :root,
 [data-theme="light"] {
-  /* --- Backgrounds — clean whites, warm grays --- */
+  /* --- Background — page-level only --- */
   --ds-color-bg: #fafafa;
+
+  /* --- Surface — everything on top of bg --- */
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-hover: #fafafa;
+  --ds-color-surface-muted: #e4e4e7;
+  --ds-color-surface-muted-hover: #d4d4d8;
+  --ds-color-surface-elevated: #f4f4f5;
+  --ds-color-surface-elevated-hover: #e4e4e7;
+  --ds-color-surface-active: #f4f4f5; /* same value as elevated, different semantics — selected/active state */
+
+  /* @deprecated — use surface-* instead. Will be removed in a future major.
+     Kept for backward compatibility with consumer projects. */
   --ds-color-bg-subtle: #ffffff;
   --ds-color-bg-muted: #e4e4e7;
   --ds-color-bg-muted-hover: #d4d4d8;
@@ -42,10 +54,6 @@
   --ds-color-bg-elevated: #f4f4f5;
   --ds-color-bg-elevated-hover: #e4e4e7;
 
-  --ds-color-surface: #ffffff;
-  --ds-color-surface-hover: #fafafa;
-  --ds-color-surface-active: #f4f4f5;
-
   /* --- Text — zinc hierarchy ---
      Contrast ratios on --ds-color-bg (#fafafa):
      --text:           #09090b → ~19.3:1 ✅ WCAG AAA
@@ -84,10 +92,13 @@
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.5);
   --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
+
+  /* @deprecated — use surface-hover / surface-active instead */
   --ds-color-overlay-hover: rgba(0, 0, 0, 0.08);
   --ds-color-overlay-active: rgba(0, 0, 0, 0.12);
 
-  /* --- Navigation (glass effect) --- */
+  /* @deprecated — use color-surface + backdrop-filter for glass effect.
+     Too specific as tokens. Kept for backward compat. */
   --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
   --ds-color-nav-border: rgba(228, 228, 231, 0.6);
 
@@ -109,8 +120,19 @@
 
 /* Dark theme */
 [data-theme="dark"] {
-  /* --- Backgrounds — deep, refined zinc-900 palette --- */
+  /* --- Background — page-level only --- */
   --ds-color-bg: #09090b;
+
+  /* --- Surface --- */
+  --ds-color-surface: #0f0f11;
+  --ds-color-surface-hover: #18181b;
+  --ds-color-surface-muted: #18181b;
+  --ds-color-surface-muted-hover: #212124;
+  --ds-color-surface-elevated: #2d2d31;
+  --ds-color-surface-elevated-hover: #3a3a40;
+  --ds-color-surface-active: #27272a;
+
+  /* @deprecated */
   --ds-color-bg-subtle: #0f0f11;
   --ds-color-bg-muted: #18181b;
   --ds-color-bg-muted-hover: #212124;
@@ -118,10 +140,6 @@
   --ds-color-bg-elevated: #2d2d31;
   --ds-color-bg-elevated-hover: #3a3a40;
 
-  --ds-color-surface: #0f0f11;
-  --ds-color-surface-hover: #18181b;
-  --ds-color-surface-active: #27272a;
-
   /* --- Text ---
      Contrast ratios on --ds-color-bg (#09090b):
      --text:           #fafafa → ~19.3:1 ✅ WCAG AAA
@@ -160,10 +178,12 @@
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.7);
   --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
+
+  /* @deprecated */
   --ds-color-overlay-hover: rgba(255, 255, 255, 0.1);
   --ds-color-overlay-active: rgba(255, 255, 255, 0.15);
 
-  /* --- Navigation --- */
+  /* @deprecated */
   --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
   --ds-color-nav-border: rgba(39, 39, 42, 0.6);
 
@@ -206,7 +226,9 @@
   --ds-color-info-subtle: rgba(37, 99, 235, 0.1);
   --ds-color-info-border: rgba(37, 99, 235, 0.2);
 
-  /* --- Solid fills (theme-stable, always pair with white text) --- */
+  /* @deprecated — use color-success/warning/error/info directly.
+     The -solid variant was identical in value and confusing in name.
+     Kept for backward compatibility. */
   --ds-color-success-solid: #16a34a;
   --ds-color-warning-solid: #d97706;
   --ds-color-error-solid: #dc2626;
@@ -290,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;
@@ -674,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);
 }
@@ -1284,12 +1315,13 @@ hr {
 
   display: inline-flex;
   position: relative;
-  width: 4.5rem;
-  height: 2rem;
-  padding: 3px;
-  border: none;
+  width: 3.25rem;
+  height: 1.5rem;
+  /* Proportions locked: track 2.2:1, thumb 59%w 80%h of track */
+  padding: 2px;
+  border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  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),
@@ -1349,10 +1381,10 @@ hr {
 
     content: "";
     position: absolute;
-    inset-inline-start: 3px;
+    inset-inline-start: 2px;
     inset-block-start: 50%;
-    width: 2.625rem;
-    height: 1.625rem;
+    width: 1.875rem;
+    height: 1.25rem;
     border-radius: var(--ds-radius-full);
     background-color: var(--ds-color-static-white);
     box-shadow:
@@ -1370,11 +1402,11 @@ hr {
 .ds-toggle[aria-checked="true"]::after,
 .ds-toggle--checked::after {
 
-    transform: translateX(1.5rem) translateY(-50%);
+    transform: translateX(1.125rem) translateY(-50%);
   }
 .ds-toggle:hover {
 
-    background-color: var(--ds-color-bg-muted-hover);
+    background-color: var(--ds-color-surface-elevated-hover);
   }
 .ds-toggle[aria-checked="true"]:hover,
 .ds-toggle--checked:hover {
@@ -1397,8 +1429,8 @@ hr {
   }
 .ds-toggle--sm {
 
-    width: 3.375rem;
-    height: 1.5rem;
+    width: 2.75rem;
+    height: 1.25rem;
     padding: 2px;
 
     
@@ -1408,19 +1440,19 @@ hr {
 .ds-toggle--sm::after {
 
       inset-inline-start: 2px;
-      width: 2rem;
-      height: 1.25rem;
+      width: 1.625rem;
+      height: 1rem;
     }
 .ds-toggle--sm[aria-checked="true"]::after,
 .ds-toggle--sm.ds-toggle--checked::after {
 
-      transform: translateX(1.125rem) translateY(-50%);
+      transform: translateX(0.875rem) translateY(-50%);
     }
 .ds-toggle--lg {
 
-    width: 5.5rem;
-    height: 2.5rem;
-    padding: 4px;
+    width: 3.75rem;
+    height: 1.75rem;
+    padding: 2px;
 
     
 
@@ -1428,14 +1460,14 @@ hr {
   }
 .ds-toggle--lg::after {
 
-      inset-inline-start: 4px;
-      width: 3.25rem;
-      height: 2rem;
+      inset-inline-start: 2px;
+      width: 2.25rem;
+      height: 1.4rem;
     }
 .ds-toggle--lg[aria-checked="true"]::after,
 .ds-toggle--lg.ds-toggle--checked::after {
 
-      transform: translateX(1.875rem) translateY(-50%);
+      transform: translateX(1.25rem) translateY(-50%);
     }
 
 
@@ -1585,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);
@@ -1684,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);
 }
@@ -1829,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;
@@ -2062,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);
@@ -2137,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);
 }
 
@@ -2237,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;
@@ -2744,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);
@@ -2799,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 {
@@ -2860,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 {
 
@@ -2916,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);
     }
@@ -2948,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 {
@@ -3144,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;
@@ -3367,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);
   }
@@ -3590,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 */
@@ -3708,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;
@@ -3770,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)));
   }
@@ -3914,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;
@@ -3987,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);
@@ -4166,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);
   }
 
@@ -4380,7 +4412,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;
 }
@@ -4618,7 +4650,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);
     }
@@ -4731,7 +4763,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;
   }
@@ -4842,7 +4874,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;
 
@@ -5059,7 +5091,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;
 
@@ -5616,7 +5648,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);
     }
 
 
@@ -5789,7 +5821,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);
 
@@ -5817,7 +5849,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;
@@ -5994,14 +6026,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);
   }
 
 
@@ -6241,7 +6273,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);
 
@@ -6294,7 +6326,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);
     }
@@ -6617,7 +6649,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 {
@@ -6681,7 +6713,7 @@ hr {
     }
 .ds-toolbar__segmented-btn--active {
 
-      background: var(--ds-color-bg-elevated);
+      background: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
     }
 
@@ -7944,7 +7976,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);
@@ -8032,7 +8064,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 {
@@ -8044,7 +8076,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 {
@@ -8147,7 +8179,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);
@@ -8321,7 +8353,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 {
@@ -8515,7 +8547,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);
@@ -8597,13 +8629,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);
 
       
@@ -8744,7 +8776,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 {
@@ -8790,7 +8822,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);
 
     
     
@@ -9395,7 +9427,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;
 
     
@@ -9431,7 +9463,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);
@@ -9475,7 +9507,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);
@@ -9884,7 +9916,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);
@@ -9922,7 +9954,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);
 }
 
@@ -9972,7 +10004,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);
 }
 
@@ -10206,13 +10238,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;
@@ -10264,6 +10296,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 === */
 /* ==========================================================================
@@ -10363,7 +10542,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);
 
@@ -10372,7 +10551,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 {
@@ -10860,7 +11039,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);
@@ -10993,7 +11172,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;
@@ -11030,7 +11209,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);
@@ -11080,7 +11259,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 {
@@ -11208,7 +11387,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);
   }
@@ -11984,11 +12163,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); }
 
@@ -12439,9 +12618,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); }
@@ -12520,8 +12699,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); }
 
@@ -12539,7 +12718,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; }