feat: add color-coded movement ruler for tactical gameplay

scss/components/shared/_ruler.scss

@@ -0,0 +1,49 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Alexander Minges
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/* Token Ruler Waypoint Styling with Color-Coded Movement Ranges */
+
+:root {
+  --ds4-movement-normal: inherit;
+  --ds4-movement-dash: #ffcc00;
+  --ds4-movement-impossible: #e83031;
+}
+
+.system-ds4 .waypoint-label {
+  .distance {
+    &.move-range {
+      color: var(--ds4-movement-normal);
+    }
+
+    &.dash-range {
+      color: var(--ds4-movement-dash);
+      font-weight: bold;
+    }
+
+    &.out-of-range {
+      color: var(--ds4-movement-impossible);
+      font-weight: bold;
+    }
+  }
+
+  .delta {
+    opacity: 0.8;
+    font-size: 0.9em;
+  }
+
+  .elevation {
+    font-style: italic;
+    opacity: 0.9;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ds4-movement-dash: #ffd700;
+    --ds4-movement-impossible: #ff4444;
+  }
+}

scss/ds4.scss

@@ -19,6 +19,7 @@
 @import "components/shared/embedded_document_list";
 @import "components/shared/form_group";
 @import "components/shared/rollable_image";
+@import "components/shared/ruler";
 @import "components/shared/sheet_body";
 @import "components/shared/sheet_form";
 @import "components/shared/sheet_tab_nav";