@revikornmann/muka-ui 0.8.0 → 0.9.1

package/dist/styles/tokens-bouwplan-dark.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #2a2a24;
   --button-color-ghost-border-pressed: #2a2a24;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #63635a;
+  --button-color-muted-foreground-hover: #e9e9e8;
+  --button-color-muted-foreground-pressed: #e9e9e8;
+  --button-color-muted-foreground-disabled: #63635a;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #2a2a24;
+  --button-color-muted-border-pressed: #2a2a24;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #161615;
   --button-color-tertiary-background-hover: #161615;
   --button-color-tertiary-background-pressed: #23231e;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #161615;
   --segmentgroup-segment-color-selected-foreground: #e9e9e8;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-bouwplan-light.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #e9e8e6;
   --button-color-ghost-border-pressed: #e9e8e6;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #8d8d86;
+  --button-color-muted-foreground-hover: #21201c;
+  --button-color-muted-foreground-pressed: #21201c;
+  --button-color-muted-foreground-disabled: #8d8d86;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #e9e8e6;
+  --button-color-muted-border-pressed: #e9e8e6;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #fdfdfc;
   --button-color-tertiary-background-hover: #fdfdfc;
   --button-color-tertiary-background-pressed: #f1f0ef;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #fdfdfc;
   --segmentgroup-segment-color-selected-foreground: #21201c;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-fscl-dark.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #252925;
   --button-color-ghost-border-pressed: #252925;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #5a605a;
+  --button-color-muted-foreground-hover: #e9ebe9;
+  --button-color-muted-foreground-pressed: #e9ebe9;
+  --button-color-muted-foreground-disabled: #5a605a;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #252925;
+  --button-color-muted-border-pressed: #252925;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #151716;
   --button-color-tertiary-background-hover: #151716;
   --button-color-tertiary-background-pressed: #1f231f;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #151716;
   --segmentgroup-segment-color-selected-foreground: #e9ebe9;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-fscl-light.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #e6e9e8;
   --button-color-ghost-border-pressed: #e6e9e8;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #868e8b;
+  --button-color-muted-foreground-hover: #1a211e;
+  --button-color-muted-foreground-pressed: #1a211e;
+  --button-color-muted-foreground-disabled: #868e8b;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #e6e9e8;
+  --button-color-muted-border-pressed: #e6e9e8;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #fbfdfc;
   --button-color-tertiary-background-hover: #fbfdfc;
   --button-color-tertiary-background-pressed: #eef1f0;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #fbfdfc;
   --segmentgroup-segment-color-selected-foreground: #1a211e;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-grip-dark.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #2a2a24;
   --button-color-ghost-border-pressed: #2a2a24;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #63635a;
+  --button-color-muted-foreground-hover: #e9e9e8;
+  --button-color-muted-foreground-pressed: #e9e9e8;
+  --button-color-muted-foreground-disabled: #63635a;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #2a2a24;
+  --button-color-muted-border-pressed: #2a2a24;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #161615;
   --button-color-tertiary-background-hover: #161615;
   --button-color-tertiary-background-pressed: #23231e;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #161615;
   --segmentgroup-segment-color-selected-foreground: #e9e9e8;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-grip-light.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #e9e8e6;
   --button-color-ghost-border-pressed: #e9e8e6;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #8d8d86;
+  --button-color-muted-foreground-hover: #21201c;
+  --button-color-muted-foreground-pressed: #21201c;
+  --button-color-muted-foreground-disabled: #8d8d86;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #e9e8e6;
+  --button-color-muted-border-pressed: #e9e8e6;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #fdfdfc;
   --button-color-tertiary-background-hover: #fdfdfc;
   --button-color-tertiary-background-pressed: #f1f0ef;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #fdfdfc;
   --segmentgroup-segment-color-selected-foreground: #21201c;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-muka-dark.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #2b2b30;
   --button-color-ghost-border-pressed: #2b2b30;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #737387;
+  --button-color-muted-foreground-hover: #e6e6ea;
+  --button-color-muted-foreground-pressed: #e6e6ea;
+  --button-color-muted-foreground-disabled: #737387;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #2b2b30;
+  --button-color-muted-border-pressed: #2b2b30;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #161618;
   --button-color-tertiary-background-hover: #161618;
   --button-color-tertiary-background-pressed: #232326;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #161618;
   --segmentgroup-segment-color-selected-foreground: #e6e6ea;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-muka-light.css

@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #eae7ec;
   --button-color-ghost-border-pressed: #eae7ec;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #8e8c99;
+  --button-color-muted-foreground-hover: #211f26;
+  --button-color-muted-foreground-pressed: #211f26;
+  --button-color-muted-foreground-disabled: #8e8c99;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #eae7ec;
+  --button-color-muted-border-pressed: #eae7ec;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #fdfcfd;
   --button-color-tertiary-background-hover: #fdfcfd;
   --button-color-tertiary-background-pressed: #f2eff3;
@@ -1937,6 +1949,8 @@
   --segmentgroup-container-radius: 999rem;
   --segmentgroup-container-padding: 0.25rem;
   --segmentgroup-container-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
+  --segmentgroup-segment-fontWeight: 400;
+  --segmentgroup-segment-gap: 0.25rem;
   --segmentgroup-segment-color-selected-background: #fdfcfd;
   --segmentgroup-segment-color-selected-foreground: #211f26;
   --segmentgroup-segment-color-unselected-background: transparent;
@@ -2068,6 +2082,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2121,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {