fix(design): align range-bar zone backgrounds with Dracula tokens

`<RangeBar>` painted its red / orange / green zones in raw Tailwind
palette (`bg-red-500/8`, `bg-yellow-500/12`, `bg-green-500/20`),
while the marker dot already drew from `var(--dracula-red|orange|green)`.
That split meant the zone backgrounds drifted out of the theme on
dark-mode and never tracked the rest of the token surface (PR
badges, alerts, status pills). Swap the zone tints to the matching
Dracula tokens and pin the absence of the legacy raw palette in the
existing extraction-contract test.

src/components/targets/__tests__/range-bar.test.tsx

@@ -20,7 +20,7 @@ function render(props: Parameters<typeof RangeBar>[0]) {
 }
 
 describe("<RangeBar>", () => {
-  it("renders the bar slot + green/yellow/red zones", () => {
+  it("renders the bar slot + green/orange/red zones with Dracula tokens", () => {
     const html = render({
       value: 72,
       min: 60,
@@ -28,8 +28,14 @@ describe("<RangeBar>", () => {
       unit: "bpm",
     });
     expect(html).toContain('data-slot="target-range-bar"');
-    expect(html).toContain("bg-green-500/20");
-    expect(html).toContain("bg-yellow-500/12");
+    expect(html).toContain("bg-dracula-green/20");
+    expect(html).toContain("bg-dracula-orange/15");
+    expect(html).toContain("bg-dracula-red/10");
+    // Pin the absence of the legacy raw Tailwind palette so the swap
+    // doesn't silently regress on future merges.
+    expect(html).not.toContain("bg-green-500/20");
+    expect(html).not.toContain("bg-yellow-500/12");
+    expect(html).not.toContain("bg-red-500/8");
   });
 
   it("paints the marker with the green token when the value is in range", () => {

src/components/targets/range-bar.tsx

@@ -99,26 +99,30 @@ export function RangeBar({
   return (
     <div className="space-y-1.5" data-slot="target-range-bar">
       <div className="bg-muted/50 relative h-3 w-full overflow-hidden rounded-full">
-        {/* Red background (full bar) */}
-        <div className="absolute inset-0 rounded-full bg-red-500/8" />
-        {/* Yellow zones */}
+        {/* Red background (full bar) — Dracula `--dracula-red` so the
+            chart palette stays aligned with PR-badge, alerts, and the
+            marker dot itself. Raw Tailwind palettes drift from the
+            theme over time and never get dark-mode tuned. */}
+        <div className="bg-dracula-red/10 absolute inset-0 rounded-full" />
+        {/* Orange (caution) side zones — `--dracula-orange` matches the
+            marker's out-of-band tint. */}
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${yellowLeftStart}%`,
             width: `${greenStart - yellowLeftStart}%`,
           }}
         />
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${greenEnd}%`,
             width: `${yellowRightEnd - greenEnd}%`,
           }}
         />
-        {/* Green zone */}
+        {/* In-band green zone — `--dracula-green`. */}
         <div
-          className="absolute top-0 h-full bg-green-500/20"
+          className="bg-dracula-green/20 absolute top-0 h-full"
           style={{
             left: `${greenStart}%`,
             width: `${greenEnd - greenStart}%`,