changes

app/assets/styles/utils.scss

@@ -132,9 +132,9 @@ $class-types: (
   ),
 );
 
-// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ───────────────────
+// ─── Numeric: w-0 → w-96, h-0 → h-96, size-0 → size-96 ───────────────────
 @each $prefix, $props in $class-types {
-  @for $i from 0 through 48 {
+  @for $i from 0 through 96 {
     .#{$prefix}-#{$i} {
       @include set-props($props, calc(var(--spacing) * #{$i}));
     }
@@ -341,9 +341,9 @@ $inset-types: (
   ),
 );
 
-// ─── Numeric: 0 → 48, using the same --spacing scale ──────────────────────
+// ─── Numeric: 0 → 96, using the same --spacing scale ──────────────────────
 @each $prefix, $props in $inset-types {
-  @for $i from 0 through 48 {
+  @for $i from 0 through 96 {
     .#{$prefix}-#{$i} {
       @include set-props($props, calc(var(--spacing) * #{$i}));
     }
@@ -375,3 +375,98 @@ $inset-keywords: (
     }
   }
 }
+
+// ─── Max/Min width & height ────────────────────────────────────────────────
+$minmax-types: (
+  "max-w": (
+    max-width,
+  ),
+  "min-w": (
+    min-width,
+  ),
+  "max-h": (
+    max-height,
+  ),
+  "min-h": (
+    min-height,
+  ),
+);
+
+// ─── Numeric: 0 → 96, using --spacing scale ───────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @for $i from 0 through 96 {
+    .#{$prefix}-#{$i} {
+      @include set-props($props, calc(var(--spacing) * #{$i}));
+    }
+  }
+}
+
+// ─── Fractions ─────────────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $pair in $fractions {
+    $num: list.nth($pair, 1);
+    $den: list.nth($pair, 2);
+    .#{$prefix}-#{$name} {
+      @include set-props($props, calc(#{$num} / #{$den} * 100%));
+    }
+  }
+}
+
+// ─── Shared keywords ───────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $value in $shared-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}
+
+// ─── Viewport keywords ─────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $value in $viewport-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}
+
+// ─── Container sizes (max-w- / min-w- only) ───────────────────────────────
+@each $name in $containers {
+  .max-w-#{$name} {
+    max-width: var(--container-#{$name});
+  }
+  .min-w-#{$name} {
+    min-width: var(--container-#{$name});
+  }
+}
+
+// ─── Screen ────────────────────────────────────────────────────────────────
+.max-w-screen {
+  max-width: 100vw;
+}
+.min-w-screen {
+  min-width: 100vw;
+}
+.max-h-screen {
+  max-height: 100vh;
+}
+.min-h-screen {
+  min-height: 100vh;
+}
+
+// ─── none (max only) ───────────────────────────────────────────────────────
+.max-w-none {
+  max-width: none;
+}
+.max-h-none {
+  max-height: none;
+}
+
+// ─── Opacity ───────────────────────────────────────────────────────────────
+$opacity-values: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+
+@each $val in $opacity-values {
+  .opacity-#{$val} {
+    opacity: calc($val / 100);
+  }
+}