diff --git a/frontend/src/App.css b/frontend/src/App.css
index 84d6ebfa..16b1f25f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -251,7 +251,7 @@ body {
 
 .explorer-resize-handle:hover,
 .explorer-resize-handle:active {
-  background: #007acc;
+  background: var(--color-action-primary);
 }
 
 .editor-wrapper {
@@ -283,7 +283,7 @@ body {
 
 .resize-handle:hover,
 .resize-handle:active {
-  background: #007acc;
+  background: var(--color-action-primary);
 }
 
 .resize-handle-grip {
@@ -329,7 +329,7 @@ body {
     flex-shrink: 0;
     height: 44px;
     background: #1e1e1e;
-    border-bottom: 2px solid #007acc;
+    border-bottom: 2px solid var(--color-action-primary);
     z-index: 50;
     /* Sits between header and panels */
   }
@@ -357,9 +357,9 @@ body {
   }
 
   .mobile-tab-btn--active {
-    color: #007acc;
-    border-bottom-color: #007acc;
-    background: rgba(0, 122, 204, 0.1);
+    color: var(--color-action-primary);
+    border-bottom-color: var(--color-action-primary);
+    background: rgba(0, 113, 227, 0.1);
   }
 
   .mobile-tab-btn:active {
diff --git a/frontend/src/components/ComponentPickerModal.css b/frontend/src/components/ComponentPickerModal.css
index 3ebc7eb6..f2e63a14 100644
--- a/frontend/src/components/ComponentPickerModal.css
+++ b/frontend/src/components/ComponentPickerModal.css
@@ -106,7 +106,7 @@
 }
 
 .search-input:focus {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .clear-search-btn {
@@ -164,8 +164,8 @@
 }
 
 .category-tab.active {
-  background: #007acc;
-  border-color: #007acc;
+  background: var(--color-action-primary);
+  border-color: var(--color-action-primary);
   color: white;
 }
 
@@ -229,7 +229,7 @@
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #007acc;
+  border-top: 4px solid var(--color-action-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -257,7 +257,7 @@
 
 .clear-filters-btn {
   padding: 10px 20px;
-  background: #007acc;
+  background: var(--color-action-primary);
   color: white;
   border: none;
   border-radius: 6px;
@@ -286,8 +286,8 @@
 }
 
 .component-card:hover {
-  border-color: #007acc;
-  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.15);
+  border-color: var(--color-action-primary);
+  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.15);
   transform: translateY(-2px);
 }
 
@@ -416,7 +416,7 @@
 }
 
 .search-input:focus {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .search-input::placeholder {
@@ -439,7 +439,7 @@
 }
 
 .component-card:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .card-thumbnail {
diff --git a/frontend/src/components/editor/EditorToolbar.css b/frontend/src/components/editor/EditorToolbar.css
index a5b299dc..51ef13f4 100644
--- a/frontend/src/components/editor/EditorToolbar.css
+++ b/frontend/src/components/editor/EditorToolbar.css
@@ -164,11 +164,13 @@
 .tb-libraries-label {
   line-height: 1;
 }
-/* Hide the label when the toolbar is narrow — icon alone keeps the button
-   reachable without stealing horizontal space from the file tabs. The
-   container query reacts to the toolbar's own width, so it triggers when
-   the user drags the editor/canvas divider, not just on small viewports. */
-@container editor-toolbar (max-width: 600px) {
+/* Hide the label only when the toolbar is genuinely cramped — keep the
+   "Libraries" text visible in the default 50/50 split (~376px toolbar) so
+   the button reads clearly. Below 360px the icon alone keeps it reachable
+   without stealing horizontal space from the file tabs. The container query
+   reacts to the toolbar's own width, so it triggers when the user drags the
+   editor/canvas divider very narrow, not just on small viewports. */
+@container editor-toolbar (max-width: 360px) {
   .tb-libraries-label {
     display: none;
   }
diff --git a/frontend/src/components/editor/FileExplorer.css b/frontend/src/components/editor/FileExplorer.css
index ef84de53..7d53ee89 100644
--- a/frontend/src/components/editor/FileExplorer.css
+++ b/frontend/src/components/editor/FileExplorer.css
@@ -64,7 +64,7 @@
 
 .file-explorer-save-btn:hover {
   background: rgba(255, 255, 255, 0.08);
-  color: #4fc3f7;
+  color: var(--color-action-primary);
 }
 
 .file-explorer-list {
@@ -94,7 +94,7 @@
 }
 
 .file-explorer-item-active {
-  background: rgba(79, 195, 247, 0.12);
+  background: rgba(0, 113, 227, 0.12);
   color: #e2e2e2;
 }
 
@@ -125,7 +125,7 @@
 .file-explorer-rename-input {
   flex: 1;
   background: #3c3c3c;
-  border: 1px solid #4fc3f7;
+  border: 1px solid var(--color-action-primary);
   color: #fff;
   font-size: 12px;
   padding: 1px 4px;
diff --git a/frontend/src/components/editor/FileTabs.css b/frontend/src/components/editor/FileTabs.css
index 4f964231..2103108b 100644
--- a/frontend/src/components/editor/FileTabs.css
+++ b/frontend/src/components/editor/FileTabs.css
@@ -58,7 +58,7 @@
 .file-tab-active {
   background: #1e1e1e;
   color: #fff;
-  border-top: 2px solid #4fc3f7;
+  border-top: 2px solid var(--color-action-primary);
 }
 
 .file-tab-modified {
diff --git a/frontend/src/components/examples/ExamplesGallery.css b/frontend/src/components/examples/ExamplesGallery.css
index 0b52f997..bd87d95c 100644
--- a/frontend/src/components/examples/ExamplesGallery.css
+++ b/frontend/src/components/examples/ExamplesGallery.css
@@ -287,8 +287,8 @@
     border-color 0.15s;
 }
 .example-copy-link:hover {
-  color: #4fc3f7;
-  border-color: #4fc3f7;
+  color: var(--color-action-primary);
+  border-color: var(--color-action-primary);
 }
 
 .examples-empty {
@@ -316,7 +316,7 @@
 
 .examples-empty-reset:hover {
   background: var(--bg-elevated);
-  border-color: var(--accent, #4fc3f7);
+  border-color: var(--accent, var(--color-action-primary));
 }
 
 /* ── Search ──────────────────────────────────────────────────────────── */
@@ -373,7 +373,7 @@
 }
 
 .examples-search-input:focus {
-  border-color: var(--accent, #4fc3f7);
+  border-color: var(--accent, var(--color-action-primary));
   background: var(--bg-elevated);
 }
 
diff --git a/frontend/src/components/simulator/BoardOptionsModal.css b/frontend/src/components/simulator/BoardOptionsModal.css
index 5935f2bc..9a90d7aa 100644
--- a/frontend/src/components/simulator/BoardOptionsModal.css
+++ b/frontend/src/components/simulator/BoardOptionsModal.css
@@ -111,8 +111,8 @@
 }
 
 .bom-tab.active {
-  color: #4fc3f7;
-  border-bottom-color: #4fc3f7;
+  color: var(--color-action-primary);
+  border-bottom-color: var(--color-action-primary);
 }
 
 .bom-body {
@@ -166,11 +166,11 @@
 }
 
 .bom-select:focus {
-  outline: 1px solid #4fc3f7;
+  outline: 1px solid var(--color-action-primary);
 }
 
 .bom-check {
-  accent-color: #4fc3f7;
+  accent-color: var(--color-action-primary);
 }
 
 .bom-badge {
@@ -233,8 +233,8 @@
 }
 
 .bom-btn-primary {
-  background: #0e639c;
-  border-color: #0e639c;
+  background: var(--color-action-primary);
+  border-color: var(--color-action-primary);
   color: #fff;
 }
 
@@ -317,7 +317,7 @@
 }
 
 .bom-spiffs-add {
-  background: #0e639c;
+  background: var(--color-action-primary);
   border: none;
   color: #fff;
   padding: 6px 12px;
diff --git a/frontend/src/components/simulator/ComponentPalette.css b/frontend/src/components/simulator/ComponentPalette.css
index bd6b127b..6cfee264 100644
--- a/frontend/src/components/simulator/ComponentPalette.css
+++ b/frontend/src/components/simulator/ComponentPalette.css
@@ -46,7 +46,7 @@
 
 .palette-item:hover {
   background-color: #4d4d4d;
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .palette-item:active {
diff --git a/frontend/src/components/simulator/ComponentPropertyDialog.css b/frontend/src/components/simulator/ComponentPropertyDialog.css
index 8a64f847..694bc181 100644
--- a/frontend/src/components/simulator/ComponentPropertyDialog.css
+++ b/frontend/src/components/simulator/ComponentPropertyDialog.css
@@ -146,20 +146,20 @@
 }
 .pin-role-item--interactive:hover {
   background-color: #4a4a4a;
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 .pin-role-item--interactive:active {
   transform: scale(0.98);
   background-color: #2a2d2e;
 }
 .pin-role-item--interactive:focus-visible {
-  outline: 2px solid #007acc;
+  outline: 2px solid var(--color-action-primary);
   outline-offset: 1px;
 }
 
 .pin-role-action {
   margin-left: auto;
-  color: #007acc;
+  color: var(--color-action-primary);
   font-weight: 700;
   font-size: 14px;
 }
@@ -231,12 +231,12 @@
 }
 
 .property-edit-select:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .property-edit-select:focus {
-  border-color: #007acc;
-  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.25);
+  border-color: var(--color-action-primary);
+  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
 }
 
 .property-edit-select option {
@@ -260,12 +260,12 @@
 }
 
 .property-edit-input:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .property-edit-input:focus {
-  border-color: #007acc;
-  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.25);
+  border-color: var(--color-action-primary);
+  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
 }
 
 .property-actions {
@@ -304,14 +304,14 @@
 }
 
 .rotate-button {
-  background-color: #007acc;
+  background-color: var(--color-action-primary);
   color: white;
 }
 
 .rotate-button:hover {
   background-color: #005a9e;
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
 }
 
 .delete-button {
@@ -403,7 +403,7 @@
   padding: 5px 12px;
   border: none;
   border-radius: 4px;
-  background-color: #007acc;
+  background-color: var(--color-action-primary);
   color: #fff;
   cursor: pointer;
   transition: all 0.2s;
@@ -411,7 +411,7 @@
 .sd-card-add:hover {
   background-color: #005a9e;
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
 }
 .sd-card-total {
   font-size: 11px;
diff --git a/frontend/src/components/simulator/InstallLibrariesModal.css b/frontend/src/components/simulator/InstallLibrariesModal.css
index ce0835c1..eb0a8d54 100644
--- a/frontend/src/components/simulator/InstallLibrariesModal.css
+++ b/frontend/src/components/simulator/InstallLibrariesModal.css
@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #00b8d4;
+  color: var(--color-action-primary);
   font-weight: 500;
 }
 
@@ -184,7 +184,7 @@
 }
 
 .ilib-badge--installing {
-  color: #00b8d4;
+  color: var(--color-action-primary);
   background: #0a1f24;
   border: 1px solid #005f7a;
 }
@@ -262,13 +262,13 @@
 }
 
 .ilib-btn--primary {
-  background: #00b8d4;
+  background: var(--color-action-primary);
   color: #000;
 }
 
 .ilib-btn--primary:hover:not(:disabled) {
   background: #00d4f0;
-  box-shadow: 0 0 12px rgba(0, 184, 212, 0.4);
+  box-shadow: 0 0 12px rgba(0, 113, 227, 0.4);
   transform: translateY(-1px);
 }
 
diff --git a/frontend/src/components/simulator/LibraryManagerModal.css b/frontend/src/components/simulator/LibraryManagerModal.css
index 9644e4de..5737db89 100644
--- a/frontend/src/components/simulator/LibraryManagerModal.css
+++ b/frontend/src/components/simulator/LibraryManagerModal.css
@@ -72,7 +72,7 @@
 .lib-icon {
   width: 18px;
   height: 18px;
-  color: #00b8d4;
+  color: var(--color-action-primary);
   flex-shrink: 0;
 }
 
@@ -120,8 +120,8 @@
 }
 
 .lib-tab.active {
-  color: #00b8d4;
-  border-bottom-color: #00b8d4;
+  color: var(--color-action-primary);
+  border-bottom-color: var(--color-action-primary);
 }
 
 /* Status bar */
@@ -176,7 +176,7 @@
   outline: none;
   color: #ddd;
   font-size: 14px;
-  caret-color: #00b8d4;
+  caret-color: var(--color-action-primary);
 }
 
 .lib-search-bar input::placeholder {
@@ -186,7 +186,7 @@
 .lib-spinner {
   width: 16px;
   height: 16px;
-  color: #00b8d4;
+  color: var(--color-action-primary);
   flex-shrink: 0;
   animation: spin 0.8s linear infinite;
 }
@@ -322,7 +322,7 @@
 
 /* Install button */
 .lib-install-btn {
-  background: #00b8d4;
+  background: var(--color-action-primary);
   color: #000;
   border: none;
   border-radius: 20px;
@@ -337,7 +337,7 @@
 
 .lib-install-btn:hover:not(:disabled) {
   background: #00d4f0;
-  box-shadow: 0 0 12px rgba(0, 184, 212, 0.4);
+  box-shadow: 0 0 12px rgba(0, 113, 227, 0.4);
   transform: translateY(-1px);
 }
 
diff --git a/frontend/src/components/simulator/Oscilloscope.css b/frontend/src/components/simulator/Oscilloscope.css
index 27b8a02a..2be52a18 100644
--- a/frontend/src/components/simulator/Oscilloscope.css
+++ b/frontend/src/components/simulator/Oscilloscope.css
@@ -48,14 +48,14 @@
 }
 
 .osc-btn:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
   color: #fff;
 }
 
 .osc-btn-active {
   background: #0e3a5a;
-  border-color: #007acc;
-  color: #4fc3f7;
+  border-color: var(--color-action-primary);
+  color: var(--color-action-primary);
 }
 
 .osc-btn-danger {
@@ -86,7 +86,7 @@
 }
 
 .osc-select:focus {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 /* ── Channel picker dropdown ── */
@@ -147,8 +147,8 @@
 
 .osc-picker-board-tab.active {
   background: #0e3a5a;
-  border-color: #007acc;
-  color: #4fc3f7;
+  border-color: var(--color-action-primary);
+  color: var(--color-action-primary);
 }
 
 .osc-picker-board-label {
@@ -182,7 +182,7 @@
 
 .osc-pin-btn:hover {
   background: #0e3a5a;
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
   color: #fff;
 }
 
diff --git a/frontend/src/components/simulator/SensorControlPanel.css b/frontend/src/components/simulator/SensorControlPanel.css
index 10bbe5b6..c984c422 100644
--- a/frontend/src/components/simulator/SensorControlPanel.css
+++ b/frontend/src/components/simulator/SensorControlPanel.css
@@ -127,7 +127,7 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: #007acc;
+  background: var(--color-action-primary);
   cursor: pointer;
   transition: background 0.15s;
 }
@@ -140,7 +140,7 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: #007acc;
+  background: var(--color-action-primary);
   cursor: pointer;
   border: none;
 }
@@ -177,6 +177,6 @@
 }
 
 .sensor-trigger-button:active {
-  background-color: #007acc;
-  border-color: #007acc;
+  background-color: var(--color-action-primary);
+  border-color: var(--color-action-primary);
 }
diff --git a/frontend/src/components/simulator/SimulatorCanvas.css b/frontend/src/components/simulator/SimulatorCanvas.css
index 9451feb3..e8ffdef8 100644
--- a/frontend/src/components/simulator/SimulatorCanvas.css
+++ b/frontend/src/components/simulator/SimulatorCanvas.css
@@ -97,7 +97,7 @@
 }
 
 .board-selector:hover:not(:disabled) {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .board-selector:disabled {
@@ -127,14 +127,14 @@
 }
 
 .canvas-serial-btn:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
   color: #ccc;
 }
 
 .canvas-serial-btn-active {
   background: #0e3a5a;
-  border-color: #007acc;
-  color: #4fc3f7;
+  border-color: var(--color-action-primary);
+  color: var(--color-action-primary);
 }
 
 /* ── Canvas icon-only buttons (undo/redo, …) ─────── */
@@ -158,7 +158,7 @@
 }
 
 .canvas-icon-btn:hover:not(:disabled) {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
   color: #ccc;
 }
 
@@ -314,7 +314,7 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
-  background: rgba(0, 122, 204, 0.92);
+  background: rgba(0, 113, 227, 0.92);
   color: #fff;
   padding: 8px 16px;
   border-radius: 8px;
@@ -447,7 +447,7 @@
 
 /* BLE status colours */
 .canvas-ble-initialized {
-  color: #3b82f6;
+  color: var(--color-action-primary);
 }
 .canvas-ble-advertising {
   color: #6366f1;
@@ -462,7 +462,7 @@
   transform: scale(0.97);
 }
 .selection-action-bar button:focus-visible {
-  outline: 2px solid #007acc;
+  outline: 2px solid var(--color-action-primary);
   outline-offset: 1px;
 }
 
diff --git a/frontend/src/desktop/desktop.css b/frontend/src/desktop/desktop.css
index d8381719..acc4398c 100644
--- a/frontend/src/desktop/desktop.css
+++ b/frontend/src/desktop/desktop.css
@@ -63,7 +63,7 @@
 }
 
 .vlx-desktop-welcome-primary {
-  background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
+  background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
   color: #fff;
   border: 1px solid #005ea1;
   font-weight: 600;
@@ -127,7 +127,7 @@
 
 .vlx-desktop-welcome-paste input:focus {
   outline: none;
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .vlx-desktop-welcome-trust {
@@ -307,7 +307,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
   width: 28px;
   height: 28px;
   border-radius: 14px;
-  background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
+  background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
   color: white;
   font-size: 14px;
   font-weight: 700;
@@ -350,7 +350,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
   font-size: 13px;
   font-weight: 600;
   color: white;
-  background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
+  background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
   border: 1px solid #005ea1;
   border-radius: 5px;
   cursor: pointer;
@@ -387,7 +387,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
 
 .vlx-desktop-update-toast-progress-bar {
   height: 100%;
-  background: linear-gradient(90deg, #007acc 0%, #00a4ff 100%);
+  background: linear-gradient(90deg, var(--color-action-primary) 0%, #00a4ff 100%);
   transition: width 0.2s ease;
 }
 
diff --git a/frontend/src/pages/DocsPage.css b/frontend/src/pages/DocsPage.css
index 46d69e72..53ec5e83 100644
--- a/frontend/src/pages/DocsPage.css
+++ b/frontend/src/pages/DocsPage.css
@@ -190,7 +190,7 @@
 
 .docs-sidebar-item--active {
   color: var(--accent);
-  background: rgba(0, 122, 204, 0.12);
+  background: rgba(0, 113, 227, 0.12);
 }
 
 .docs-sidebar-footer {
@@ -364,8 +364,8 @@
 
 /* ── Callout ─────────────────────────────────────────────── */
 .docs-callout {
-  background: rgba(0, 122, 204, 0.08);
-  border: 1px solid rgba(0, 122, 204, 0.25);
+  background: rgba(0, 113, 227, 0.08);
+  border: 1px solid rgba(0, 113, 227, 0.25);
   border-radius: 6px;
   padding: 14px 18px;
   font-size: 14px;
diff --git a/frontend/src/pages/SEOPage.css b/frontend/src/pages/SEOPage.css
index 3c585825..b333eb74 100644
--- a/frontend/src/pages/SEOPage.css
+++ b/frontend/src/pages/SEOPage.css
@@ -30,7 +30,7 @@
 }
 
 .seo-hero h1 .accent {
-  color: #007acc;
+  color: var(--color-action-primary);
 }
 
 .seo-hero .subtitle {
@@ -54,7 +54,7 @@
   align-items: center;
   gap: 6px;
   padding: 12px 26px;
-  background: #007acc;
+  background: var(--color-action-primary);
   color: #fff;
   text-decoration: none;
   font-size: 15px;
@@ -143,7 +143,7 @@
 .seo-card h3 {
   font-size: 0.88rem;
   font-weight: 600;
-  color: #007acc;
+  color: var(--color-action-primary);
   margin: 0 0 0.35rem;
   letter-spacing: -0.1px;
 }
@@ -213,7 +213,7 @@
 }
 
 .seo-internal-links a {
-  color: #007acc;
+  color: var(--color-action-primary);
   text-decoration: none;
   transition: color 0.15s;
 }
diff --git a/frontend/src/pages/Velxio2Page.css b/frontend/src/pages/Velxio2Page.css
index 2946cfd3..b94b2045 100644
--- a/frontend/src/pages/Velxio2Page.css
+++ b/frontend/src/pages/Velxio2Page.css
@@ -18,7 +18,7 @@
 }
 
 .v2-hero h1 .accent {
-  color: #007acc;
+  color: var(--color-action-primary);
 }
 
 .v2-hero .subtitle {
@@ -34,13 +34,13 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: rgba(0, 122, 204, 0.12);
+  background: rgba(0, 113, 227, 0.12);
   color: #3b9ae8;
   font-size: 0.82rem;
   font-weight: 600;
   padding: 6px 16px;
   border-radius: 9999px;
-  border: 1px solid rgba(0, 122, 204, 0.25);
+  border: 1px solid rgba(0, 113, 227, 0.25);
   margin-bottom: 1.5rem;
   letter-spacing: 0.02em;
 }
@@ -338,16 +338,16 @@
 }
 
 .v2-repo-card--primary {
-  border-color: rgba(0, 122, 204, 0.3);
-  background: rgba(0, 122, 204, 0.06);
+  border-color: rgba(0, 113, 227, 0.3);
+  background: rgba(0, 113, 227, 0.06);
 }
 
 .v2-repo-card--primary:hover {
-  border-color: #007acc;
+  border-color: var(--color-action-primary);
 }
 
 .v2-repo-card--primary h3 {
-  color: #007acc;
+  color: var(--color-action-primary);
 }
 
 /* ── Bottom community ────────────────────────────────── */