changes

app/assets/styles/utils.scss

@@ -262,7 +262,6 @@ $containers: ("3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "
 }
 
 // ─── Shared keywords (auto, px, full, min, max, fit) ───────────────────────
-// These are identical in value across w-, h-, and size-
 $shared-keywords: (
   "auto": auto,
   "px": 1px,
@@ -281,7 +280,6 @@ $shared-keywords: (
 }
 
 // ─── Viewport keywords ─────────────────────────────────────────────────────
-// dvw/dvh/lvw/lvh/svw/svh apply equally to w-, h-, and size-
 $viewport-keywords: (
   "dvw": 100dvw,
   "dvh": 100dvh,
@@ -305,3 +303,68 @@ $viewport-keywords: (
 .h-screen {
   height: 100vh;
 }
+
+// ─── Inset / positional offset classes ────────────────────────────────────
+$inset-types: (
+  "inset": (
+    top,
+    right,
+    bottom,
+    left,
+  ),
+  "inset-x": (
+    left,
+    right,
+  ),
+  "inset-y": (
+    top,
+    bottom,
+  ),
+  "top": (
+    top,
+  ),
+  "right": (
+    right,
+  ),
+  "bottom": (
+    bottom,
+  ),
+  "left": (
+    left,
+  ),
+);
+
+// ─── Numeric: 0 → 48, using the same --spacing scale ──────────────────────
+@each $prefix, $props in $inset-types {
+  @for $i from 0 through 48 {
+    .#{$prefix}-#{$i} {
+      @include set-props($props, calc(var(--spacing) * #{$i}));
+    }
+  }
+}
+
+// ─── Fractions ─────────────────────────────────────────────────────────────
+@each $prefix, $props in $inset-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%));
+    }
+  }
+}
+
+// ─── Keywords ──────────────────────────────────────────────────────────────
+$inset-keywords: (
+  "auto": auto,
+  "px": 1px,
+  "full": 100%,
+);
+
+@each $prefix, $props in $inset-types {
+  @each $name, $value in $inset-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}