feat: enhance movement waypoint styling with semantic colors and

animations

scss/components/shared/_ruler.scss

@@ -6,26 +6,37 @@
 
 /* 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 {
+  font-size: 1.5em;
+
+  // Main icon styling for movement types
+  &.move-range > i.fa-person-walking {
+    color: var(--color-level-success);
+  }
+
+  &.dash-range > i.fa-person-running {
+    color: var(--color-level-warning);
+  }
+
+  &.out-of-range > i.fa-person-rays {
+    color: var(--color-level-error);
+    animation: pulse 2s infinite;
+  }
+
   .distance {
     &.move-range {
-      color: var(--ds4-movement-normal);
+      color: var(--color-level-success);
     }
 
     &.dash-range {
-      color: var(--ds4-movement-dash);
+      color: var(--color-level-warning);
       font-weight: bold;
     }
 
     &.out-of-range {
-      color: var(--ds4-movement-impossible);
+      color: var(--color-level-error);
       font-weight: bold;
+      animation: pulse 2s infinite;
     }
   }
 
@@ -40,10 +51,12 @@
   }
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ds4-movement-dash: #ffd700;
-    --ds4-movement-impossible: #ff4444;
+/* Icon animations */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
   }
 }

templates/partials/waypoint-label.hbs

@@ -9,7 +9,11 @@ SPDX-License-Identifier: MIT
 !-- Based on DS4 movement combat values
 --}}
 <div class="waypoint-label {{rangeClass}}">
-    {{#if action.icon}}
+    {{#if (eq rangeClass "dash-range")}}
+    <i class="fas fa-person-running"></i>
+    {{else if (eq rangeClass "out-of-range")}}
+    <i class="fas fa-person-rays"></i>
+    {{else if action.icon}}
     <i class="{{action.icon}}"></i>
     {{else if action.label}}
     {{localize action.label}}