@solid-design-system/styles 1.5.5 → 2.0.0-next.1

package/dist/solid-styles.css

@@ -1,243 +1,147 @@
-/**
- * Generates basic styles for chip elements.
- * @name sd-chip
- * @status stable
- * @since 1.30.0
- * @variant { primary-300 | primary-500 | white } sd-chip--...
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
 .sd-chip {
   display: inline-flex;
-  height: var(--sd-spacing-6, 1.5rem) /* 24px */;
+  height: var(--sd-spacing-6);
   align-items: center;
   overflow: hidden;
+  border-radius: var(--sd-radius);
+  background-color: var(--sd-color-background-primary-200);
+  padding-inline: var(--sd-spacing-2);
+  font-size: var(--sd-text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
-  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-  
-  background-color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) on primary-100 */;
-  padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-chip--primary-500 {
-  
-  background-color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+  color: var(--sd-color-text-black);
 }
-
+.sd-chip--primary-500 {
+    background-color: var(--sd-color-background-primary-500);
+    color: var(--sd-color-text-white);
+  }
 .sd-chip--primary-300 {
-  
-  background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */;
-}
-
+    background-color: var(--sd-color-background-primary-300);
+  }
 .sd-chip--white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
-/**
- * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
- * @name sd-container
- * @status stable
- * @since 1.30.0
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-container--variant-... Defines the background color and border of sd-container.
- * @variant { sm } sd-container--padding-... Defines the padding of sd-container. This makes it adaptable to both small and large screens.
- * @variant { top | right | bottom | left } sd-container--triangle-... Defines an optional triangle cut-out for sd-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
- */
-
+    background-color: var(--sd-color-background-white);
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;}
 .sd-container {
   position: relative;
-  
-  background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  padding-right: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  padding-top: var(--sd-spacing-8, 2rem) /* 32px */;
-  padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-.sd-container--variant-primary-100 {
-  
-  background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
+  background-color: var(--sd-color-background-neutral-100);
+  padding-inline: var(--sd-spacing-10);
+  padding-block: var(--sd-spacing-8);
 }
-
+.sd-container--variant-primary-100 {
+    background-color: var(--sd-color-background-primary-100);
+  }
 .sd-container--variant-primary {
-  
-  background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
-Used for button */;
-}
-
+    background-color: var(--sd-color-background-primary);
+  }
 .sd-container--variant-border-neutral-400 {
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--sd-color-border-neutral-400);
+    background-color: var(--sd-color-background-white);
     border-width: 1px;
-}
-
+  }
 .sd-container--variant-white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
+    background-color: var(--sd-color-background-white);
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;}
 .sd-container--padding-sm {
-  padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
-.sd-container {
-
-  --triangle-background: white;
-}
-
-.sd-container--triangle-top::before,
-  .sd-container--triangle-right::before,
-  .sd-container--triangle-bottom::before,
-  .sd-container--triangle-left::before {
-  position: absolute;
-  display: block;
-  border-style: solid;
-  border-color: transparent;
+    padding-inline: var(--sd-spacing-6);
+    padding-block: var(--sd-spacing-4);
+  }
+.sd-container{
+  --triangle-background: var(--sd-color-white);
+}
+.sd-container--triangle-top::before, .sd-container--triangle-right::before, .sd-container--triangle-bottom::before, .sd-container--triangle-left::before {
+    position: absolute;
+    display: block;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: transparent;
     border-width: 14px;
     content: '';
-}
-
+  }
 .sd-container--triangle-top::before {
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    top: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-right::before {
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    right: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-bottom::before {
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-left::before {
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    left: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
-}
-
-.sd-container--triangle-top-border::after,
-    .sd-container--triangle-top-border::before,
-    .sd-container--triangle-right-border::after,
-    .sd-container--triangle-right-border::before,
-    .sd-container--triangle-bottom-border::after,
-    .sd-container--triangle-bottom-border::before,
-    .sd-container--triangle-left-border::after,
-    .sd-container--triangle-left-border::before {
-  position: absolute;
-  display: block;
-  border-style: solid;
-  border-color: transparent;
+  }
+.sd-container--triangle-top-border::after, .sd-container--triangle-top-border::before, .sd-container--triangle-right-border::after, .sd-container--triangle-right-border::before, .sd-container--triangle-bottom-border::after, .sd-container--triangle-bottom-border::before, .sd-container--triangle-left-border::after, .sd-container--triangle-left-border::before {
+      position: absolute;
+      display: block;
+      --tw-border-style: solid;
+      border-style: solid;
+      border-color: transparent;
       content: '';
-}
-
+    }
 .sd-container--triangle-top-border::after, .sd-container--triangle-right-border::after, .sd-container--triangle-bottom-border::after, .sd-container--triangle-left-border::after {
       border-width: 14px;
     }
-
 .sd-container--triangle-top-border::before, .sd-container--triangle-right-border::before, .sd-container--triangle-bottom-border::before, .sd-container--triangle-left-border::before {
       border-width: 15px;
     }
-
-.sd-container--triangle-top-border::after,
-    .sd-container--triangle-top-border::before {
+.sd-container--triangle-top-border::after, .sd-container--triangle-top-border::before {
       top: -1px;
     }
-
 .sd-container--triangle-top-border::before {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-top-color: var(--sd-color-border-neutral-400);
       left: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
-
-.sd-container--triangle-right-border::after,
-    .sd-container--triangle-right-border::before {
+.sd-container--triangle-right-border::after, .sd-container--triangle-right-border::before {
       right: -1px;
     }
-
 .sd-container--triangle-right-border::before {
-  --tw-border-opacity: 1;
-  border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-right-color: var(--sd-color-border-neutral-400);
       top: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
-
-.sd-container--triangle-bottom-border::after,
-    .sd-container--triangle-bottom-border::before {
+.sd-container--triangle-bottom-border::after, .sd-container--triangle-bottom-border::before {
       bottom: -1px;
     }
-
 .sd-container--triangle-bottom-border::before {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-bottom-color: var(--sd-color-border-neutral-400);
       left: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
-
-.sd-container--triangle-left-border::after,
-    .sd-container--triangle-left-border::before {
+.sd-container--triangle-left-border::after, .sd-container--triangle-left-border::before {
       left: -1px;
     }
-
 .sd-container--triangle-left-border::before {
-  --tw-border-opacity: 1;
-  border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-left-color: var(--sd-color-border-neutral-400);
       top: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }
-
-/**
- * Generates basic styles for copyright elements.
- * @name sd-copyright
- * @status stable
- * @since 2.5.0
- * @variant { vertical } sd-copyright--orientation-... The copyright's orientation.
- * @variant { black } sd-copyright--color-... The copyright's text color.
- * @boolean sd-copyright--... Removes the shadow.
- * @variant { top } sd-copyright--placement-... The copyright's placement.
- */
-
 .sd-copyright {
   position: relative;
-  /* Bug fix for drop-shadow-sm */
   --tw-blur: ;
   --tw-brightness: ;
   --tw-contrast: ;
@@ -247,1342 +151,826 @@ Used for divider, teaser, container, ...  */;
   --tw-saturate: ;
   --tw-sepia: ;
 }
-
 .sd-copyright::after {
-  position: absolute;
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display: block;
-  width: 100%;
-  padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-  --tw-drop-shadow: drop-shadow(var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81)));
-  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);
+    position: absolute;
+    bottom: calc(var(--sd-spacing-1) * 0);
+    left: calc(var(--sd-spacing-1) * 0);
+    display: block;
+    width: 100%;
+    padding-bottom: var(--sd-spacing-2);
+    padding-left: var(--sd-spacing-4);
+    font-size: var(--sd-text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    color: var(--sd-color-text-white);
+    --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-sm));
+    --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-sm));
+    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, 0.5rem) /* 8px */;
-  padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  padding-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
-  padding-left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+        width: -moz-max-content;
+        width: max-content;
+        padding-top: var(--sd-spacing-2);
+        padding-right: var(--sd-spacing-1);
+        padding-bottom: calc(var(--sd-spacing-1) * 0);
+        padding-left: calc(var(--sd-spacing-1) * 0);
         writing-mode: vertical-rl;
         text-orientation: sideways-right;
         transform: rotate(180deg);
-}
-
+      }
 .sd-copyright--color-black::after {
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+        color: var(--sd-color-text-black);
         filter: drop-shadow(0 0 transparent);
-}
-
+      }
 .sd-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
-
 .sd-copyright--placement-top::after {
-  position: absolute;
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display: block;
-  max-height: -moz-fit-content;
-  max-height: fit-content;
-  padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
-/**
- * Generates basic styles for flag elements.
- * @name sd-flag
- * @status stable
- * @since 1.34.0
- * @variant { neutral-300 | neutral-500 | white } sd-flag--...
- */
-
+        position: absolute;
+        top: calc(var(--sd-spacing-1) * 0);
+        right: calc(var(--sd-spacing-1) * 0);
+        display: block;
+        max-height: -moz-fit-content;
+        max-height: fit-content;
+        padding-top: var(--sd-spacing-2);
+        padding-right: var(--sd-spacing-4);
+      }
 .sd-flag {
   display: inline-flex;
-  height: var(--sd-spacing-8, 2rem) /* 32px */;
+  height: var(--sd-spacing-8);
   align-items: center;
   overflow: hidden;
+  background-color: var(--sd-color-background-neutral-200);
+  padding-inline: var(--sd-spacing-3);
+  font-size: var(--sd-text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
-  
-  background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
-  padding-left: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  padding-right: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-flag--neutral-500 {
-  
-  background-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-bg-opacity, 1)) /* Used for disabled state  */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+  color: var(--sd-color-text-black);
 }
-
+.sd-flag--neutral-500 {
+    background-color: var(--sd-flag--neutral-500-color-background, var(--sd-color-neutral-500));
+    color: var(--sd-color-text-black);
+  }
 .sd-flag--neutral-300 {
-  
-  background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */;
-}
-
+    background-color: var(--sd-color-background-neutral-300);
+  }
 .sd-flag--white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
-/**
- * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
- * @name sd-footnotes
- * @status stable
- * @since 3.0.0
- * @boolean sd-footnotes--inverted Inverts the footnote text.
- */
-
+    background-color: var(--sd-color-background-white);
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;}
 .sd-footnotes {
-  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  margin-block: calc(var(--sd-spacing-1) * 0);
+  padding: calc(var(--sd-spacing-1) * 0);
   text-align: left;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
+  font-size: var(--sd-text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: var(--sd-color-text-neutral-700);
 }
-
 .sd-footnotes :target {
-  
-  background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
-}
-
+    background-color: var(--sd-color-background-neutral-200);
+  }
 .sd-footnotes:is(ol) {
-  padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
+    padding-inline-start: var(--sd-spacing-8);
+  }
 .sd-footnotes:is(ol) li {
       counter-increment: list-item;
       position: relative;
       list-style-type: none;
     }
-
 .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, 2rem) /* 32px */ * -1);
-  flex-shrink: 0;
-  font-weight: 700;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+          position: absolute;
+          left: calc(var(--sd-spacing-8) * -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);
           content: '[ ' counter(list-item) ' ]';
           padding-top: 1px;
           font-size: 10px;
-}
-
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker::after, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::after, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::after {
           content: none;
         }
-
 .sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker {
-  display: inline-block;
+          display: inline-block;
           counter-increment: footnotes-multiple;
-}
-
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker::before {
-  position: relative;
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  vertical-align: super;
-  font-weight: 700;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+            position: relative;
+            left: calc(var(--sd-spacing-1) * 0);
+            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);
             content: counter(footnotes-multiple, lower-alpha);
-}
-
+          }
 .sd-footnotes:is(ol) li .sd-footnotes--marker {
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display: block;
-}
-
+        bottom: calc(var(--sd-spacing-1) * 0);
+        display: block;
+      }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible {
-  outline-width: 0px;
-}
-
+          outline-style: var(--tw-outline-style);
+          outline-width: 0px;
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible::before {
-  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
+            border-radius: var(--sd-radius);
+            outline-width: 1px;
+            outline-style: var(--tw-outline-style);
+            outline-width: 2px;
+            outline-offset: 2px;
+            outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+          }
 .sd-footnotes:is(ul) {
     list-style: '';
   }
-
 .sd-footnotes--inverted {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
+    color: var(--sd-color-text-primary-400);
+  }
 .sd-footnotes--inverted :target {
-  
-  background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
-}
-
+      background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+    }
 .sd-footnotes--inverted .sd-footnotes--marker::before {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
-}
-
+      color: var(--sd-color-text-white);
+      outline-color: var(--color-white, #fff) !important;
+    }
 .sd-footnotes--inverted:is(.sd-footnotes--marker) {
-  --tw-text-opacity: 1 !important;
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
-  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
-}
-
+      color: var(--sd-color-text-white) !important;
+      outline-color: var(--color-white, #fff) !important;
+    }
 .sd-footnotes--inverted:is(.sd-footnotes--marker):target {
-  
-  background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
-}
-
+        background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+      }
 .sd-footnotes--marker {
-  position: relative;
-  bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  display: inline-block;
-  white-space: nowrap;
-  font-weight: 700;
-  text-decoration-line: none !important;
+    position: relative;
+    bottom: var(--sd-spacing-2);
+    display: inline-block;
+    --tw-font-weight: var(--sd-font-weight-bold);
+    font-weight: var(--sd-font-weight-bold);
+    white-space: nowrap;
+    text-decoration-line: none !important;
     font-size: x-small;
-}
-
+  }
 .sd-footnotes--marker:target {
-  
-  background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
-}
-
+      background-color: var(--sd-color-background-neutral-200);
+    }
 .sd-footnotes--marker:not(:has(a))::before {
         content: '[ ';
         display: inline-block;
       }
-
 .sd-footnotes--marker:not(:has(a))::after {
         content: ' ]';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a) {
-  display: inline-block;
-  white-space: nowrap;
-  font-weight: 700;
-  text-decoration-line: none !important;
-}
-
+      display: inline-block;
+      --tw-font-weight: var(--sd-font-weight-bold);
+      font-weight: var(--sd-font-weight-bold);
+      white-space: nowrap;
+      text-decoration-line: none !important;
+    }
 .sd-footnotes--marker :is(a)::before {
         content: '[ ';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a)::after {
         content: ' ]';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a):focus-visible {
-  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
+        border-radius: var(--sd-radius);
+        outline-width: 1px;
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+      }
 .sd-footnotes--marker :is(a):link {
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-.sd-footnotes--marker:link,
-    .sd-footnotes--marker:visited {
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
+        color: var(--sd-color-text-primary);
+      }
+.sd-footnotes--marker:link, .sd-footnotes--marker:visited {
+      color: var(--sd-color-text-primary);
+    }
 .sd-footnotes--marker:focus-visible {
-  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-/**
- * Hidden links can be used to show links only for keyboard users.
- * @name sd-hidden-links
- * @status stable
- * @since 3.15.0
- * @boolean sd-hidden-links--multiple Adapts styling for multiple skip links.
- * @boolean sd-hidden-links--debug Always show the links for debugging purposes.
- */
-
+      border-radius: var(--sd-radius);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+    }
 :lang(en) {
   --sd-hidden-links-title: 'Jump to';
 }
-
 :lang(de) {
   --sd-hidden-links-title: 'Springe zu';
 }
-
 .sd-hidden-links:not(:focus-within):not(.sd-hidden-links--debug) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+.sd-hidden-links{
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.sd-hidden-links {
-  position: absolute;
-  top: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  left: var(--sd-spacing-6, 1.5rem) /* 24px */;
+  top: var(--sd-spacing-6);
+  left: var(--sd-spacing-6);
 }
-
 .sd-hidden-links--multiple {
-  display: flex;
-  flex-direction: column;
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-  padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-  --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
-  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sd-color-background-white);
+    padding-inline: var(--sd-spacing-2) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;;
+    padding-block: var(--sd-spacing-4);
+    --tw-shadow: var(--sd-shadow);
+    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-left: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  font-weight: 700;
+      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);
-}
-
-/**
- * The green accent color can be used to highlight parts of the text.
- * @name sd-mark
- * @status stable
- * @since 1.7
- */
-
+    }
 mark.sd-mark {
   background-color: transparent;
-  
-  color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction button label */;
-}
-
-/**
- * Meta information like file size, date, or whatever is needed.
- * @name sd-meta
- * @status stable
- * @since 1.7
- * @variant { sm } sd-meta--size-... The size. Small can be used as an alternative in tight spaces.
- * @boolean sd-meta--inverted Inverts the meta element.
- * @boolean sd-meta--pipe Adds a pipe right from the meta element.
- * @boolean sd-meta--light Makes sd-meta light.
- */
-
+  color: var(--sd-color-text-accent);
+}
 .sd-meta {
-  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+  font-size: var(--sd-text-base);
+  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: var(--sd-color-text-black);
 }
-
 .sd-meta--size-sm {
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-}
-
+    font-size: var(--sd-text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
 .sd-meta--light {
-  
-  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
-}
-
+    color: var(--sd-color-text-neutral-700);
+  }
 .sd-meta--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
+    color: var(--sd-color-text-white);
+  }
 .sd-meta--inverted.sd-meta--light {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
+      color: var(--sd-color-text-primary-400);
+    }
 .sd-meta--pipe::after {
       content: '|';
-      margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
-      margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
+      margin-inline: var(--sd-spacing-1);
     }
-
 .sd-meta--pipe.sd-meta--size-sm::after {
-  margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-  margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-}
-
-/**
- * Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
- * @name sd-pagination
- * @status stable
- * @since 1.3
- * @variant { simple } sd-pagination--... The pagination format.
- * @boolean sd-pagination--inverted Inverts the pagination style.
- */
-
+        margin-inline: var(--sd-spacing-0\.5);
+      }
 .sd-pagination > :not(ul) {
-  position: absolute;
-  height: var(--sd-spacing-0-25, 1px) /* 1px */;
-  width: var(--sd-spacing-0-25, 1px) /* 1px */;
-  overflow: hidden;
-}
-
+    position: absolute;
+    height: var(--sd-spacing-0\.25);
+    width: var(--sd-spacing-0\.25);
+    overflow: hidden;
+  }
 .sd-pagination ul {
-  display: flex;
-  align-items: center;
-  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
-}
-
+    display: flex;
+    align-items: center;
+    gap: var(--sd-spacing-2);
+  }
 .sd-pagination ul li button {
       all: unset;
+      border-style: var(--tw-border-style);
       border-width: 0px;
+      --tw-border-style: solid;
       border-style: solid;
       border-color: transparent;
     }
-
 .sd-pagination ul li button:hover:not([disabled]) {
-  cursor: pointer;
-}
-
+        cursor: pointer;
+      }
 .sd-pagination ul li:has(button) {
-  height: 1.875rem;
-}
-
-.sd-pagination ul li a,
-    .sd-pagination ul li button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-  text-decoration-line: none;
-  transition-property: color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.sd-pagination ul li a:hover:not([disabled]),
-    .sd-pagination ul li button:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
-}
-
-.sd-pagination ul li a:active:not([disabled]),
-    .sd-pagination ul li button:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
-}
-
+      height: 1.875rem;
+    }
+.sd-pagination ul li a, .sd-pagination ul li button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sd-color-text-primary);
+      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: var(--sd-color-text-primary-500);
+      }
+.sd-pagination ul li a:active:not([disabled]), .sd-pagination ul li button:active:not([disabled]) {
+        color: var(--sd-color-text-primary-800);
+      }
 .sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-/* Previous and Next */
-
-.sd-pagination ul li:first-child,
-    .sd-pagination ul li:last-child {
-  height: var(--sd-spacing-12, 3rem) /* 48px */;
-  width: var(--sd-spacing-12, 3rem) /* 48px */;
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-}
-
-.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 {
-  height: 100%;
-  width: 100%;
-}
-
-/* Numbers */
-
+        outline-width: 1px;
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+      }
+.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);
+      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 {
+        height: 100%;
+        width: 100%;
+      }
 .sd-pagination ul li {
-  display: flex;
-  height: var(--sd-spacing-8, 2rem) /* 32px */;
-  width: var(--sd-spacing-8, 2rem) /* 32px */;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.sd-pagination ul li:not(:first-child):not(:last-child) a,
-        .sd-pagination ul li:not(:first-child):not(:last-child) button {
-  height: 100%;
-  width: 100%;
-  border-bottom-width: 2px;
-  border-bottom-color: transparent;
-}
-
+      display: flex;
+      height: var(--sd-spacing-8);
+      width: var(--sd-spacing-8);
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+.sd-pagination ul li:not(:first-child):not(:last-child) a, .sd-pagination ul li:not(:first-child):not(:last-child) button {
+          height: 100%;
+          width: 100%;
+          border-bottom-style: var(--tw-border-style);
+          border-bottom-width: var(--sd-border-width-2);
+          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] {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
- */;
-}
-
-.sd-pagination ul li a[aria-current],
-      .sd-pagination ul li button[aria-current] {
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-pagination ul li a[aria-current]:hover:not([disabled]),
-      .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-/* Previous and next arrow when it has no href */
-
-.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: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
-    .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-/* Numbers */
-
-/* Number which is not current */
-
+            border-bottom-color: var(--sd-color-border-accent);
+          }
+.sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
+        color: var(--sd-color-text-black);
+      }
+.sd-pagination ul li a[aria-current]:hover:not([disabled]), .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
+          color: var(--sd-color-text-black);
+        }
+.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: var(--sd-color-text-neutral-500);
+    }
+.sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
+        color: var(--sd-color-text-neutral-500);
+      }
 .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;
-  position: absolute;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
-  display: none;
-}
-
-/* Apply ellipsis to (n + 2 && n - 1) */
-
+          pointer-events: none;
+          position: absolute;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
+            display: none;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
-  pointer-events: auto !important;
-  position: relative !important;
-}
-
+          pointer-events: auto !important;
+          position: relative !important;
+        }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
-  --tw-content: '...';
-  content: var(--tw-content);
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li {
-  pointer-events: auto !important;
-  position: relative !important;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li::after {
-  content: var(--tw-content) !important;
-  display: none !important;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li button {
-  display: flex !important;
-}
-
-/* When one of the first 4 pages is selected */
-
-/* Show until the 5th page (forward) */
-
+            --tw-content: '...';
+            content: var(--tw-content);
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li {
+          pointer-events: auto !important;
+          position: relative !important;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current])::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li::after {
+            content: var(--tw-content);
+            display: none !important;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li button {
+            display: flex !important;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
-  pointer-events: auto;
-  position: relative;
-}
-
+            pointer-events: auto;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
-  content: var(--tw-content);
-  display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a,
-            .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
-  display: flex;
-}
-
-/* Show ellipsis on the 6th */
-
+              content: var(--tw-content);
+              display: none;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
+              display: flex;
+            }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
-  pointer-events: none;
-  position: relative;
-}
-
+            pointer-events: none;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
-  --tw-content: '...';
-  content: var(--tw-content);
-}
-
-/* When one of the first 4 pages is selected, show until the 5th page (backward) */
-
+              --tw-content: '...';
+              content: var(--tw-content);
+            }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
-  pointer-events: auto;
-  position: relative;
-}
-
+          pointer-events: auto;
+          position: relative;
+        }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
-  content: var(--tw-content);
-  display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
-  display: flex;
-}
-
-/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
-
+            content: var(--tw-content);
+            display: none;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
+            display: flex;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
-  pointer-events: auto;
-  position: relative;
-}
-
+            pointer-events: auto;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
-  content: var(--tw-content);
-  display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a,
-            .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
-  display: flex;
-}
-
-/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) {
-  pointer-events: auto;
-  position: relative;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          )::after {
-  content: var(--tw-content);
-  display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) button {
-  display: flex;
-}
-
-/* Show ellipsis on the 6th to last */
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) {
-  pointer-events: none;
-  position: relative;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          )::after {
-  --tw-content: '...';
-  content: var(--tw-content);
-}
-
-/* When it only has 5 numbers + 2 prev & next buttons */
-
+              content: var(--tw-content);
+              display: none;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
+              display: flex;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
+          pointer-events: auto;
+          position: relative;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
+            content: var(--tw-content);
+            display: none;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) button {
+            display: flex;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
+          pointer-events: none;
+          position: relative;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
+            --tw-content: '...';
+            content: var(--tw-content);
+          }
 .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
-  pointer-events: auto;
-  position: relative;
-}
-
+        pointer-events: auto;
+        position: relative;
+      }
 .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
-  content: var(--tw-content);
-  display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
-        .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
-  display: flex;
-}
-
+          content: var(--tw-content);
+          display: none;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a, .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
+          display: flex;
+        }
 .sd-pagination--simple ul li:nth-child(2) {
-  position: relative;
-  margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
-  width: var(--sd-spacing-8, 2rem) /* 32px */;
-  border-bottom-width: 2px;
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
- */;
-}
-
+        position: relative;
+        margin-inline-end: calc(var(--sd-spacing-1) * 5);
+        width: var(--sd-spacing-8);
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: var(--sd-border-width-2);
+        border-bottom-color: var(--sd-color-border-accent);
+      }
 .sd-pagination--simple ul li:nth-child(2)::after {
-  position: absolute;
-  right: -18px;
-  --tw-scale-y: 1.5;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-content: '/';
-  content: var(--tw-content);
-}
-
-.sd-pagination--simple ul li:nth-child(2) {
-
+          content: var(--tw-content);
+          position: absolute;
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          content: var(--tw-content);
+          right: calc(18px * -1);
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          content: var(--tw-content);
+          --tw-scale-y: 1.5;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          --tw-content: '/';
+          content: var(--tw-content);
+        }
+.sd-pagination--simple ul li:nth-child(2){
         border-bottom-style: solid;
-      }
-
-.sd-pagination--simple ul li:nth-last-child(2) {
-  border-bottom-width: 2px;
-  border-bottom-color: transparent;
 }
-
+.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-color: transparent;
+      }
 .sd-pagination--inverted ul li::after {
-  content: var(--tw-content);
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.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: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.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: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.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: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.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: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
-}
-
-.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: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
+        content: var(--tw-content);
+        color: var(--sd-color-text-white);
+      }
+.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: var(--sd-color-text-neutral-600);
+      }
+.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: var(--sd-color-text-neutral-600);
+        }
+.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: var(--sd-color-text-white);
+      }
+.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: var(--sd-color-text-primary-200);
+        }
+.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: var(--sd-color-text-primary-400);
+        }
 .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: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
-}
-
+          outline-color: var(--color-white, #fff);
+        }
 .sd-pagination--inverted.sd-pagination--simple ul li {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
+      color: var(--sd-color-text-white);
+    }
 .sd-pagination--inverted.sd-pagination--simple ul li::after {
-  content: var(--tw-content);
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Description of the style.
- * @name sd-status-badge
- * @status stable
- * @since 1.0
- * @variant { sucess | warning | error | info } sd-status-badge--...
- */
-
+        content: var(--tw-content);
+        color: var(--sd-color-text-white);
+      }
 .sd-status-badge {
   display: inline-flex;
   align-items: center;
 }
-
 .sd-status-badge sd-icon {
-  margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  display: flex;
-  height: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  width: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  border-radius: var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */;
-  padding: var(--sd-spacing-1, 0.25rem) /* 4px */;
-  --tw-text-opacity: 1 !important;
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
-}
-
+    margin-right: var(--sd-spacing-2);
+    display: flex;
+    height: var(--sd-spacing-3);
+    width: var(--sd-spacing-3);
+    border-radius: var(--sd-radius-full);
+    padding: var(--sd-spacing-1);
+    color: var(--sd-color-text-white) !important;
+  }
 .sd-status-badge--success sd-icon {
-  
-  background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */;
-}
-
+      background-color: var(--sd-color-background-success);
+    }
 .sd-status-badge--warning sd-icon {
-  
-  background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */;
-}
-
+      background-color: var(--sd-color-background-warning);
+    }
 .sd-status-badge--error sd-icon {
-  
-  background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
-}
-
+      background-color: var(--sd-color-background-error);
+    }
 .sd-status-badge--info sd-icon {
-  
-  background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
-}
-
-/* plop:style */
-
-/**
- * Prose
- * @name sd-prose
- * @status stable
- * @since 3.6.0
- * @boolean sd-prose--inverted Inverts the content, but not tables.
- * @boolean sd-prose--full-width Overrides the 80ch max-width and makes the prose full width.
- */
-
-/**
- * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-display
- * @status stable
- * @since 1.7
- * @variant { xl | 3xl } sd-display--size-... The display's size.
- * @boolean sd-display--inverted Inverts the display text.
- */
-
+      background-color: var(--sd-color-background-info);
+    }
+.sd-display {
+  font-size: var(--sd-text-3xl);
+  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: var(--sd-color-text-black);
+}
+@media (width >= 64rem) {
 .sd-display {
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+    font-size: var(--sd-text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
-
-@media (min-width: 1024px) {
-
-  .sd-display {
-    font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
   }
-}
-
 .sd-display--size-xl {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
+      font-size: var(--sd-text-xl);
+      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: var(--sd-color-text-black);
+    }
 .sd-display--size-3xl {
-  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-@media (min-width: 1024px) {
-
-  .sd-display--size-3xl {
-    font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  }
-}
-
+      font-size: var(--sd-text-2xl);
+      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: var(--sd-color-text-black);
+    }
+@media (width >= 64rem) {
+.sd-display--size-3xl {
+        font-size: var(--sd-text-3xl);
+        line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
+    }
+      }
 .sd-display--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
- * @name sd-headline
- * @status stable
- * @since 1.16
- * @variant { 3xl | xl | lg | base } sd-headline--size-... The headline's size.
- * @boolean sd-headline--inverted Inverts the headline text.
- * @boolean sd-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
- */
-
-.sd-headline,
-.sd-prose :is(h1, h2, h3, h4, h5) {
+    color: var(--sd-color-text-white);
+  }
+.sd-headline, .sd-prose :is(h1, h2, h3, h4, h5) {
   display: flex;
-  font-weight: 700;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  --tw-font-weight: var(--sd-font-weight-bold);
+  font-weight: var(--sd-font-weight-bold);
+  color: var(--sd-color-text-primary);
 }
-
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-  flex-shrink: 0;
-  font-size: 3rem;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-@media (min-width: 640px) {
-
-  .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-    margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  }
-}
-
-.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, 1rem) /* 16px */;
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-}
-
-@media (min-width: 640px) {
-
-  .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-font-size-4xl, 2.5rem) /* 40px */;
-  }
-}
-
+    flex-shrink: 0;
+    font-size: 3rem;
+    color: var(--sd-color-text-primary);
+  }
+@media (width >= 40rem) {
+.sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
+      margin-top: var(--sd-spacing-2)
+  }
+    }
+.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);
+    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);
+  }
+@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);
+      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, 0.25rem) /* 4px */ * -1);
-}
-
-@media (min-width: 640px) {
-
-  .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: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  }
-}
-
-.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, 1rem) /* 16px */;
-  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
-  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-}
-
-@media (min-width: 640px) {
-
-  .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-font-size-3xl, 2rem) /* 32px */;
-  }
-}
-
+      margin-top: calc(var(--sd-spacing-1) * -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 {
+        margin-top: calc(var(--sd-spacing-1) * 0)
+    }
+      }
+.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);
+    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);
+  }
+@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);
+      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, 0.25rem) /* 4px */ * -1);
-}
-
-@media (min-width: 640px) {
-
-  .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: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  }
-}
-
-.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, 0.5rem) /* 8px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
+      margin-top: calc(var(--sd-spacing-1) * -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) * 0)
+    }
+      }
+.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: var(--sd-color-text-black);
+  }
 .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-font-size-xl, 1.5rem) /* 24px */;
-}
-
+      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);
+    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: var(--sd-spacing-0\.5);
+    }
+@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: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-}
-
-@media (min-width: 640px) {
-
-  .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: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
-  }
-}
-
-.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) {
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-}
-
-.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-font-size-lg, 1.25rem) /* 20px */;
-}
-
+        margin-top: var(--sd-spacing-0\.5)
+    }
+      }
+.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) {
+    --tw-leading: var(--leading-normal, 1.5);
+    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);
+    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: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-@media (min-width: 640px) {
-
-  .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: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      margin-top: calc(var(--sd-spacing-1) * 0);
+    }
+@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-1) * 0)
+    }
+      }
+.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);
+    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 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-font-size-base, 1rem) /* 16px */;
-}
-
 .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, 0.25rem) /* 4px */ * -1);
-}
-
+      margin-top: calc(var(--sd-spacing-1) * -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;
-}
-
+      color: inherit;
+    }
 .sd-headline--inline {
   display: inline-block;
 }
-
 .sd-headline--inline sd-icon {
-  margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
-  vertical-align: middle;
-}
-
+    margin-top: calc(var(--sd-spacing-1) * -1);
+    margin-right: var(--sd-spacing-2);
+    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, 0.125rem) /* 2px */;
-}
-
-.sd-headline--inverted:not(#_),
-.sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+      margin-right: var(--sd-spacing-0\.5);
+    }
+.sd-headline--inverted:not(#_), .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
+  color: var(--sd-color-text-white);
 }
-
 .sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for interactive elements.
- * @name sd-interactive
- * @status stable
- * @since 1.11
- * @boolean sd-interactive--disabled Makes an element look disabled.
- * @boolean sd-interactive--inverted Inverts the colors of an element.
- * @boolean sd-interactive--reset Resets the default browser styles of e.g., a button.
- */
-
+    color: var(--sd-color-text-white);
+  }
 .sd-prose a--reset, .sd-interactive--reset {
     all: unset;
     outline: revert;
   }
-
-.sd-prose a,
-.sd-interactive {
+.sd-prose a, .sd-interactive{
   cursor: pointer;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  color: var(--sd-color-text-primary);
   text-decoration-line: underline;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-duration: 150ms;
-  transition-duration: var(--sd-duration-fast, 150ms) /* Component State
-Animation of states like hover or pressed
-Microinteractions
-Smooth transitions eg. for buttons or dropdowns */;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.sd-prose a:hover:not([disabled]),
-.sd-interactive:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
-}
-
-.sd-prose a:active:not([disabled]),
-.sd-interactive:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
-}
-
-.sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
-  text-decoration-line: none;
-}
-
+  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)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  --tw-duration: var(--sd-duration-fast, 150ms);
+  transition-duration: var(--sd-duration-fast, 150ms);
+  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+  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: var(--sd-color-text-primary-500);
+  }
 .sd-prose a:focus-visible, .sd-interactive:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-.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: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.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: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.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: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
+    outline-style: solid;
+    outline-offset: 2px;
+    outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
+    color: var(--sd-interactive--active-color-text, var(--sd-color-primary-800));
+  }
+.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: var(--sd-color-text-neutral-500);
+  }
+.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: var(--sd-color-text-neutral-500);
+    }
+.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: var(--sd-color-text-neutral-500);
+    }
 .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: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
+      color: var(--sd-color-text-neutral-600);
+    }
 .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: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
+        color: var(--sd-color-text-neutral-600);
+      }
 .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: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-prose--inverted a,
-.sd-interactive--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-prose--inverted a:hover:not([disabled]),
-.sd-interactive--inverted:hover:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
-}
-
-.sd-prose--inverted a:active:not([disabled]),
-.sd-interactive--inverted:active:not([disabled]) {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
+        color: var(--sd-color-text-neutral-600);
+      }
+.sd-prose--inverted a, .sd-interactive--inverted {
+  color: var(--sd-color-text-white);
+}
+.sd-prose--inverted a:hover:not([disabled]), .sd-interactive--inverted:hover:not([disabled]) {
+    color: var(--sd-color-text-primary-200);
+  }
 .sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
-}
-
-/**
- * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-leadtext
- * @status stable
- * @since 1.7
- * @variant { lg } sd-leadtext--size-... The leadtext's size.
- * @boolean sd-leadtext--inverted Inverts the leadtext text.
- */
-
-.sd-prose > .sd-leadtext,
-.sd-leadtext {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
+    outline-style: solid;
+    outline-offset: 2px;
+    outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
+    color: var(--sd-color-text-primary-400);
+  }
+.sd-prose > .sd-leadtext, .sd-leadtext {
+  font-size: var(--sd-text-xl);
+  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: var(--sd-color-text-black);
+}
 .sd-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
-  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-prose--inverted > .sd-leadtext,
-.sd-leadtext--inverted {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for list elements.
- * @name sd-list
- * @status stable
- * @since 1.39.0
- * @boolean sd-list--inverted Inverts the list text.
- */
-
-.sd-list:not(.sd-list--icon),
-.sd-prose > :is(ol, ul) {
+    font-size: var(--sd-text-lg);
+    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: var(--sd-color-text-black);
+  }
+.sd-prose--inverted > .sd-leadtext, .sd-leadtext--inverted {
+  color: var(--sd-color-text-white);
+}
+.sd-list:not(.sd-list--icon), .sd-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-block: var(--sd-spacing-4);
+  padding-left: var(--sd-spacing-4);
   text-align: left;
-
-  /*
-   * Unordered lists
-   */
 }
-
 .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, 0.75rem) /* 12px */;
-}
-
-.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 {
+    margin-top: var(--sd-spacing-3);
+  }
+.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;
-    padding-left: 1.4em;
     padding-top: 0.75em;
+    padding-left: 1.4em;
   }
-
 @supports not (-webkit-hyphens: none) {
-
-.sd-list:not(.sd-list--icon),
-.sd-prose > :is(ol, ul) {
-    /* Safari automatically adds some spacing. This adds it for other browsers. */
-
-    /*
-     * Ordered lists
-     */
-
-    /* 
-   * Safari currently only partially supports the ::marker pseudo class.
-   * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
-   */
-    /* Level 1 */
-}
     .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
-    padding-left: 0.3em;
-  }
+      padding-left: 0.3em;
+    }
     .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
       counter-reset: item;
     }
@@ -1592,443 +980,546 @@ Used for inverted pressed interaction text link */;
         .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
           content: counters(item, '.', decimal) '. ';
         }
-        /* Level 2 */
         .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
-    padding-left: 1.9em;
+          padding-left: 1.9em;
           counter-reset: subitem;
-  }
+        }
           .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
             counter-increment: subitem;
           }
             .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
               content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
             }
-            /* Level 3 */
             .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
-    padding-left: 2.7em;
+              padding-left: 2.7em;
               counter-reset: subsubitem;
-  }
+            }
               .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
                 counter-increment: subsubitem;
               }
                 .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
-                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
-                    counters(subsubitem, '.', decimal) '. ';
+                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.' counters(subsubitem, '.', decimal) '. ';
                 }
   }
-
-/* Level 1 */
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
-  .sd-prose > :is(ol, ul) ul {
-  padding-left: 0.5em;
-}
-
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon), .sd-list:not(.sd-list--icon) ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon), .sd-prose > :is(ol, ul) ul {
+    padding-left: 0.5em;
+  }
 .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
-  padding-left: 0.75em;
-      list-style-type: '\2022'; /* • */
-}
-
-/* Level 2 */
-
+      padding-left: 0.75em;
+      list-style-type: '\2022';
+    }
 .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
-  padding-left: 0.3em;
-}
-
+        padding-left: 0.3em;
+      }
 .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
-          list-style-type: '\002B1D'; /* · */
+          list-style-type: '\002B1D';
         }
-
-/* Level 3 */
-
 .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
-  padding-left: 0.4em;
-}
-
+            padding-left: 0.4em;
+          }
 .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
-              list-style-type: '\2010'; /* - */
+              list-style-type: '\2010';
             }
-
-/*
-  * Icon lists
-  */
-
 .sd-list--icon {
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-block: var(--sd-spacing-4);
   text-align: left;
 }
-
-.sd-list--icon li sd-icon:first-of-type,
-    .sd-list--icon li .sd-list--icon__icon:first-of-type {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-list--icon {
+.sd-list--icon li sd-icon:first-of-type, .sd-list--icon li .sd-list--icon__icon:first-of-type {
+      color: var(--sd-color-text-white);
+    }
+.sd-list--icon{
   list-style-type: '';
 }
-
-/* Safari removes list semantics of lists that don’t look like lists (list-style: none). The only way to remove list
-    styles without affecting semantics is to set list-style-type to an empty string.
-    https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
-
 .sd-list--icon > li:first-of-type {
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
+    padding-top: calc(var(--sd-spacing-1) * 0);
+  }
 .sd-list--icon li {
-  position: relative;
-  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  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: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
+    position: relative;
+    padding-top: var(--sd-spacing-3);
+    padding-left: var(--sd-spacing-10);
+    --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: calc(var(--sd-spacing-1) * 0);
+      font-size: var(--sd-text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
+      color: var(--sd-color-text-primary);
+    }
 .sd-list--icon.sd-list--horizontal {
-  display: flex;
-}
-
+    display: flex;
+  }
 .sd-list--icon.sd-list--horizontal li {
-  display: flex;
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
+      display: flex;
+      padding-top: calc(var(--sd-spacing-1) * 0);
+    }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
-  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-/*
- * Inverted
- */
-
-.sd-list--inverted,
-.sd-prose--inverted > :is(ol, ul) {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.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: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
- * @name sd-paragraph
- * @status stable
- * @since 1.7
- * @variant { sm } sd-paragraph--size-... The paragraph's font size.
- * @boolean sd-paragraph--inverted Inverts the paragraph text.
- */
-
-.sd-paragraph,
-.sd-prose p {
-  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
+      margin-right: var(--sd-spacing-8);
+    }
+.sd-list--inverted, .sd-prose--inverted > :is(ol, ul) {
+  color: var(--sd-color-text-white);
+}
+.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: var(--sd-color-text-white);
+  }
+.sd-paragraph, .sd-prose p {
+  font-size: var(--sd-text-base);
+  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: var(--sd-color-text-black);
+}
 .sd-paragraph--size-sm, .sd-prose p--size-sm {
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  font-weight: 400;
-  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-paragraph--inverted,
-.sd-prose--inverted p {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/**
- * Generates basic styles for media elements.
- * @name sd-media
- * @status stable
- * @since 2.5.0
- * @boolean sd-media--inverted Inverts the figcaption text.
- */
-
-.sd-prose figure,
-figure.sd-media {
-  margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-prose figure figcaption, figure.sd-media figcaption {
-  
-  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
+    font-size: var(--sd-text-sm);
+    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: var(--sd-color-text-black);
+  }
+.sd-paragraph--inverted, .sd-prose--inverted p {
+  color: var(--sd-color-text-white);
 }
-
-.sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
-  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
+.sd-prose figure, figure.sd-media {
+  margin: calc(var(--sd-spacing-1) * 0);
 }
-
+.sd-prose figure figcaption, figure.sd-media figcaption {
+    color: var(--sd-color-text-neutral-700);
+  }
+.sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
+      margin-top: var(--sd-spacing-3);
+    }
 .sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-  
-  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
-/**
- * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-table-cell
- * @status stable
- * @since 1.13
- * @boolean sd-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
- * @boolean sd-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-table-cell--shadow-... Applies the selected shadow to the table cell.
- */
-
-.sd-prose td,
-.sd-prose th,
-.sd-table-cell {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-left-width: 0px;
-  border-right-width: 0px;
+    color: var(--sd-color-text-primary-400);
+  }
+.sd-prose td, .sd-prose th, .sd-table-cell {
+  border-inline-style: var(--tw-border-style);
+  border-inline-width: 0px;
+  border-block-style: var(--tw-border-style);
+  border-block-width: 1px;
+  --tw-border-style: solid;
   border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+  border-color: var(--sd-color-border-neutral-400);
   background-color: transparent;
-  padding: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding: var(--sd-spacing-4);
   text-align: left;
-  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  
-  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+  font-size: var(--sd-text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: var(--sd-color-text-black);
 }
-
 .sd-table-cell--divider {
-  border-right-width: 1px;
-}
-
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
 .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: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-  --tw-gradient-to: transparent var(--tw-gradient-to-position);
-  opacity: var(--sd-opacity-0, 0);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
+      pointer-events: none;
+      position: absolute;
+      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-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);
+      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));
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+      --tw-content: '';
+      content: var(--tw-content);
+    }
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
-}
-
-/* fix that shows line on top of table-cell */
-
+      right: calc(var(--sd-spacing-1) * 0);
+      left: calc(var(--sd-spacing-1) * 0);
+      height: calc(var(--sd-spacing-1) * 2.5);
+    }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
-  position: absolute;
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display: block;
-  height: 1px;
-  width: 100%;
-  border-width: 0.5px;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
+      position: absolute;
+      left: calc(var(--sd-spacing-1) * 0);
+      display: block;
+      height: 1px;
+      width: 100%;
+      border-style: var(--tw-border-style);
+      border-width: 0.5px;
+      border-color: var(--sd-color-border-neutral-400);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
-}
-
+      top: calc(var(--sd-spacing-1) * 0);
+      bottom: calc(var(--sd-spacing-1) * 0);
+      width: calc(var(--sd-spacing-1) * 2.5);
+    }
 .sd-table-cell.sd-table-cell--shadow-active:after {
-  opacity: 100%;
-}
-
+    opacity: 100%;
+  }
 .sd-table-cell--shadow-top:after {
-  top: -10px;
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-
-/* fix that shows line on top of table-cell */
-
+      top: -10px;
+      --tw-gradient-position: to top in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-top:before {
-  bottom: -1px;
-}
-
+      bottom: -1px;
+    }
 .sd-table-cell--shadow-bottom:after {
-  bottom: -10px;
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
-/* fix that shows line on top of table-cell */
-
+      bottom: -10px;
+      --tw-gradient-position: to bottom in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-bottom:before {
-  top: -1px;
-}
-
+      top: -1px;
+    }
 .sd-table-cell--shadow-left:after {
-  left: -10px;
-  background-image: linear-gradient(to left, var(--tw-gradient-stops));
-}
-
+      left: -10px;
+      --tw-gradient-position: to left in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-right:after {
-  right: -10px;
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-
+      right: -10px;
+      --tw-gradient-position: to right in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--bg-white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
+      background-color: var(--sd-color-background-white);
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;    }
 .sd-table-cell--bg-primary-100 {
-  
-  background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-}
-
+      background-color: var(--sd-color-background-primary-100);
+    }
 .sd-table-cell--bg-neutral-100 {
-  
-  background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-}
-
-/**
- * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-table
- * @status stable
- * @since 1.13
- */
-
-/*
-* Remove inherited styles from table before applying our styles.
-*/
-
-.sd-table,
-.sd-prose table {
+      background-color: var(--sd-color-background-neutral-100);
+    }
+.sd-table, .sd-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
-  --tw-border-spacing-x: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  --tw-border-spacing-y: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
+  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
-
 .sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
-  position: relative;
-}
-
-/* plop:style */
-
+      position: relative;
+    }
 .sd-prose {
-  /* Optimize for reading. */
   max-width: 80ch;
   text-align: left;
 }
-
-/* Add default spacings */
-
 .sd-prose > *:not(:first-child) {
-  margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
-/* First element has no margin-top */
-
+    margin-top: var(--sd-spacing-4);
+  }
 .sd-prose > *:first-child {
-  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-/* headings after a heading have a smaller margin-top */
-
+    margin-top: calc(var(--sd-spacing-1) * 0);
+  }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
-    /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
-    margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
+    margin-top: var(--sd-spacing-2);
   }
-
-/* Headlines after other non-headlines have a larger margin-top */
-
 .sd-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
-  margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-/* Images and figures lead to a bigger margin-top for the next element */
-
-.sd-prose > figure + *:not(#_),
-  .sd-prose > img + *:not(#_) {
-  margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
-}
-
-/* Add styles for elements that are not based on existing CSS styles */
-
+    margin-top: var(--sd-spacing-8);
+  }
+.sd-prose > figure + *:not(#_), .sd-prose > img + *:not(#_) {
+    margin-top: var(--sd-spacing-6);
+  }
 .sd-prose hr {
-  height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  border-top-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
-}
-
+    height: calc(var(--sd-spacing-1) * 0);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--sd-color-border-neutral-500);
+  }
 .sd-prose pre {
-  overflow: auto;
-}
-
-.sd-prose blockquote,
-    .sd-prose blockquote > * {
-  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-}
-
+    overflow: auto;
+  }
+.sd-prose blockquote, .sd-prose blockquote > * {
+      font-size: var(--sd-text-xl);
+      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 {
         content: open-quote;
         display: inline;
       }
-
 .sd-prose blockquote:has(*) *:first-child::after, .sd-prose blockquote:not(:has(*))::after {
         content: close-quote;
         display: inline;
       }
-
-/* Fixes for other elements */
-
 .sd-prose > :is(ul, ol):not(#_) {
-    /* ul and ol have padding that has to be reset */
-    padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    padding-block: calc(var(--sd-spacing-1) * 0);
   }
-
-/* Inverted styles */
-
 .sd-prose--inverted hr {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
-}
-
+      border-color: var(--sd-color-border-white);
+    }
 .sd-prose--inverted pre {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-/* Full width styles */
-
+      color: var(--sd-color-text-white);
+    }
 .sd-prose--full-width {
     max-width: unset;
   }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-border-style: solid;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
+    }
+  }
+}