@marioschmidt/design-system-components 1.4.4 → 1.5.0

package/dist/www/css/bundles/advertorial.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.4
+ * BILD Design System Tokens v1.5.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Advertorial | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -124,6 +124,9 @@
   --color-neutral-20-a-0: rgba(44, 49, 51, 0);
   --color-neutral-25-a-0: rgba(52, 60, 65, 0);
   --color-neutral-90-a-0: rgba(221, 225, 226, 0);
+  --color-neutral-0-a-3: rgba(0, 0, 0, 0.03);
+  --color-neutral-0-a-7: rgba(0, 0, 0, 0.07);
+  --color-neutral-0-a-15: rgba(0, 0, 0, 0.15);
 
 
   /* ============================================
@@ -265,6 +268,34 @@
   --st-font-weight-st-book-italic: 400;
   --st-font-weight-light-italic-st: 300;
 
+
+  /* ============================================
+     FONTSIZE
+     ============================================ */
+
+  --font-size-1-p-25-x: 10px;
+  --font-size-1-p-5-x: 12px;
+  --font-size-1-p-75-x: 14px;
+  --font-size-2-x: 16px;
+  --font-size-2-p-25-x: 18px;
+  --font-size-2-p-5-x: 20px;
+  --font-size-2-p-75-x: 22px;
+  --font-size-3-x: 24px;
+  --font-size-3-p-5-x: 28px;
+  --font-size-3-p-75-x: 30px;
+  --font-size-4-x: 32px;
+  --font-size-4-p-5-x: 36px;
+  --font-size-5-x: 40px;
+  --font-size-5-p-25-x: 42px;
+  --font-size-6-x: 48px;
+  --font-size-8-x: 64px;
+  --font-size-9-x: 72px;
+  --font-size-10-x: 80px;
+  --font-size-12-p-5-x: 100px;
+  --font-size-15-x: 120px;
+  --font-size-2-p-625-x: 21px;
+  --font-size-3-p-25-x: 26px;
+
 }
 
 /* === SIZEPRIMITIVE === */
@@ -410,18 +441,18 @@
   --headline-3-font-size: 24px;
   --headline-4-font-size: 16px;
   --body-font-size: 17px;
-  --label-3-font-size: 12px;
+  --label-3-font-size: var(--font-size-1-p-5-x, 12px);
   --label-2-font-size: 15px;
   --label-1-font-size: 17px;
-  --callout-1-font-size: 16px;
+  --callout-1-font-size: var(--font-size-2-x, 16px);
   --footnote-1-font-size: 13px;
   --footnote-2-font-size: 10px;
   --kicker-1-font-size: 16px;
   --kicker-2-font-size: 16px;
   --kicker-3-font-size: 14px;
   --kicker-4-font-size: 12px;
-  --subheadline-1-font-size: 18px;
-  --quote-font-size: 16px;
+  --subheadline-1-font-size: var(--font-size-2-p-25-x, 18px);
+  --quote-font-size: var(--font-size-2-x, 16px);
   --body-font-family: var(--font-family-lucida-grande, Lucida Grande);
   --callout-font-family: var(--font-family-lucida-grande, Lucida Grande);
   --headline-font-family: var(--font-family-lucida-grande, Lucida Grande);
@@ -605,7 +636,7 @@
     --canvas-width-size-web: 600px;
     --canvas-width-size-app: 834px;
     --canvas-height-size-app: 1194px;
-    --title-2-font-size: 16px;
+    --title-2-font-size: var(--font-size-2-x, 16px);
     --display-1-font-size: 70px;
     --display-2-font-size: 41px;
     --display-3-font-size: 31px;
@@ -681,7 +712,7 @@
     --canvas-width-size-app: 1194px;
     --canvas-height-size-app: 834px;
     --title-1-font-size: 28px;
-    --title-2-font-size: 18px;
+    --title-2-font-size: var(--font-size-2-p-25-x, 18px);
     --display-1-font-size: 116px;
     --display-2-font-size: 62px;
     --display-3-font-size: 39px;
@@ -695,7 +726,7 @@
     --kicker-2-font-size: 21px;
     --kicker-3-font-size: 16px;
     --subheadline-1-font-size: 28px;
-    --quote-font-size: 18px;
+    --quote-font-size: var(--font-size-2-p-25-x, 18px);
     --kicker-3-line-height: 17.6px;
     --kicker-2-line-height: 23.1px;
     --kicker-1-line-height: 27.5px;
@@ -1738,14 +1769,14 @@
 :host([data-content-brand="advertorial"]) .chip-label {
   font-family: var(--footnote-font-family);
   font-weight: var(--label-font-weight-bold);
-  font-size: var(--size-2-x, 16px);
+  font-size: 16px;
 }
 
 /* === BREAKPOINT TOKENS === */
 
 [data-content-brand="advertorial"],
 :host([data-content-brand="advertorial"]) {
-  --chip-font-size: var(--size-2-x, 16px);
+  --chip-font-size: 16px;
   --chip-inline-space: var(--inline-space-const-md);
   --chip-stack-space: var(--stack-space-const-sm);
 }
@@ -1753,7 +1784,7 @@
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
   :host([data-content-brand="advertorial"]) {
-    --chip-font-size: var(--size-2-p-25-x, 18px);
+    --chip-font-size: 18px;
   }
 }
 
@@ -2098,8 +2129,8 @@
 :host([data-content-brand="advertorial"]) .menu-item-util-label {
   font-family: var(--label-font-family);
   font-weight: 700;
-  font-size: var(--size-1-p-5-x, 12px);
-  line-height: var(--size-1-p-5-x, 12px);
+  font-size: 12px;
+  line-height: 12px;
   text-transform: uppercase;
 }
 
@@ -2109,7 +2140,7 @@
 :host([data-content-brand="advertorial"]) {
   --menu-item-space: var(--space-1-x, 8px);
   --menu-item-font-size: 15px;
-  --menu-item-util-font-size: var(--size-1-p-5-x, 12px);
+  --menu-item-util-font-size: 12px;
   --menu-item-util-stack-space: var(--space-1-p-25-x, 10px);
   --menu-link-lane-height-size: var(--size-6-x, 48px);
   --menu-utillink-item-height-size: var(--size-6-x, 48px);
@@ -2281,7 +2312,7 @@
 :host([data-content-brand="advertorial"]) .paywall-card-price-tag {
   font-family: var(--title-font-family);
   font-weight: var(--title-font-weight);
-  font-size: var(--size-8-x, 64px);
+  font-size: var(--paywall-card-price-tag-font-size);
   line-height: var(--size-8-x, 64px);
   letter-spacing: var(--display-2-letter-space);
 }
@@ -2290,7 +2321,7 @@
 :host([data-content-brand="advertorial"]) .paywall-card-note {
   font-family: var(--title-font-family);
   font-weight: var(--title-font-weight);
-  font-size: var(--size-5-x, 40px);
+  font-size: 40px;
   line-height: var(--size-5-x, 40px);
   letter-spacing: var(--display-3-letter-space);
 }
@@ -2302,10 +2333,10 @@
   --paywall-container-gap-space: -48px;
   --paywall-header-bottom-stack-space: var(--space-10-x, 80px);
   --paywall-card-max-width-size: 346px;
-  --paywall-card-price-tag-font-size: var(--size-8-x, 64px);
+  --paywall-card-price-tag-font-size: 64px;
   --paywall-card-price-tag-line-height: var(--size-8-x, 64px);
   --paywall-card-price-note-line-height: var(--size-5-x, 40px);
-  --paywall-card-price-note-font-size: var(--size-5-x, 40px);
+  --paywall-card-price-note-font-size: 40px;
 }
 
 /* === BREAKPOINT TOKENS === */
@@ -2314,14 +2345,14 @@
 :host([data-content-brand="advertorial"]) {
   --quote-container-inline-space: var(--inline-space-const-lg);
   --quote-container-stack-space: var(--stack-space-resp-lg);
-  --quote-quotation-marks-font-size: var(--size-3-p-5-x, 28px);
+  --quote-quotation-marks-font-size: 28px;
   --quote-content-gap-space: var(--gap-space-const-lg);
 }
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
   :host([data-content-brand="advertorial"]) {
-    --quote-quotation-marks-font-size: var(--size-4-x, 32px);
+    --quote-quotation-marks-font-size: 32px;
     --quote-content-gap-space: var(--gap-space-const-3-xl);
   }
 }
@@ -2330,7 +2361,7 @@
   [data-content-brand="advertorial"],
   :host([data-content-brand="advertorial"]) {
     --quote-container-inline-space: var(--space-3-p-5-x, 28px);
-    --quote-quotation-marks-font-size: var(--size-4-p-5-x, 36px);
+    --quote-quotation-marks-font-size: 36px;
   }
 }
 
@@ -2434,7 +2465,7 @@
 :host([data-content-brand="advertorial"]) {
   --video-spinner-size: var(--size-const-sm);
   --video-spinner-stroke-size: 2px;
-  --video-spinner-size-0-5-x: 20px;
+  --video-spinner-size-0-p-5-x: 20px;
 }
 
 @media (min-width: 600px) {
@@ -2442,7 +2473,7 @@
   :host([data-content-brand="advertorial"]) {
     --video-spinner-size: var(--size-10-x, 80px);
     --video-spinner-stroke-size: 4px;
-    --video-spinner-size-0-5-x: 40px;
+    --video-spinner-size-0-p-5-x: 40px;
   }
 }
 

package/dist/www/css/bundles/bild.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.4
+ * BILD Design System Tokens v1.5.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -124,6 +124,9 @@
   --color-neutral-20-a-0: rgba(44, 49, 51, 0);
   --color-neutral-25-a-0: rgba(52, 60, 65, 0);
   --color-neutral-90-a-0: rgba(221, 225, 226, 0);
+  --color-neutral-0-a-3: rgba(0, 0, 0, 0.03);
+  --color-neutral-0-a-7: rgba(0, 0, 0, 0.07);
+  --color-neutral-0-a-15: rgba(0, 0, 0, 0.15);
 
 
   /* ============================================
@@ -265,6 +268,34 @@
   --st-font-weight-st-book-italic: 400;
   --st-font-weight-light-italic-st: 300;
 
+
+  /* ============================================
+     FONTSIZE
+     ============================================ */
+
+  --font-size-1-p-25-x: 10px;
+  --font-size-1-p-5-x: 12px;
+  --font-size-1-p-75-x: 14px;
+  --font-size-2-x: 16px;
+  --font-size-2-p-25-x: 18px;
+  --font-size-2-p-5-x: 20px;
+  --font-size-2-p-75-x: 22px;
+  --font-size-3-x: 24px;
+  --font-size-3-p-5-x: 28px;
+  --font-size-3-p-75-x: 30px;
+  --font-size-4-x: 32px;
+  --font-size-4-p-5-x: 36px;
+  --font-size-5-x: 40px;
+  --font-size-5-p-25-x: 42px;
+  --font-size-6-x: 48px;
+  --font-size-8-x: 64px;
+  --font-size-9-x: 72px;
+  --font-size-10-x: 80px;
+  --font-size-12-p-5-x: 100px;
+  --font-size-15-x: 120px;
+  --font-size-2-p-625-x: 21px;
+  --font-size-3-p-25-x: 26px;
+
 }
 
 /* === SIZEPRIMITIVE === */
@@ -550,6 +581,20 @@
   --layer-opacity-100: var(--opacity-100, 1);
   --layer-opacity-00: var(--opacity-00, 0);
 
+  /* Semantic - Shadow - Soft */
+  --shadow-color-soft-ambient-sm: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --shadow-color-soft-ambient-md: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
+  --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
+  --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-key-sm: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+  --shadow-color-soft-key-md: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+  --shadow-color-soft-key-lg: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+
+  /* Semantic - Shadow - Hard */
+  --shadow-color-hard-key: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-hard-ambient: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+
 }
 
 /* === DARK MODE === */
@@ -732,143 +777,73 @@
   --layer-opacity-100: var(--opacity-100, 1);
   --layer-opacity-00: var(--opacity-00, 0);
 
-}
-
-/* === EFFECTS === */
-
-/* Effects - Light */
-/* ============================================
-   CSS CUSTOM PROPERTIES
-   ============================================ */
-
-[data-color-brand="bild"][data-theme="light"],
-:host([data-color-brand="bild"][data-theme="light"]) {
-  /* dropshadowsoft */
-  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-  /* dropshadowhard */
-  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-}
-
-/* ============================================
-   DROPSHADOWSOFT (Classes)
-   ============================================ */
-
-[data-color-brand="bild"][data-theme="light"] .shadow-soft-sm,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-sm {
-  box-shadow: var(--shadow-soft-sm);
-}
+  /* Semantic - Shadow - Soft */
+  --shadow-color-soft-ambient-sm: var(--color-neutral-0-a-15, rgba(0, 0, 0, 0.15));
+  --shadow-color-soft-ambient-md: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-15, rgba(0, 0, 0, 0.15));
+  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
+  --shadow-color-soft-key-sm: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-soft-key-md: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-soft-key-lg: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
 
-[data-color-brand="bild"][data-theme="light"] .shadow-soft-md,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-md {
-  box-shadow: var(--shadow-soft-md);
-}
+  /* Semantic - Shadow - Hard */
+  --shadow-color-hard-key: var(--color-neutral-0-a-60, rgba(0, 0, 0, 0.6));
+  --shadow-color-hard-ambient: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
 
-[data-color-brand="bild"][data-theme="light"] .shadow-soft-lg,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-lg {
-  box-shadow: var(--shadow-soft-lg);
 }
 
-[data-color-brand="bild"][data-theme="light"] .shadow-soft-xl,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-xl {
-  box-shadow: var(--shadow-soft-xl);
-}
-
-
-/* ============================================
-   DROPSHADOWHARD (Classes)
-   ============================================ */
+/* === EFFECTS (Mode-agnostic) === */
 
-[data-color-brand="bild"][data-theme="light"] .shadow-hard-sm,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: var(--shadow-hard-sm);
-}
-
-[data-color-brand="bild"][data-theme="light"] .shadow-hard-md,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: var(--shadow-hard-md);
-}
-
-[data-color-brand="bild"][data-theme="light"] .shadow-hard-lg,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: var(--shadow-hard-lg);
-}
-
-[data-color-brand="bild"][data-theme="light"] .shadow-hard-xl,
-:host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: var(--shadow-hard-xl);
-}
-
-/* Effects - Dark */
-/* ============================================
-   CSS CUSTOM PROPERTIES
-   ============================================ */
-
-[data-color-brand="bild"][data-theme="dark"],
-:host([data-color-brand="bild"][data-theme="dark"]) {
-  /* dropshadowsoft */
-  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-  /* dropshadowhard */
-  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-}
-
-/* ============================================
-   DROPSHADOWSOFT (Classes)
-   ============================================ */
-
-[data-color-brand="bild"][data-theme="dark"] .shadow-soft-sm,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-sm {
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --shadow-soft-sm: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-soft-key-sm), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-sm);
+  --shadow-soft-md: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-1-p-5-x, 12px) var(--size-0-x, 0px) var(--shadow-color-soft-key-md), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-2-x, 16px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-md);
+  --shadow-soft-lg: 0px 8px 16px 0px var(--shadow-color-soft-key-lg), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-3-x, 24px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-lg);
+  --shadow-soft-xl: var(--size-0-x, 0px) var(--size-2-x, 16px) var(--size-4-x, 32px) var(--size-0-x, 0px) var(--shadow-color-soft-keyt-xl), var(--size-0-x, 0px) var(--size-0-x, 0px) var(--size-8-x, 64px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-xl);
+  --shadow-hard-sm: var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-25-x, 2px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-p-125-x, 1px) var(--shadow-color-hard-ambient);
+  --shadow-hard-md: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-1-x, 8px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-ambient);
+  --shadow-hard-lg: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-75-x, 6px) var(--size-1-p-5-x, 12px) var(--size-0-p-5-x, 4px) var(--shadow-color-hard-ambient);
+  --shadow-hard-xl: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-1-p-5-x, 12px) var(--size-0-p-75-x, 6px) var(--shadow-color-hard-ambient);
+}
+
+[data-color-brand="bild"] .shadow-soft-sm,
+:host([data-color-brand="bild"]) .shadow-soft-sm {
   box-shadow: var(--shadow-soft-sm);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-soft-md,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-md {
+[data-color-brand="bild"] .shadow-soft-md,
+:host([data-color-brand="bild"]) .shadow-soft-md {
   box-shadow: var(--shadow-soft-md);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-soft-lg,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-lg {
+[data-color-brand="bild"] .shadow-soft-lg,
+:host([data-color-brand="bild"]) .shadow-soft-lg {
   box-shadow: var(--shadow-soft-lg);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-soft-xl,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-xl {
+[data-color-brand="bild"] .shadow-soft-xl,
+:host([data-color-brand="bild"]) .shadow-soft-xl {
   box-shadow: var(--shadow-soft-xl);
 }
 
-
-/* ============================================
-   DROPSHADOWHARD (Classes)
-   ============================================ */
-
-[data-color-brand="bild"][data-theme="dark"] .shadow-hard-sm,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-sm {
+[data-color-brand="bild"] .shadow-hard-sm,
+:host([data-color-brand="bild"]) .shadow-hard-sm {
   box-shadow: var(--shadow-hard-sm);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-hard-md,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-md {
+[data-color-brand="bild"] .shadow-hard-md,
+:host([data-color-brand="bild"]) .shadow-hard-md {
   box-shadow: var(--shadow-hard-md);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-hard-lg,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-lg {
+[data-color-brand="bild"] .shadow-hard-lg,
+:host([data-color-brand="bild"]) .shadow-hard-lg {
   box-shadow: var(--shadow-hard-lg);
 }
 
-[data-color-brand="bild"][data-theme="dark"] .shadow-hard-xl,
-:host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-xl {
+[data-color-brand="bild"] .shadow-hard-xl,
+:host([data-color-brand="bild"]) .shadow-hard-xl {
   box-shadow: var(--shadow-hard-xl);
 }
 
@@ -903,7 +878,7 @@
   --content-max-width-medium: 700px;
   --content-max-width-full: 1024px;
   --title-1-font-size: 22px;
-  --title-2-font-size: 16px;
+  --title-2-font-size: var(--font-size-2-x, 16px);
   --display-1-font-size: 40px;
   --display-2-font-size: 36px;
   --display-3-font-size: 28px;
@@ -911,19 +886,19 @@
   --headline-2-font-size: 40px;
   --headline-3-font-size: 28px;
   --headline-4-font-size: 22px;
-  --body-font-size: 21px;
-  --label-3-font-size: 12px;
+  --body-font-size: var(--font-size-2-p-625-x, 21px);
+  --label-3-font-size: var(--font-size-1-p-5-x, 12px);
   --label-2-font-size: 15px;
   --label-1-font-size: 17px;
-  --callout-1-font-size: 18px;
-  --footnote-1-font-size: 16px;
-  --footnote-2-font-size: 12px;
+  --callout-1-font-size: var(--font-size-2-p-25-x, 18px);
+  --footnote-1-font-size: var(--font-size-2-x, 16px);
+  --footnote-2-font-size: var(--font-size-1-p-5-x, 12px);
   --kicker-1-font-size: 18px;
   --kicker-2-font-size: 18px;
   --kicker-3-font-size: 16px;
   --kicker-4-font-size: 14px;
   --subheadline-1-font-size: 24px;
-  --quote-font-size: 16px;
+  --quote-font-size: var(--font-size-2-x, 16px);
   --body-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
   --callout-font-family: var(--font-family-gotham, Gotham);
   --headline-font-family: var(--font-family-gotham-cond, Gotham Condensed);
@@ -1107,7 +1082,7 @@
     --canvas-width-size-web: 600px;
     --canvas-width-size-app: 834px;
     --canvas-height-size-app: 1194px;
-    --title-2-font-size: 18px;
+    --title-2-font-size: var(--font-size-2-p-25-x, 18px);
     --display-1-font-size: 72px;
     --display-2-font-size: 42px;
     --display-3-font-size: 32px;
@@ -1121,7 +1096,7 @@
     --kicker-3-font-size: 18px;
     --kicker-4-font-size: 16px;
     --subheadline-1-font-size: 32px;
-    --quote-font-size: 18px;
+    --quote-font-size: var(--font-size-2-p-25-x, 18px);
     --kicker-4-line-height: 17.6px;
     --kicker-3-line-height: 18px;
     --kicker-2-line-height: 22px;
@@ -1197,8 +1172,8 @@
     --headline-2-font-size: 64px;
     --headline-3-font-size: 40px;
     --headline-4-font-size: 32px;
-    --footnote-1-font-size: 18px;
-    --footnote-2-font-size: 16px;
+    --footnote-1-font-size: var(--font-size-2-p-25-x, 18px);
+    --footnote-2-font-size: var(--font-size-2-x, 16px);
     --kicker-1-font-size: 30px;
     --kicker-2-font-size: 24px;
     --kicker-3-font-size: 20px;
@@ -2403,14 +2378,14 @@
 :host([data-content-brand="bild"]) .chip-label {
   font-family: var(--footnote-font-family);
   font-weight: var(--label-font-weight-bold);
-  font-size: var(--size-2-x, 16px);
+  font-size: 16px;
 }
 
 /* === BREAKPOINT TOKENS === */
 
 [data-content-brand="bild"],
 :host([data-content-brand="bild"]) {
-  --chip-font-size: var(--size-2-x, 16px);
+  --chip-font-size: 16px;
   --chip-inline-space: var(--inline-space-const-md);
   --chip-stack-space: var(--stack-space-const-sm);
 }
@@ -2418,7 +2393,7 @@
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
   :host([data-content-brand="bild"]) {
-    --chip-font-size: var(--size-2-p-25-x, 18px);
+    --chip-font-size: 18px;
   }
 }
 
@@ -2988,8 +2963,8 @@
 :host([data-content-brand="bild"]) .menu-item-util-label {
   font-family: var(--label-font-family);
   font-weight: 700;
-  font-size: var(--size-1-p-5-x, 12px);
-  line-height: var(--size-1-p-5-x, 12px);
+  font-size: 12px;
+  line-height: 12px;
   text-transform: uppercase;
 }
 
@@ -2999,7 +2974,7 @@
 :host([data-content-brand="bild"]) {
   --menu-item-space: var(--space-1-x, 8px);
   --menu-item-font-size: 15px;
-  --menu-item-util-font-size: var(--size-1-p-5-x, 12px);
+  --menu-item-util-font-size: 12px;
   --menu-item-util-stack-space: var(--space-1-p-25-x, 10px);
   --menu-link-lane-height-size: var(--size-6-x, 48px);
   --menu-utillink-item-height-size: var(--size-6-x, 48px);
@@ -3261,7 +3236,7 @@
 :host([data-content-brand="bild"]) .paywall-card-price-tag {
   font-family: var(--title-font-family);
   font-weight: var(--title-font-weight);
-  font-size: var(--size-8-x, 64px);
+  font-size: var(--paywall-card-price-tag-font-size);
   line-height: var(--size-8-x, 64px);
   letter-spacing: var(--display-2-letter-space);
 }
@@ -3270,7 +3245,7 @@
 :host([data-content-brand="bild"]) .paywall-card-note {
   font-family: var(--title-font-family);
   font-weight: var(--title-font-weight);
-  font-size: var(--size-5-x, 40px);
+  font-size: 40px;
   line-height: var(--size-5-x, 40px);
   letter-spacing: var(--display-3-letter-space);
 }
@@ -3282,10 +3257,10 @@
   --paywall-container-gap-space: -48px;
   --paywall-header-bottom-stack-space: var(--space-10-x, 80px);
   --paywall-card-max-width-size: 346px;
-  --paywall-card-price-tag-font-size: var(--size-8-x, 64px);
+  --paywall-card-price-tag-font-size: 64px;
   --paywall-card-price-tag-line-height: var(--size-8-x, 64px);
   --paywall-card-price-note-line-height: var(--size-5-x, 40px);
-  --paywall-card-price-note-font-size: var(--size-5-x, 40px);
+  --paywall-card-price-note-font-size: 40px;
 }
 
 /* === BREAKPOINT TOKENS === */
@@ -3294,14 +3269,14 @@
 :host([data-content-brand="bild"]) {
   --quote-container-inline-space: var(--inline-space-const-lg);
   --quote-container-stack-space: var(--stack-space-resp-lg);
-  --quote-quotation-marks-font-size: var(--size-3-p-5-x, 28px);
+  --quote-quotation-marks-font-size: 28px;
   --quote-content-gap-space: var(--gap-space-const-lg);
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
   :host([data-content-brand="bild"]) {
-    --quote-quotation-marks-font-size: var(--size-4-x, 32px);
+    --quote-quotation-marks-font-size: 32px;
     --quote-content-gap-space: var(--gap-space-const-3-xl);
   }
 }
@@ -3310,7 +3285,7 @@
   [data-content-brand="bild"],
   :host([data-content-brand="bild"]) {
     --quote-container-inline-space: var(--space-3-p-5-x, 28px);
-    --quote-quotation-marks-font-size: var(--size-4-p-5-x, 36px);
+    --quote-quotation-marks-font-size: 36px;
   }
 }
 
@@ -3442,7 +3417,7 @@
 :host([data-content-brand="bild"]) {
   --video-spinner-size: var(--size-const-sm);
   --video-spinner-stroke-size: 2px;
-  --video-spinner-size-0-5-x: 20px;
+  --video-spinner-size-0-p-5-x: 20px;
 }
 
 @media (min-width: 600px) {
@@ -3450,7 +3425,7 @@
   :host([data-content-brand="bild"]) {
     --video-spinner-size: var(--size-10-x, 80px);
     --video-spinner-stroke-size: 4px;
-    --video-spinner-size-0-5-x: 40px;
+    --video-spinner-size-0-p-5-x: 40px;
   }
 }