refactor(docs): extract accent purple into CSS custom property

Define --sl-color-accent-rgb (139 92 246) alongside --sl-color-accent
and replace all 12 hardcoded rgba(139, 92, 246, ...) occurrences with
rgb(var(--sl-color-accent-rgb) / alpha). This makes the accent color
a single source of truth across custom.css, PackageManagerCode.astro,
and Terminal.astro.

Author: BYK

docs/src/components/PackageManagerCode.astro

@@ -104,7 +104,7 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
 
   .pm-copy:focus-visible {
     color: rgba(255, 255, 255, 0.8);
-    outline: 2px solid rgba(139, 92, 246, 0.5);
+    outline: 2px solid rgb(var(--sl-color-accent-rgb) / 0.5);
     outline-offset: 2px;
     border-radius: 4px;
   }

docs/src/components/Terminal.astro

@@ -106,7 +106,7 @@ if (background) {
     position: absolute;
     inset: 0;
     background: 
-      radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
+      radial-gradient(ellipse at 20% 20%, rgb(var(--sl-color-accent-rgb) / 0.15) 0%, transparent 50%),
       radial-gradient(ellipse at 80% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
     pointer-events: none;
   }

docs/src/styles/custom.css

@@ -23,8 +23,9 @@ html,
 
   /* Accent colors - Purple theme */
   --sl-color-accent: #8b5cf6;
+  --sl-color-accent-rgb: 139 92 246;
   --sl-color-accent-high: #a78bfa;
-  --sl-color-accent-low: rgba(139, 92, 246, 0.2);
+  --sl-color-accent-low: rgb(var(--sl-color-accent-rgb) / 0.2);
 
   /* Text colors - BOOSTED CONTRAST */
   --sl-color-white: #ffffff;
@@ -42,7 +43,7 @@ html,
   --sl-color-hairline-light: rgba(255, 255, 255, 0.06);
 
   /* Inline code - accent-tinted */
-  --sl-color-bg-inline-code: rgba(139, 92, 246, 0.15);
+  --sl-color-bg-inline-code: rgb(var(--sl-color-accent-rgb) / 0.15);
 
   /* Typography */
   --sl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -72,14 +73,14 @@ body {
 
 /* Re-add purple outline for keyboard focus */
 :focus-visible {
-  outline: 2px solid rgba(139, 92, 246, 0.5) !important;
+  outline: 2px solid rgb(var(--sl-color-accent-rgb) / 0.5) !important;
   outline-offset: 2px !important;
   border-radius: 4px;
 }
 
 /* Skip to content link — visible on any focus (keyboard only element) */
 a[href="#_top"]:focus {
-  background: rgba(139, 92, 246, 0.9) !important;
+  background: rgb(var(--sl-color-accent-rgb) / 0.9) !important;
   color: #fff !important;
   outline: none !important;
 }
@@ -95,7 +96,7 @@ a[href="#_top"]:focus {
   background:
     radial-gradient(
       ellipse 80% 50% at 50% -20%,
-      rgba(139, 92, 246, 0.12) 0%,
+      rgb(var(--sl-color-accent-rgb) / 0.12) 0%,
       transparent 50%
     ),
     radial-gradient(
@@ -1274,7 +1275,7 @@ code {
 
 .expressive-code .copy button:focus-visible {
   color: rgba(255, 255, 255, 0.8) !important;
-  outline: 2px solid rgba(139, 92, 246, 0.5) !important;
+  outline: 2px solid rgb(var(--sl-color-accent-rgb) / 0.5) !important;
   outline-offset: 2px !important;
   border-radius: 4px !important;
 }
@@ -1606,12 +1607,12 @@ nav.sidebar a {
 
 nav.sidebar a:hover {
   color: #fff;
-  background: rgba(139, 92, 246, 0.1);
+  background: rgb(var(--sl-color-accent-rgb) / 0.1);
 }
 
 nav.sidebar a[aria-current="page"] {
   color: #fff;
-  background: rgba(139, 92, 246, 0.2);
+  background: rgb(var(--sl-color-accent-rgb) / 0.2);
 }
 
 /* Sidebar group labels - "GETTING STARTED", "COMMANDS", etc. */
@@ -1835,8 +1836,8 @@ summary[id="starlight__on-this-page--mobile"] .caret {
 .overscroll-message span {
   display: inline-block;
   padding: 0.6rem 1.5rem;
-  background: rgba(139, 92, 246, 0.12);
-  border: 1px solid rgba(139, 92, 246, 0.25);
+  background: rgb(var(--sl-color-accent-rgb) / 0.12);
+  border: 1px solid rgb(var(--sl-color-accent-rgb) / 0.25);
   border-radius: 24px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 0.9rem;