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

package/dist/modules/prose.css

@@ -1,471 +1,274 @@
-/**
- * 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.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
 .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-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-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) * -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.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) * 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, 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);
+    }
+@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)
+    }
+      }
+.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;
     }
@@ -475,443 +278,377 @@ 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-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+@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-leading: initial;
+      --tw-font-weight: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-border-style: solid;
+      --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-content: "";
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
+    }
+  }
+}