@solid-design-system/styles 7.0.0-next.10 → 7.0.0-next.12

package/dist/solid-styles.css

@@ -3,133 +3,133 @@
 @layer theme, base, components, utilities;
 .sd-chip {
   display: inline-flex;
-  height: var(--sd-spacing-6);
+  height: var(--sd-spacing-6, 1.5rem);
   align-items: center;
   overflow: hidden;
-  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
+  border-radius: var(--sd-chip-border-radius, 0.25rem);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-width: var(--sd-chip-border-width, 0);
-  border-color: rgba(var(--sd-chip--primary-subtle-color-filled-border, rgba(255, 255, 255, 0)));
-  background-color: rgba(var(--sd-chip--primary-subtle-color-background, rgba(var(--sd-color-primary-100))));
-  padding-inline: var(--sd-spacing-2);
+  border-color: rgba(var(--sd-chip--primary-subtle-color-filled-border, 255 255 255 / 0));
+  background-color: rgba(var(--sd-chip--primary-subtle-color-background, 236 240 249));
+  padding-inline: var(--sd-spacing-2, 0.5rem);
   font-size: var(--sd-marker-font-size, 0.875rem);
-  font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
+  font-weight: var(--sd-marker-font-weight, 400);
   white-space: nowrap;
-  color: rgba(var(--sd-color-text-black));
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-chip--size-lg {
-    height: var(--sd-spacing-8);
-    padding-inline: var(--sd-spacing-3);
+    height: var(--sd-spacing-8, 2rem);
+    padding-inline: var(--sd-spacing-3, 0.75rem);
   }
 .sd-chip--sharp {
-    border-radius: var(--sd-radius-none);
+    border-radius: var(--sd-radius-none, 0);
   }
 .sd-chip--shade-low {
-    border-color: rgba(var(--sd-chip--primary-low-color-filled-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--primary-low-color-background, rgba(var(--sd-color-primary-200))));
+    border-color: rgba(var(--sd-chip--primary-low-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-low-color-background, 224 233 243));
   }
 .sd-chip--shade-medium {
-    border-color: rgba(var(--sd-chip--primary-medium-color-filled-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--primary-medium-color-background, rgba(var(--sd-color-primary-300))));
+    border-color: rgba(var(--sd-chip--primary-medium-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-medium-color-background, 200 213 231));
   }
 .sd-chip--shade-high {
-    border-color: rgba(var(--sd-chip--primary-high-color-filled-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--primary-high-color-background, rgba(var(--sd-color-primary-400))));
+    border-color: rgba(var(--sd-chip--primary-high-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-high-color-background, 153 171 208));
   }
 .sd-chip--shade-none {
     border-color: transparent;
     background-color: transparent;
   }
 .sd-chip--color-neutral {
-    border-color: rgba(var(--sd-chip--neutral-subtle-color-filled-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--neutral-subtle-color-background, rgba(var(--sd-color-neutral-100))));
+    border-color: rgba(var(--sd-chip--neutral-subtle-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--neutral-subtle-color-background, 246 246 246));
   }
 .sd-chip--color-neutral.sd-chip--shade-low {
-      border-color: rgba(var(--sd-chip--neutral-low-color-filled-border, rgba(255, 255, 255, 0)));
-      background-color: rgba(var(--sd-chip--neutral-low-color-background, rgba(var(--sd-color-neutral-200))));
+      border-color: rgba(var(--sd-chip--neutral-low-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-low-color-background, 233 233 233));
     }
 .sd-chip--color-neutral.sd-chip--shade-medium {
-      border-color: rgba(var(--sd-chip--neutral-medium-color-filled-border, rgba(255, 255, 255, 0)));
-      background-color: rgba(var(--sd-chip--neutral-medium-color-background, rgba(var(--sd-color-neutral-300))));
+      border-color: rgba(var(--sd-chip--neutral-medium-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-medium-color-background, 218 218 218));
     }
 .sd-chip--color-neutral.sd-chip--shade-high {
-      border-color: rgba(var(--sd-chip--neutral-high-color-filled-border, rgba(255, 255, 255, 0)));
-      background-color: rgba(var(--sd-chip--neutral-high-color-background, rgba(var(--sd-color-neutral-400))));
+      border-color: rgba(var(--sd-chip--neutral-high-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-high-color-background, 195 195 195));
     }
 .sd-chip--color-neutral.sd-chip--shade-none {
       border-color: transparent;
       background-color: transparent;
     }
 .sd-chip--color-white {
-    border-color: rgba(var(--sd-chip--white-color-filled-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
+    border-color: rgba(var(--sd-chip--white-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--white-color-background, 255 255 255));
   }
 .sd-chip--outline {
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: rgba(var(--sd-chip--primary-low-color-border, rgba(var(--sd-color-primary-200))));
-    background-color: rgba(var(--sd-chip--primary-low-color-outline-fill, rgba(255, 255, 255, 0)));
+    border-color: rgba(var(--sd-chip--primary-low-color-border, 224 233 243));
+    background-color: rgba(var(--sd-chip--primary-low-color-outline-fill, 255 255 255 / 0));
   }
 .sd-chip--outline.sd-chip--shade-low {
-      border-color: rgba(var(--sd-chip--primary-medium-color-border, rgba(var(--sd-color-primary-300))));
-      background-color: rgba(var(--sd-chip--primary-medium-color-outline-fill, rgba(255, 255, 255, 0)));
+      border-color: rgba(var(--sd-chip--primary-medium-color-border, 200 213 231));
+      background-color: rgba(var(--sd-chip--primary-medium-color-outline-fill, 255 255 255 / 0));
     }
 .sd-chip--outline.sd-chip--shade-medium {
-      border-color: rgba(var(--sd-chip--primary-high-color-border, rgba(var(--sd-color-primary-400))));
-      background-color: rgba(var(--sd-chip--primary-high-color-outline-fill, rgba(255, 255, 255, 0)));
+      border-color: rgba(var(--sd-chip--primary-high-color-border, 153 171 208));
+      background-color: rgba(var(--sd-chip--primary-high-color-outline-fill, 255 255 255 / 0));
     }
 .sd-chip--outline.sd-chip--shade-high {
-      border-color: rgba(var(--sd-chip--primary-strong-color-border, rgba(var(--sd-color-primary-500))));
-      background-color: rgba(var(--sd-chip--primary-strong-color-outline-fill, rgba(255, 255, 255, 0)));
+      border-color: rgba(var(--sd-chip--primary-strong-color-border, 70 109 175));
+      background-color: rgba(var(--sd-chip--primary-strong-color-outline-fill, 255 255 255 / 0));
     }
 .sd-chip--outline.sd-chip--color-neutral {
-      border-color: rgba(var(--sd-chip--neutral-low-color-border, rgba(var(--sd-color-neutral-200))));
-      background-color: rgba(var(--sd-chip--neutral-low-color-outline-fill, rgba(255, 255, 255, 0)));
+      border-color: rgba(var(--sd-chip--neutral-low-color-border, 233 233 233));
+      background-color: rgba(var(--sd-chip--neutral-low-color-outline-fill, 255 255 255 / 0));
     }
 .sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-low {
-        border-color: rgba(var(--sd-chip--neutral-medium-color-border, rgba(var(--sd-color-neutral-300))));
-        background-color: rgba(var(--sd-chip--neutral-medium-color-outline-fill, rgba(255, 255, 255, 0)));
+        border-color: rgba(var(--sd-chip--neutral-medium-color-border, 218 218 218));
+        background-color: rgba(var(--sd-chip--neutral-medium-color-outline-fill, 255 255 255 / 0));
       }
 .sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-medium {
-        border-color: rgba(var(--sd-chip--neutral-high-color-border, rgba(var(--sd-color-neutral-400))));
-        background-color: rgba(var(--sd-chip--neutral-high-color-outline-fill, rgba(255, 255, 255, 0)));
+        border-color: rgba(var(--sd-chip--neutral-high-color-border, 195 195 195));
+        background-color: rgba(var(--sd-chip--neutral-high-color-outline-fill, 255 255 255 / 0));
       }
 .sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-high {
-        border-color: rgba(var(--sd-chip--neutral-strong-color-border, rgba(var(--sd-color-neutral-500))));
-        background-color: rgba(var(--sd-chip--neutral-strong-color-outline-fill, rgba(255, 255, 255, 0)));
+        border-color: rgba(var(--sd-chip--neutral-strong-color-border, 174 174 174));
+        background-color: rgba(var(--sd-chip--neutral-strong-color-outline-fill, 255 255 255 / 0));
       }
 .sd-container {
   position: relative;
-  background-color: rgba(var(--sd-color-background-neutral-100));
-  padding-inline: var(--sd-spacing-10);
-  padding-block: var(--sd-spacing-8);
+  background-color: rgba(var(--sd-color-background-neutral-100, 246 246 246));
+  padding-inline: var(--sd-spacing-10, 2.5rem);
+  padding-block: var(--sd-spacing-8, 2rem);
 }
 .sd-container--variant-primary-100 {
-    background-color: rgba(var(--sd-color-background-primary-100));
+    background-color: rgba(var(--sd-color-background-primary-100, 236 240 249));
   }
 .sd-container--variant-primary-800 {
-    background-color: rgba(var(--sd-container--primary-800-color-background, rgba(var(--sd-color-primary-800))));
+    background-color: rgba(var(--sd-container--primary-800-color-background, 5 21 48));
   }
 .sd-container--variant-primary {
-    background-color: rgba(var(--sd-color-background-primary));
+    background-color: rgba(var(--sd-color-background-primary, 0 53 142));
   }
 .sd-container--variant-border-neutral-400 {
     --tw-border-style: solid;
     border-style: solid;
-    border-color: rgba(var(--sd-color-border-neutral-400));
-    background-color: rgba(var(--sd-color-background-white));
+    border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
+    background-color: rgba(var(--sd-color-background-white, 255 255 255));
     border-width: 1px;
   }
 .sd-container--variant-white {
-    background-color: rgba(var(--sd-color-background-white));
+    background-color: rgba(var(--sd-color-background-white, 255 255 255));
   }
 .sd-container--padding-sm {
-    padding-inline: var(--sd-spacing-6);
-    padding-block: var(--sd-spacing-4);
+    padding-inline: var(--sd-spacing-6, 1.5rem);
+    padding-block: var(--sd-spacing-4, 1rem);
   }
 .sd-container{
-  --triangle-background: rgba(var(--sd-color-background-white));
+  --triangle-background: rgba(var(--sd-color-background-white, 255 255 255));
 }
 .sd-container--triangle-top::before, .sd-container--triangle-right::before, .sd-container--triangle-bottom::before, .sd-container--triangle-left::before {
     position: absolute;
@@ -178,7 +178,7 @@
       top: -1px;
     }
 .sd-container--triangle-top-border::before {
-      border-top-color: rgba(var(--sd-color-border-neutral-400));
+      border-top-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       left: calc(50% - 15px);
     }
 .sd-container--triangle-top-border::after {
@@ -189,7 +189,7 @@
       right: -1px;
     }
 .sd-container--triangle-right-border::before {
-      border-right-color: rgba(var(--sd-color-border-neutral-400));
+      border-right-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       top: calc(50% - 15px);
     }
 .sd-container--triangle-right-border::after {
@@ -200,7 +200,7 @@
       bottom: -1px;
     }
 .sd-container--triangle-bottom-border::before {
-      border-bottom-color: rgba(var(--sd-color-border-neutral-400));
+      border-bottom-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       left: calc(50% - 15px);
     }
 .sd-container--triangle-bottom-border::after {
@@ -211,7 +211,7 @@
       left: -1px;
     }
 .sd-container--triangle-left-border::before {
-      border-left-color: rgba(var(--sd-color-border-neutral-400));
+      border-left-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       top: calc(50% - 15px);
     }
 .sd-container--triangle-left-border::after {
@@ -235,21 +235,21 @@
     left: 0;
     display: block;
     width: 100%;
-    padding-bottom: var(--sd-spacing-2);
-    padding-left: var(--sd-spacing-4);
-    font-size: var(--sd-text-sm);
+    padding-bottom: var(--sd-spacing-2, 0.5rem);
+    padding-left: var(--sd-spacing-4, 1rem);
+    font-size: var(--sd-text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-    color: rgba(var(--sd-color-text-white));
-    --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs));
-    --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
+    --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs, 0.5px 0.5px 1.5px #515151));
+    --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs, 0.5px 0.5px 1.5px #515151));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     content: var(--copyright);
   }
 .sd-copyright--orientation-vertical::after {
         width: -moz-max-content;
         width: max-content;
-        padding-top: var(--sd-spacing-2);
-        padding-right: var(--sd-spacing-1);
+        padding-top: var(--sd-spacing-2, 0.5rem);
+        padding-right: var(--sd-spacing-1, 0.25rem);
         padding-bottom: 0;
         padding-left: 0;
         writing-mode: vertical-rl;
@@ -257,7 +257,7 @@
         transform: rotate(180deg);
       }
 .sd-copyright--color-black::after {
-        color: rgba(var(--sd-color-text-black));
+        color: rgba(var(--sd-color-text-black, 24 24 24));
         filter: drop-shadow(0 0 transparent);
       }
 .sd-copyright--no-shadow::after {
@@ -270,22 +270,22 @@
         display: block;
         max-height: -moz-fit-content;
         max-height: fit-content;
-        padding-top: var(--sd-spacing-2);
-        padding-right: var(--sd-spacing-4);
+        padding-top: var(--sd-spacing-2, 0.5rem);
+        padding-right: var(--sd-spacing-4, 1rem);
       }
 .sd-footnotes {
   margin-block: 0;
   padding: 0;
   text-align: left;
-  font-size: var(--sd-text-sm);
+  font-size: var(--sd-text-sm, 0.875rem);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-  color: rgba(var(--sd-color-text-neutral-700));
+  color: rgba(var(--sd-color-text-neutral-700, 104 104 104));
 }
 .sd-footnotes :target {
-    background-color: rgba(var(--sd-color-background-neutral-200));
+    background-color: rgba(var(--sd-color-background-neutral-200, 233 233 233));
   }
 .sd-footnotes:is(ol) {
-    padding-inline-start: var(--sd-spacing-8);
+    padding-inline-start: var(--sd-spacing-8, 2rem);
   }
 .sd-footnotes:is(ol) li {
       counter-increment: list-item;
@@ -294,12 +294,12 @@
     }
 .sd-footnotes:is(ol) li .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::before {
           position: absolute;
-          left: calc(var(--sd-spacing-8) * -1);
+          left: calc(var(--sd-spacing-8, 2rem) * -1);
           flex-shrink: 0;
           --tw-leading: var(--leading-normal, 1.5);
           line-height: var(--leading-normal, 1.5);
-          --tw-font-weight: var(--sd-font-weight-bold);
-          font-weight: var(--sd-font-weight-bold);
+          --tw-font-weight: var(--sd-font-weight-bold, 600);
+          font-weight: var(--sd-font-weight-bold, 600);
           content: '[ ' counter(list-item) ' ]';
           padding-top: 1px;
           font-size: 10px;
@@ -317,8 +317,8 @@
             vertical-align: super;
             --tw-leading: var(--leading-normal, 1.5);
             line-height: var(--leading-normal, 1.5);
-            --tw-font-weight: var(--sd-font-weight-bold);
-            font-weight: var(--sd-font-weight-bold);
+            --tw-font-weight: var(--sd-font-weight-bold, 600);
+            font-weight: var(--sd-font-weight-bold, 600);
             content: counter(footnotes-multiple, lower-alpha);
           }
 .sd-footnotes:is(ol) li .sd-footnotes--marker {
@@ -330,48 +330,48 @@
           outline-width: 0px;
         }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible::before {
-            border-radius: var(--sd-radius);
+            border-radius: var(--sd-radius, 0.25rem);
             outline-width: 1px;
             outline-style: var(--tw-outline-style);
             outline-width: 2px;
             outline-offset: 2px;
-            outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
+            outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
           }
 .sd-footnotes:is(ul) {
     list-style: '';
   }
 .sd-footnotes--inverted {
-    color: rgba(var(--sd-color-text-primary-400));
+    color: rgba(var(--sd-color-text-primary-400, 153 171 208));
   }
 .sd-footnotes--inverted :target {
-      background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
+      background-color: rgba(var(--sd-footnotes--target--inverted-color-background, 5 21 48));
     }
 .sd-footnotes--inverted .sd-footnotes--marker::before {
-      color: rgba(var(--sd-color-text-white));
-      outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white))) !important;
+      color: rgba(var(--sd-color-text-white, 255 255 255));
+      outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white, 255 255 255))) !important;
     }
 .sd-footnotes--inverted:is(.sd-footnotes--marker) {
-      color: rgba(var(--sd-color-text-white)) !important;
-      outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white))) !important;
+      color: rgba(var(--sd-color-text-white, 255 255 255)) !important;
+      outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white, 255 255 255))) !important;
     }
 .sd-footnotes--inverted:is(.sd-footnotes--marker):target {
-        background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
+        background-color: rgba(var(--sd-footnotes--target--inverted-color-background, 5 21 48));
       }
 .sd-footnotes--inverted:is(ol) li .sd-footnotes--marker::before, .sd-footnotes--inverted:is(ol) li::before {
-          color: rgba(var(--sd-color-text-white)) !important;
+          color: rgba(var(--sd-color-text-white, 255 255 255)) !important;
         }
 .sd-footnotes--marker {
     position: relative;
-    bottom: var(--sd-spacing-2);
+    bottom: var(--sd-spacing-2, 0.5rem);
     display: inline-block;
-    --tw-font-weight: var(--sd-font-weight-bold);
-    font-weight: var(--sd-font-weight-bold);
+    --tw-font-weight: var(--sd-font-weight-bold, 600);
+    font-weight: var(--sd-font-weight-bold, 600);
     white-space: nowrap;
     text-decoration-line: none !important;
     font-size: x-small;
   }
 .sd-footnotes--marker:target {
-      background-color: rgba(var(--sd-color-background-neutral-200));
+      background-color: rgba(var(--sd-color-background-neutral-200, 233 233 233));
     }
 .sd-footnotes--marker:not(:has(a))::before {
         content: '[ ';
@@ -383,8 +383,8 @@
       }
 .sd-footnotes--marker :is(a) {
       display: inline-block;
-      --tw-font-weight: var(--sd-font-weight-bold);
-      font-weight: var(--sd-font-weight-bold);
+      --tw-font-weight: var(--sd-font-weight-bold, 600);
+      font-weight: var(--sd-font-weight-bold, 600);
       white-space: nowrap;
       text-decoration-line: none !important;
     }
@@ -397,23 +397,23 @@
         display: inline-block;
       }
 .sd-footnotes--marker :is(a):focus-visible {
-        border-radius: var(--sd-radius);
+        border-radius: var(--sd-radius, 0.25rem);
         outline-width: 1px;
         outline-style: var(--tw-outline-style);
         outline-width: 2px;
         outline-offset: 2px;
-        outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
+        outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
       }
 .sd-footnotes--marker:link, .sd-footnotes--marker:visited {
-      color: rgba(var(--sd-color-text-primary));
+      color: rgba(var(--sd-color-text-primary, 0 53 142));
     }
 .sd-footnotes--marker:focus-visible {
-      border-radius: var(--sd-radius);
+      border-radius: var(--sd-radius, 0.25rem);
       outline-width: 1px;
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
       outline-offset: 2px;
-      outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
+      outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
     }
 :lang(en) {
   --sd-hidden-links-title: 'Jump to';
@@ -434,71 +434,71 @@
   }
 .sd-hidden-links{
   position: absolute;
-  top: var(--sd-spacing-6);
-  left: var(--sd-spacing-6);
+  top: var(--sd-spacing-6, 1.5rem);
+  left: var(--sd-spacing-6, 1.5rem);
   border-style: var(--tw-border-style);
   border-width: 1px;
-  border-color: rgba(var(--sd-panel-color-border, rgba(255, 255, 255, 0)));
+  border-color: rgba(var(--sd-panel-color-border, 255 255 255 / 0));
 }
 .sd-hidden-links--multiple {
     display: flex;
     flex-direction: column;
-    background-color: rgba(var(--sd-color-background-white));
-    padding-inline: var(--sd-spacing-2);
-    padding-block: var(--sd-spacing-4);
-    --tw-shadow: var(--sd-shadow);
+    background-color: rgba(var(--sd-color-background-white, 255 255 255));
+    padding-inline: var(--sd-spacing-2, 0.5rem);
+    padding-block: var(--sd-spacing-4, 1rem);
+    --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgba(81, 81, 81, 0.75));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 .sd-hidden-links--multiple:before {
-      padding-inline: var(--sd-spacing-4);
-      padding-block: var(--sd-spacing-2);
-      --tw-font-weight: var(--sd-font-weight-bold);
-      font-weight: var(--sd-font-weight-bold);
-      content: var(--sd-hidden-links-title);
+      padding-inline: var(--sd-spacing-4, 1rem);
+      padding-block: var(--sd-spacing-2, 0.5rem);
+      --tw-font-weight: var(--sd-font-weight-bold, 600);
+      font-weight: var(--sd-font-weight-bold, 600);
+      content: var(--sd-hidden-links-title, 'Jump to');
     }
 mark.sd-mark {
   background-color: transparent;
-  color: rgba(var(--sd-color-text-accent));
+  color: rgba(var(--sd-color-text-accent, 45 157 0));
 }
 .sd-meta {
-  font-size: var(--sd-text-base);
+  font-size: var(--sd-text-base, 1rem);
   line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   --tw-leading: 1;
   line-height: 1;
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-meta--size-sm {
-    font-size: var(--sd-text-sm);
+    font-size: var(--sd-text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
 .sd-meta--light {
-    color: rgba(var(--sd-color-text-neutral-700));
+    color: rgba(var(--sd-color-text-neutral-700, 104 104 104));
   }
 .sd-meta--inverted {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-meta--inverted.sd-meta--light {
-      color: rgba(var(--sd-color-text-primary-400));
+      color: rgba(var(--sd-color-text-primary-400, 153 171 208));
     }
 .sd-meta--pipe::after {
       content: '|';
-      margin-inline: var(--sd-spacing-1);
+      margin-inline: var(--sd-spacing-1, 0.25rem);
     }
 .sd-meta--pipe.sd-meta--size-sm::after {
-        margin-inline: var(--sd-spacing-0\.5);
+        margin-inline: var(--sd-spacing-0\.5, 0.125rem);
       }
 .sd-pagination > :not(ul) {
     position: absolute;
-    height: var(--sd-spacing-0\.25);
-    width: var(--sd-spacing-0\.25);
+    height: var(--sd-spacing-0\.25, 0.0625rem);
+    width: var(--sd-spacing-0\.25, 0.0625rem);
     overflow: hidden;
   }
 .sd-pagination ul {
     display: flex;
     align-items: center;
-    gap: var(--sd-spacing-2);
+    gap: var(--sd-spacing-2, 0.5rem);
   }
 .sd-pagination ul li button {
       all: unset;
@@ -518,29 +518,29 @@ mark.sd-mark {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: rgba(var(--sd-color-text-primary));
+      color: rgba(var(--sd-color-text-primary, 0 53 142));
       text-decoration-line: none;
       transition-property: color;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
       transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
     }
 .sd-pagination ul li a:hover:not([disabled]), .sd-pagination ul li button:hover:not([disabled]) {
-        color: rgba(var(--sd-color-text-primary-500));
+        color: rgba(var(--sd-color-text-primary-500, 70 109 175));
       }
 .sd-pagination ul li a:active:not([disabled]), .sd-pagination ul li button:active:not([disabled]) {
-        color: rgba(var(--sd-color-text-primary-800));
+        color: rgba(var(--sd-color-text-primary-800, 5 21 48));
       }
 .sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
         outline-width: 1px;
         outline-style: var(--tw-outline-style);
         outline-width: 2px;
         outline-offset: 2px;
-        outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
+        outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
       }
 .sd-pagination ul li:first-child, .sd-pagination ul li:last-child {
-      height: var(--sd-spacing-12);
-      width: var(--sd-spacing-12);
-      font-size: var(--sd-text-xl);
+      height: var(--sd-spacing-12, 3rem);
+      width: var(--sd-spacing-12, 3rem);
+      font-size: var(--sd-text-xl, 1.5rem);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
     }
 .sd-pagination ul li:first-child a, .sd-pagination ul li:first-child button, .sd-pagination ul li:last-child a, .sd-pagination ul li:last-child button {
@@ -549,8 +549,8 @@ mark.sd-mark {
       }
 .sd-pagination ul li {
       display: flex;
-      height: var(--sd-spacing-8);
-      width: var(--sd-spacing-8);
+      height: var(--sd-spacing-8, 2rem);
+      width: var(--sd-spacing-8, 2rem);
       align-items: center;
       justify-content: center;
       text-align: center;
@@ -559,21 +559,21 @@ mark.sd-mark {
           height: 100%;
           width: 100%;
           border-bottom-style: var(--tw-border-style);
-          border-bottom-width: var(--sd-border-width-2);
+          border-bottom-width: var(--sd-border-width-2, 0.125rem);
           border-bottom-color: transparent;
         }
 .sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
-            border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
+            border-color: rgba(var(--sd-pagination--default-border, 45 157 0));
           }
 .sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
-        color: rgba(var(--sd-color-text-black));
+        color: rgba(var(--sd-color-text-black, 24 24 24));
       }
 .sd-pagination ul li a[aria-current]:hover:not([disabled]), .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
-          color: rgba(var(--sd-color-text-black));
+          color: rgba(var(--sd-color-text-black, 24 24 24));
         }
 .sd-pagination ul li:first-child:has(a:not([href])) a, .sd-pagination ul li:last-child:has(a:not([href])) a, .sd-pagination ul li:first-child:has(button[disabled]) button, .sd-pagination ul li:last-child:has(button[disabled]) button {
       cursor: not-allowed;
-      color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+      color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
     }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
           pointer-events: none;
@@ -674,11 +674,11 @@ mark.sd-mark {
         }
 .sd-pagination--simple ul li:nth-child(2) {
         position: relative;
-        margin-inline-end: calc(var(--sd-spacing-1) * 5);
-        width: var(--sd-spacing-8);
+        margin-inline-end: calc(var(--sd-spacing-1, 0.25rem) * 5);
+        width: var(--sd-spacing-8, 2rem);
         border-bottom-style: var(--tw-border-style);
-        border-bottom-width: var(--sd-border-width-2);
-        border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
+        border-bottom-width: var(--sd-border-width-2, 0.125rem);
+        border-color: rgba(var(--sd-pagination--default-border, 45 157 0));
       }
 .sd-pagination--simple ul li:nth-child(2)::after {
           content: var(--tw-content);
@@ -702,143 +702,143 @@ mark.sd-mark {
 }
 .sd-pagination--simple ul li:nth-last-child(2) {
         border-bottom-style: var(--tw-border-style);
-        border-bottom-width: var(--sd-border-width-2);
+        border-bottom-width: var(--sd-border-width-2, 0.125rem);
         border-bottom-color: transparent;
       }
 .sd-pagination--inverted ul li::after {
         content: var(--tw-content);
-        color: rgba(var(--sd-color-text-white));
+        color: rgba(var(--sd-color-text-white, 255 255 255));
       }
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
-        color: rgba(var(--sd-color-text-neutral-600));
+        color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
       }
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-          color: rgba(var(--sd-color-text-neutral-600));
+          color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
         }
 .sd-pagination--inverted ul li a, .sd-pagination--inverted ul li a[aria-current], .sd-pagination--inverted ul li button, .sd-pagination--inverted ul li button[aria-current] {
-        color: rgba(var(--sd-color-text-white));
+        color: rgba(var(--sd-color-text-white, 255 255 255));
       }
 .sd-pagination--inverted ul li a:hover:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-pagination--inverted ul li button:hover:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
-          color: rgba(var(--sd-color-text-primary-200));
+          color: rgba(var(--sd-color-text-primary-200, 224 233 243));
         }
 .sd-pagination--inverted ul li a:active:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-pagination--inverted ul li button:active:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
-          color: rgba(var(--sd-color-text-primary-400));
+          color: rgba(var(--sd-color-text-primary-400, 153 171 208));
         }
 .sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-pagination--inverted ul li button[aria-current]:focus-visible {
-          outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white)));
+          outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white, 255 255 255)));
         }
 .sd-pagination--inverted ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination--inverted ul li:not(:first-child):not(:last-child) button[aria-current] {
-            border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
+            border-color: rgba(var(--sd-pagination--inverted-border, 45 157 0));
           }
 .sd-pagination--inverted.sd-pagination--simple ul li {
-      color: rgba(var(--sd-color-text-white));
+      color: rgba(var(--sd-color-text-white, 255 255 255));
     }
 .sd-pagination--inverted.sd-pagination--simple ul li::after {
         content: var(--tw-content);
-        color: rgba(var(--sd-color-text-white));
+        color: rgba(var(--sd-color-text-white, 255 255 255));
       }
 .sd-pagination--inverted.sd-pagination--simple ul li:nth-child(2) {
-        border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
+        border-color: rgba(var(--sd-pagination--inverted-border, 45 157 0));
       }
 .sd-status-badge {
   display: inline-flex;
   align-items: center;
 }
 .sd-status-badge sd-icon {
-    margin-right: var(--sd-spacing-2);
+    margin-right: var(--sd-spacing-2, 0.5rem);
     display: flex;
-    height: var(--sd-spacing-3);
-    width: var(--sd-spacing-3);
-    border-radius: var(--sd-radius-full);
-    padding: var(--sd-spacing-1);
-    color: rgba(var(--sd-color-text-white)) !important;
+    height: var(--sd-spacing-3, 0.75rem);
+    width: var(--sd-spacing-3, 0.75rem);
+    border-radius: var(--sd-radius-full, 624.9375rem);
+    padding: var(--sd-spacing-1, 0.25rem);
+    color: rgba(var(--sd-color-text-white, 255 255 255)) !important;
   }
 .sd-status-badge--success sd-icon {
-      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-accent-550))));
+      background-color: rgba(var(--sd-badge--green-color-background, 54 123 40));
     }
 .sd-status-badge--warning sd-icon {
-      background-color: rgba(var(--sd-color-background-warning));
+      background-color: rgba(var(--sd-color-background-warning, 187 141 32));
     }
 .sd-status-badge--error sd-icon {
-      background-color: rgba(var(--sd-badge--red-color-background, rgba(var(--sd-color-error))));
+      background-color: rgba(var(--sd-badge--red-color-background, 204 25 55));
     }
 .sd-status-badge--info sd-icon {
-      background-color: rgba(var(--sd-color-background-info));
+      background-color: rgba(var(--sd-color-background-info, 21 130 213));
     }
 .sd-display {
-  font-size: var(--sd-text-3xl);
+  font-size: var(--sd-text-3xl, 2rem);
   line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
   --tw-leading: var(--leading-tight, 1.25);
   line-height: var(--leading-tight, 1.25);
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 @media (width >= 64rem) {
 .sd-display {
-    font-size: var(--sd-text-4xl);
+    font-size: var(--sd-text-4xl, 2.5rem);
     line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
   }
 .sd-display--size-xl {
-      font-size: var(--sd-text-xl);
+      font-size: var(--sd-text-xl, 1.5rem);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
       --tw-leading: var(--leading-tight, 1.25);
       line-height: var(--leading-tight, 1.25);
-      --tw-font-weight: var(--sd-font-weight-normal);
-      font-weight: var(--sd-font-weight-normal);
-      color: rgba(var(--sd-color-text-black));
+      --tw-font-weight: var(--sd-font-weight-normal, 400);
+      font-weight: var(--sd-font-weight-normal, 400);
+      color: rgba(var(--sd-color-text-black, 24 24 24));
     }
 .sd-display--size-3xl {
-      font-size: var(--sd-text-2xl);
+      font-size: var(--sd-text-2xl, 1.75rem);
       line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
       --tw-leading: var(--leading-tight, 1.25);
       line-height: var(--leading-tight, 1.25);
-      --tw-font-weight: var(--sd-font-weight-normal);
-      font-weight: var(--sd-font-weight-normal);
-      color: rgba(var(--sd-color-text-black));
+      --tw-font-weight: var(--sd-font-weight-normal, 400);
+      font-weight: var(--sd-font-weight-normal, 400);
+      color: rgba(var(--sd-color-text-black, 24 24 24));
     }
 @media (width >= 64rem) {
 .sd-display--size-3xl {
-        font-size: var(--sd-text-3xl);
+        font-size: var(--sd-text-3xl, 2rem);
         line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
     }
       }
 .sd-display--inverted {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-headline, .sd-prose :is(h1, h2, h3, h4, h5) {
   display: flex;
-  --tw-font-weight: var(--sd-font-weight-bold);
-  font-weight: var(--sd-font-weight-bold);
-  color: rgba(var(--sd-color-text-primary));
+  --tw-font-weight: var(--sd-font-weight-bold, 600);
+  font-weight: var(--sd-font-weight-bold, 600);
+  color: rgba(var(--sd-color-text-primary, 0 53 142));
 }
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
     flex-shrink: 0;
     font-size: 3rem;
-    color: rgba(var(--sd-color-text-primary));
+    color: rgba(var(--sd-color-text-primary, 0 53 142));
   }
 @media (width >= 40rem) {
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-      margin-top: var(--sd-spacing-2)
+      margin-top: var(--sd-spacing-2, 0.5rem)
   }
     }
 .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-    gap: var(--sd-spacing-4);
-    font-size: var(--sd-text-3xl);
+    gap: var(--sd-spacing-4, 1rem);
+    font-size: var(--sd-text-3xl, 2rem);
     line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
     --tw-leading: var(--leading-tight, 1.25);
     line-height: var(--leading-tight, 1.25);
-    color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
+    color: rgba(var(--sd-headline--3xl-onwards-color-text, 0 53 142));
   }
 @media (width >= 40rem) {
 .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-      font-size: var(--sd-text-4xl);
+      font-size: var(--sd-text-4xl, 2.5rem);
       line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
   }
     }
 .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
@@ -846,44 +846,44 @@ mark.sd-mark {
     }
       }
 .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
-    gap: var(--sd-spacing-4);
-    font-size: var(--sd-text-2xl);
+    gap: var(--sd-spacing-4, 1rem);
+    font-size: var(--sd-text-2xl, 1.75rem);
     line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
     --tw-leading: var(--leading-tight, 1.25);
     line-height: var(--leading-tight, 1.25);
-    color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
+    color: rgba(var(--sd-headline--3xl-onwards-color-text, 0 53 142));
   }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
-      font-size: var(--sd-text-3xl);
+      font-size: var(--sd-text-3xl, 2rem);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
   }
     }
 .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-1) * -1)
+        margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1)
     }
       }
 .sd-headline.sd-headline--size-xl, .sd-headline.sd-headline--size-lg, .sd-headline.sd-headline--size-base, .sd-headline:is(h3, h4, h5):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) {
-    gap: var(--sd-spacing-2);
-    color: rgba(var(--sd-color-text-black));
+    gap: var(--sd-spacing-2, 0.5rem);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline.sd-headline--size-lg sd-icon, .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h3, h4, h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) sd-icon {
       font-size: 2rem;
     }
 .sd-headline.sd-headline--size-xl, .sd-headline:is(h3):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) {
-    font-size: var(--sd-text-xl);
+    font-size: var(--sd-text-xl, 1.5rem);
     line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
   }
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-0\.5) * -1);
+      margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-0\.5) * -1)
+        margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1)
     }
       }
 .sd-headline.sd-headline--size-lg, .sd-headline.sd-headline--size-base, .sd-headline:is(h4, h5):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base, .sd-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-headline) {
@@ -891,23 +891,23 @@ mark.sd-mark {
     line-height: var(--leading-normal, 1.5);
   }
 .sd-headline.sd-headline--size-lg, .sd-headline:is(h4), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) {
-    font-size: var(--sd-text-lg);
+    font-size: var(--sd-text-lg, 1.25rem);
     line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
   }
 .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-      margin-top: calc(var(--sd-spacing-0\.5) * -1);
+      margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-        margin-top: calc(var(--sd-spacing-0\.5) * -1)
+        margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1)
     }
       }
 .sd-headline.sd-headline--size-base, .sd-headline:is(h5):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) {
-    font-size: var(--sd-text-base);
+    font-size: var(--sd-text-base, 1rem);
     line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   }
 .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 .sd-headline.sd-headline--size-base mark, .sd-headline:is(h5):not(.sd-headline) mark, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base mark, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) mark {
       color: inherit;
@@ -916,24 +916,24 @@ mark.sd-mark {
   display: inline-block;
 }
 .sd-headline--inline.sd-headline sd-icon, .sd-headline--inline:is(h1):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-2) * -1);
-      margin-right: var(--sd-spacing-2);
+      margin-top: calc(var(--sd-spacing-2, 0.5rem) * -1);
+      margin-right: var(--sd-spacing-2, 0.5rem);
       vertical-align: middle;
     }
 .sd-headline--inline:is(.sd-headline--size-xl, .sd-headline--size-lg, .sd-headline--size-base) sd-icon {
-      margin-right: var(--sd-spacing-0\.5);
+      margin-right: var(--sd-spacing-0\.5, 0.125rem);
     }
 .sd-headline--inline:is(.sd-headline--size-3xl, .sd-headline--size-xl) sd-icon {
-      margin-top: calc(var(--sd-spacing-2) * -1);
+      margin-top: calc(var(--sd-spacing-2, 0.5rem) * -1);
     }
 .sd-headline--inline:is(.sd-headline--size-lg) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 .sd-headline--inverted:not(#_), .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-prose a--reset, .sd-interactive--reset {
     all: unset;
@@ -941,7 +941,7 @@ mark.sd-mark {
   }
 .sd-prose a, .sd-interactive{
   cursor: pointer;
-  color: rgba(var(--sd-interactive--default-color-text, rgba(var(--sd-color-primary))));
+  color: rgba(var(--sd-interactive--default-color-text, 0 53 142));
   text-decoration-line: underline;
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
@@ -952,7 +952,7 @@ mark.sd-mark {
   transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
 .sd-prose a:hover:not([disabled]), .sd-interactive:hover:not([disabled]) {
-    color: rgba(var(--sd-color-text-primary-500));
+    color: rgba(var(--sd-color-text-primary-500, 70 109 175));
   }
 .sd-prose a:focus-visible, .sd-interactive:focus-visible {
     outline-style: solid;
@@ -961,35 +961,35 @@ mark.sd-mark {
     outline-color: var(--outline-color-primary);
   }
 .sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
-    color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
+    color: rgba(var(--sd-interactive--active-color-text, 5 21 48));
   }
 .sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
     text-decoration-line: none;
   }
 .sd-prose a--disabled, .sd-prose a[disabled], .sd-prose a[href=''], .sd-interactive--disabled, .sd-interactive[disabled], .sd-interactive[href=''] {
     cursor: not-allowed;
-    color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+    color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
   }
 .sd-prose a--disabled:hover:not([disabled]), .sd-prose a[disabled]:hover:not([disabled]), .sd-prose a[href='']:hover:not([disabled]), .sd-interactive--disabled:hover:not([disabled]), .sd-interactive[disabled]:hover:not([disabled]), .sd-interactive[href='']:hover:not([disabled]) {
-      color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+      color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
     }
 .sd-prose a--disabled:active:not([disabled]), .sd-prose a[disabled]:active:not([disabled]), .sd-prose a[href='']:active:not([disabled]), .sd-interactive--disabled:active:not([disabled]), .sd-interactive[disabled]:active:not([disabled]), .sd-interactive[href='']:active:not([disabled]) {
-      color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+      color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
     }
 .sd-prose a--disabled.sd-interactive--inverted, .sd-prose a[disabled].sd-interactive--inverted, .sd-prose a[href=''].sd-interactive--inverted, .sd-interactive--disabled.sd-interactive--inverted, .sd-interactive[disabled].sd-interactive--inverted, .sd-interactive[href=''].sd-interactive--inverted {
-      color: rgba(var(--sd-color-text-neutral-600));
+      color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
     }
 .sd-prose a--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:hover:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:hover:not([disabled]) {
-        color: rgba(var(--sd-color-text-neutral-600));
+        color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
       }
 .sd-prose a--disabled.sd-interactive--inverted:active:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:active:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:active:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:active:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:active:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:active:not([disabled]) {
-        color: rgba(var(--sd-color-text-neutral-600));
+        color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
       }
 .sd-prose--inverted a, .sd-interactive--inverted {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-prose--inverted a:hover:not([disabled]), .sd-interactive--inverted:hover:not([disabled]) {
-    color: rgba(var(--sd-color-text-primary-200));
+    color: rgba(var(--sd-color-text-primary-200, 224 233 243));
   }
 .sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
     outline-style: solid;
@@ -998,39 +998,39 @@ mark.sd-mark {
     outline-color: var(--outline-color-primary);
   }
 .sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
-    color: rgba(var(--sd-color-text-primary-400));
+    color: rgba(var(--sd-color-text-primary-400, 153 171 208));
   }
 .sd-prose > .sd-leadtext, .sd-leadtext {
-  font-size: var(--sd-text-xl);
+  font-size: var(--sd-text-xl, 1.5rem);
   line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
   --tw-leading: var(--leading-normal, 1.5);
   line-height: var(--leading-normal, 1.5);
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
-    font-size: var(--sd-text-lg);
+    font-size: var(--sd-text-lg, 1.25rem);
     line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
     --tw-leading: var(--leading-normal, 1.5);
     line-height: var(--leading-normal, 1.5);
-    --tw-font-weight: var(--sd-font-weight-normal);
-    font-weight: var(--sd-font-weight-normal);
-    color: rgba(var(--sd-color-text-black));
+    --tw-font-weight: var(--sd-font-weight-normal, 400);
+    font-weight: var(--sd-font-weight-normal, 400);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .sd-prose--inverted > .sd-leadtext, .sd-leadtext--inverted {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-list:not(.sd-list--icon), .sd-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
-  padding-block: var(--sd-spacing-4);
-  padding-left: var(--sd-spacing-4);
+  padding-block: var(--sd-spacing-4, 1rem);
+  padding-left: var(--sd-spacing-4, 1rem);
   text-align: left;
 }
 .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
-    margin-top: var(--sd-spacing-3);
+    margin-top: var(--sd-spacing-3, 0.75rem);
   }
 .sd-list:not(.sd-list--icon) ul, .sd-list:not(.sd-list--icon) ol, .sd-prose > :is(ol, ul) ul, .sd-prose > :is(ol, ul) ol {
     all: revert;
@@ -1091,11 +1091,11 @@ mark.sd-mark {
               list-style-type: '\2010';
             }
 .sd-list--icon {
-  padding-block: var(--sd-spacing-4);
+  padding-block: var(--sd-spacing-4, 1rem);
   text-align: left;
 }
 .sd-list--icon li sd-icon:first-of-type, .sd-list--icon li .sd-list--icon__icon:first-of-type {
-      color: rgba(var(--sd-color-text-white));
+      color: rgba(var(--sd-color-text-white, 255 255 255));
     }
 .sd-list--icon{
   list-style-type: '';
@@ -1105,17 +1105,17 @@ mark.sd-mark {
   }
 .sd-list--icon li {
     position: relative;
-    padding-top: var(--sd-spacing-3);
-    padding-left: var(--sd-spacing-10);
+    padding-top: var(--sd-spacing-3, 0.75rem);
+    padding-left: var(--sd-spacing-10, 2.5rem);
     --tw-leading: 32px;
     line-height: 32px;
   }
 .sd-list--icon li > sd-icon:first-of-type, .sd-list--icon li > .sd-list--icon__icon:first-of-type {
       position: absolute;
       left: 0;
-      font-size: var(--sd-text-3xl);
+      font-size: var(--sd-text-3xl, 2rem);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
-      color: rgb(var(--sd-color-icon-fill-primary));
+      color: rgb(var(--sd-color-icon-fill-primary, 0 53 142));
     }
 .sd-list--icon.sd-list--horizontal {
     display: flex;
@@ -1125,46 +1125,46 @@ mark.sd-mark {
       padding-top: 0;
     }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
-      margin-right: var(--sd-spacing-8);
+      margin-right: var(--sd-spacing-8, 2rem);
     }
 .sd-list--inverted, .sd-prose--inverted > :is(ol, ul) {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-list--inverted li > sd-icon:first-of-type, .sd-list--inverted li > .sd-list--icon__icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > .sd-list--icon__icon:first-of-type {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-paragraph, .sd-prose p {
-  font-size: var(--sd-text-base);
+  font-size: var(--sd-text-base, 1rem);
   line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   --tw-leading: var(--leading-normal, 1.5);
   line-height: var(--leading-normal, 1.5);
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-paragraph--size-sm, .sd-prose p--size-sm {
-    font-size: var(--sd-text-sm);
+    font-size: var(--sd-text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     --tw-leading: var(--leading-normal, 1.5);
     line-height: var(--leading-normal, 1.5);
-    --tw-font-weight: var(--sd-font-weight-normal);
-    font-weight: var(--sd-font-weight-normal);
-    color: rgba(var(--sd-color-text-black));
+    --tw-font-weight: var(--sd-font-weight-normal, 400);
+    font-weight: var(--sd-font-weight-normal, 400);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .sd-paragraph--inverted, .sd-prose--inverted p {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-prose figure, figure.sd-media {
   margin: 0;
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
-    color: rgba(var(--sd-color-text-neutral-700));
+    color: rgba(var(--sd-color-text-neutral-700, 104 104 104));
   }
 .sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
-      margin-top: var(--sd-spacing-3);
+      margin-top: var(--sd-spacing-3, 0.75rem);
     }
 .sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-    color: rgba(var(--sd-color-text-primary-400));
+    color: rgba(var(--sd-color-text-primary-400, 153 171 208));
   }
 .sd-prose td, .sd-prose th, .sd-table-cell {
   border-inline-style: var(--tw-border-style);
@@ -1173,13 +1173,13 @@ mark.sd-mark {
   border-block-width: 1px;
   --tw-border-style: solid;
   border-style: solid;
-  border-color: rgba(var(--sd-color-border-neutral-400));
+  border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
   background-color: transparent;
-  padding: var(--sd-spacing-4);
+  padding: var(--sd-spacing-4, 1rem);
   text-align: left;
-  font-size: var(--sd-text-sm);
+  font-size: var(--sd-text-sm, 0.875rem);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-  color: rgba(var(--sd-color-text-black));
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-table-cell--divider {
     border-right-style: var(--tw-border-style);
@@ -1188,10 +1188,10 @@ mark.sd-mark {
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after, .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       pointer-events: none;
       position: absolute;
-      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10), transparent);
+      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10, 10%), transparent);
       --tw-gradient-to: transparent;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-      opacity: var(--sd-opacity-0);
+      opacity: var(--sd-opacity-0, 0%);
       transition-property: opacity;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
       transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
@@ -1203,7 +1203,7 @@ mark.sd-mark {
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
       right: 0;
       left: 0;
-      height: var(--sd-spacing-2\.5);
+      height: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
@@ -1213,14 +1213,14 @@ mark.sd-mark {
       width: 100%;
       border-style: var(--tw-border-style);
       border-width: 0.5px;
-      border-color: rgba(var(--sd-color-border-neutral-400));
+      border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       --tw-content: '';
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       top: 0;
       bottom: 0;
-      width: var(--sd-spacing-2\.5);
+      width: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {
     opacity: 100%;
@@ -1252,13 +1252,13 @@ mark.sd-mark {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 .sd-table-cell--bg-white {
-      background-color: rgba(var(--sd-color-background-white));
+      background-color: rgba(var(--sd-color-background-white, 255 255 255));
     }
 .sd-table-cell--bg-primary-100 {
-      background-color: rgba(var(--sd-color-background-primary-100));
+      background-color: rgba(var(--sd-color-background-primary-100, 236 240 249));
     }
 .sd-table-cell--bg-neutral-100 {
-      background-color: rgba(var(--sd-color-background-neutral-100));
+      background-color: rgba(var(--sd-color-background-neutral-100, 246 246 246));
     }
 .sd-table, .sd-prose table {
   all: unset;
@@ -1276,31 +1276,31 @@ mark.sd-mark {
   text-align: left;
 }
 .sd-prose > *:not(:first-child) {
-    margin-top: var(--sd-spacing-4);
+    margin-top: var(--sd-spacing-4, 1rem);
   }
 .sd-prose > *:first-child {
     margin-top: 0;
   }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
-    margin-top: var(--sd-spacing-2);
+    margin-top: var(--sd-spacing-2, 0.5rem);
   }
 .sd-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
-    margin-top: var(--sd-spacing-8);
+    margin-top: var(--sd-spacing-8, 2rem);
   }
 .sd-prose > figure + *:not(#_), .sd-prose > img + *:not(#_) {
-    margin-top: var(--sd-spacing-6);
+    margin-top: var(--sd-spacing-6, 1.5rem);
   }
 .sd-prose hr {
     height: 0;
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
-    border-color: rgba(var(--sd-color-border-neutral-500));
+    border-color: rgba(var(--sd-color-border-neutral-500, 174 174 174));
   }
 .sd-prose pre {
     overflow: auto;
   }
 .sd-prose blockquote, .sd-prose blockquote > * {
-      font-size: var(--sd-text-xl);
+      font-size: var(--sd-text-xl, 1.5rem);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
     }
 .sd-prose blockquote:has(*) *:first-child::before, .sd-prose blockquote:not(:has(*))::before {
@@ -1315,10 +1315,10 @@ mark.sd-mark {
     padding-block: 0;
   }
 .sd-prose--inverted hr {
-      border-color: rgba(var(--sd-color-border-white));
+      border-color: rgba(var(--sd-color-border-white, 255 255 255));
     }
 .sd-prose--inverted pre {
-      color: rgba(var(--sd-color-text-white));
+      color: rgba(var(--sd-color-text-white, 255 255 255));
     }
 .sd-prose--full-width {
     max-width: unset;