diff --git a/index.html b/index.html
index b1bbe6f..72e8c45 100644
--- a/index.html
+++ b/index.html
@@ -446,7 +446,7 @@
             right: 20px;
             width: 48px; height: 48px;
             border-radius: 50%;
-            background: var(--accent); color: #0D0D0D;
+            background: var(--accent); color: var(--bg);
             border: none; cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
@@ -521,7 +521,7 @@
         }
         .btn-danger:hover { border-color: #EF4444; background: color-mix(in srgb, #EF4444 10%, transparent); }
         .btn-primary {
-            background: var(--accent); color: #0D0D0D; font-size: 13px; font-weight: 600;
+            background: var(--accent); color: var(--bg); font-size: 13px; font-weight: 600;
             padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
             transition: opacity .12s;
         }
@@ -590,7 +590,7 @@
         /* ── Misc ── */
         .skip-link {
             position: absolute; top: -100%; left: 8px;
-            background: var(--accent); color: #0D0D0D;
+            background: var(--accent); color: var(--bg);
             padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
             z-index: 10000; text-decoration: none;
         }
@@ -612,7 +612,7 @@
         <div class="sidebar-header">
             <div class="brand">
                 <div class="brand-logo" aria-hidden="true">
-                    <i data-lucide="map" style="width:13px;height:13px;stroke-width:2;color:#0D0D0D"></i>
+                    <i data-lucide="map" style="width:13px;height:13px;stroke-width:2;color:var(--bg)"></i>
                 </div>
                 <div class="brand-text">
                     <span class="brand-name">Roadmap</span>