diff --git a/static/css/01-foundation/_reset.css b/static/css/01-foundation/_reset.css
index 8dc7921..3fc9950 100644
--- a/static/css/01-foundation/_reset.css
+++ b/static/css/01-foundation/_reset.css
@@ -11,7 +11,7 @@
 
 /* Body base */
 body {
-  background-color: var(--page-bg);
+  background-color: var(--page-bg, #d6d6d6);
 
   /* OLD PATTERN - Keep for reference (can be restored anytime) */
   /* background-image:
@@ -22,7 +22,7 @@ body {
   background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
 
   /* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
-  background-image: var(--page-bg-pattern);
+  background-image: var(--page-bg-pattern, none);
   background-size: 40px 40px; /* For dark theme diagonal grid */
   background-attachment: fixed;
   max-width: 100vw; /* Prevent horizontal overflow */
diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css
index ca893f7..ee8d608 100644
--- a/static/css/01-foundation/_themes.css
+++ b/static/css/01-foundation/_themes.css
@@ -186,7 +186,7 @@
   left: 2rem;
   width: 50px;
   height: 50px;
-  background: var(--black-bar);
+  background: var(--black-bar, #2b2b2b);
   color: white;
   border: none;
   border-radius: 50%;
@@ -348,6 +348,6 @@
 @media (prefers-color-scheme: light) {
   [data-color-theme="auto"] img[src*="livgolf"] {
     filter: none;
-    border-color: var(--icon-border) !important; /* Reset to normal border */
+    border-color: var(--icon-border, #ddd) !important; /* Reset to normal border */
   }
 }
diff --git a/static/css/01-foundation/_typography.css b/static/css/01-foundation/_typography.css
index 8c9da22..84bf283 100644
--- a/static/css/01-foundation/_typography.css
+++ b/static/css/01-foundation/_typography.css
@@ -7,7 +7,7 @@
 /* Base Typography */
 body {
   font-family: 'Quicksand', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #333333);
   line-height: 1.5;
   font-size: 16px;
   font-weight: 400;
@@ -18,7 +18,7 @@ body {
 
 /* Links */
 a {
-  color: var(--accent-blue);
+  color: var(--accent-blue, #0066cc);
   text-decoration: none;
 
   &:hover {
diff --git a/static/css/02-layout/_container.css b/static/css/02-layout/_container.css
index d9a8e7a..166b518 100644
--- a/static/css/02-layout/_container.css
+++ b/static/css/02-layout/_container.css
@@ -22,7 +22,7 @@
     transition: all 0.3s ease-in-out;
 
     .cv-page {
-      box-shadow: var(--shadow-lg);
+      box-shadow: var(--shadow-lg, 2px 2px 9px rgba(0,0,0,0.5));
       border: none;
       margin: 0 auto;
       max-width: 900px;
diff --git a/static/css/02-layout/_grid.css b/static/css/02-layout/_grid.css
index 8026fc6..a537da4 100644
--- a/static/css/02-layout/_grid.css
+++ b/static/css/02-layout/_grid.css
@@ -33,6 +33,6 @@
 
 /* Main Content Area */
 .cv-main {
-  background: var(--paper-bg);
+  background: var(--paper-bg, #ffffff);
   padding: 3rem 2.5rem 8rem 2.5rem; /* Bottom padding for footer and zoom control clearance */
 }
diff --git a/static/css/02-layout/_page.css b/static/css/02-layout/_page.css
index ca5ad7e..4e7e90a 100644
--- a/static/css/02-layout/_page.css
+++ b/static/css/02-layout/_page.css
@@ -1,8 +1,8 @@
 .cv-page {
-    background: var(--paper-bg);
+    background: var(--paper-bg, #ffffff);
     max-width: 1200px;
     margin: 2rem auto;
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-lg, 2px 2px 9px rgba(0,0,0,0.5));
     border: none;
     transform: scale(0.95);
     transform-origin: top center;
diff --git a/static/css/03-components/_action-bar.css b/static/css/03-components/_action-bar.css
index e86e088..b445363 100644
--- a/static/css/03-components/_action-bar.css
+++ b/static/css/03-components/_action-bar.css
@@ -1,11 +1,11 @@
 /* Single Black Top Bar */
 .action-bar {
-    background: var(--action-bar-bg);
-    color: var(--action-bar-text);
+    background: var(--action-bar-bg, #2b2b2b);
+    color: var(--action-bar-text, #ffffff);
     position: sticky;
     top: 0;
     z-index: 100;
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15));
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     overflow: visible; /* Allow tooltips to extend beyond action bar */
 }
diff --git a/static/css/03-components/_courses.css b/static/css/03-components/_courses.css
index f708f15..b045eb1 100644
--- a/static/css/03-components/_courses.css
+++ b/static/css/03-components/_courses.css
@@ -24,7 +24,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -36,9 +36,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 10px;
 }
 
@@ -55,7 +55,7 @@
     font-weight: 600;
     margin: 0 0 0.3rem 0;
     line-height: 1.4;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 .course-title-text {
@@ -72,17 +72,17 @@
 .course-separator,
 .course-location,
 .course-duration {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-size: 0.9em;
 }
 
 .course-separator {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
 }
 
 .course-desc {
     font-size: 0.85em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin-top: 0.4rem;
     line-height: 1.4;
     text-align: justify;
@@ -97,7 +97,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent !important;
     padding: 8px;
 }
diff --git a/static/css/03-components/_cv-header.css b/static/css/03-components/_cv-header.css
index 2ca9f13..043c82b 100644
--- a/static/css/03-components/_cv-header.css
+++ b/static/css/03-components/_cv-header.css
@@ -44,7 +44,7 @@
     /* font-style: italic; */
     line-height: 1.1;
     margin-bottom: 8px;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
     text-align: right;
 }
 
@@ -53,7 +53,7 @@
     font-size: 0.9em;
     font-weight: 500;
     line-height: 1.5;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
     margin: 0;
 }
 
@@ -61,7 +61,7 @@
     font-family: 'Quicksand', sans-serif;
     font-size: 1.25em;
     font-weight: 400;
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     margin: 4px 0 0 0;
     line-height: 1.4;
     text-align: right;
@@ -72,7 +72,7 @@
     font-family: 'Quicksand', sans-serif;
     font-size: 1.0em;
     line-height: 1.6;
-    color: var(--text-secondary);
+    color: var(--text-secondary, #333333);
     margin-top: 20px;
     text-align: justify;
     font-style: italic;
diff --git a/static/css/03-components/_cv-section.css b/static/css/03-components/_cv-section.css
index 525a68b..aaa3bad 100644
--- a/static/css/03-components/_cv-section.css
+++ b/static/css/03-components/_cv-section.css
@@ -16,7 +16,7 @@
     line-height: 1.2em;
     margin: 20px 0 25px 0;
     padding: 0;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
 }
 
 /* Collapsible Section Styles */
@@ -63,7 +63,7 @@
 .cv-section summary .section-title::after {
     content: '▼';
     font-size: 0.8em;
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     transition: transform 0.2s ease, opacity 0.2s ease;
     opacity: 0;
     margin-left: 0.5rem;
@@ -82,7 +82,7 @@
 
 /* Hover effect on summary */
 .cv-section summary:hover .section-title {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
 }
 
 .summary-text {
@@ -91,7 +91,7 @@
     text-align: justify;
     font-size: 0.9em;
     font-weight: 400;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
 }
 
 /* Experience */
@@ -109,7 +109,7 @@
     font-size: 1rem;
     font-weight: 500;
     margin: 0;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 4px;
 }
 
@@ -184,7 +184,7 @@
 .experience-separator,
 .experience-location,
 .experience-duration {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-weight: 600;
     display: inline-block;
     font-size: 1.05rem;
@@ -195,14 +195,14 @@
 }
 
 .short-desc {
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.95rem;
     line-height: 1.6;
     margin-top: 0.5rem;
 }
 
 .duration-text {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     font-weight: 500;
 }
 
@@ -217,7 +217,7 @@
     margin-bottom: 0.4rem;
     position: relative;
     font-size: 0.95rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     line-height: 1.5;
 }
 
@@ -225,7 +225,7 @@
     content: "•";
     position: absolute;
     left: 0;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 /* Responsibilities with company icons (similar to main experience layout) */
@@ -249,7 +249,7 @@
     height: 60px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -261,9 +261,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 8px;
 }
 
@@ -288,7 +288,7 @@
     margin-bottom: 1rem;
     font-size: 0.95rem;
     line-height: 1.6;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 
@@ -301,7 +301,7 @@
 
 .language-item {
     font-size: 0.95rem!important;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 0.3rem!important;
     line-height: 1.4!important;
     margin-left: 2rem!important;
diff --git a/static/css/03-components/_education.css b/static/css/03-components/_education.css
index 8e60959..65a38ce 100644
--- a/static/css/03-components/_education.css
+++ b/static/css/03-components/_education.css
@@ -3,7 +3,7 @@
     margin-bottom: 1rem;
     font-size: 0.95rem;
     line-height: 1.6;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 
@@ -16,7 +16,7 @@
 
 .language-item {
     font-size: 0.95rem!important;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 0.3rem!important;
     line-height: 1.4!important;
     margin-left: 2rem!important;
diff --git a/static/css/03-components/_experience.css b/static/css/03-components/_experience.css
index 1d89f5c..230bf18 100644
--- a/static/css/03-components/_experience.css
+++ b/static/css/03-components/_experience.css
@@ -13,7 +13,7 @@
     font-size: 1rem;
     font-weight: 500;
     margin: 0;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 4px;
 }
 
@@ -88,7 +88,7 @@
 .experience-separator,
 .experience-location,
 .experience-duration {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-weight: 600;
     display: inline-block;
     font-size: 1.05rem;
@@ -99,14 +99,14 @@
 }
 
 .short-desc {
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.95rem;
     line-height: 1.6;
     margin-top: 0.5rem;
 }
 
 .duration-text {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     font-weight: 500;
 }
 
@@ -121,7 +121,7 @@
     margin-bottom: 0.4rem;
     position: relative;
     font-size: 0.95rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     line-height: 1.5;
 }
 
@@ -129,7 +129,7 @@
     content: "•";
     position: absolute;
     left: 0;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 /* Responsibilities with company icons (similar to main experience layout) */
@@ -153,7 +153,7 @@
     height: 60px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -165,9 +165,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 8px;
 }
 
@@ -176,7 +176,7 @@
     margin-bottom: 1rem;
     font-size: 0.95rem;
     line-height: 1.6;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 
@@ -189,7 +189,7 @@
 
 .language-item {
     font-size: 0.95rem!important;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 0.3rem!important;
     line-height: 1.4!important;
     margin-left: 2rem!important;
@@ -206,7 +206,7 @@
 .experience-item {
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid var(--item-separator);
+    border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
 }
 
 /* Keep border on all experience items including last one */
@@ -218,7 +218,7 @@
     align-items: flex-start;
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid var(--item-separator);
+    border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
 }
 
 /* Keep border on all course items including last one */
@@ -237,7 +237,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -249,9 +249,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 10px;
 }
 
@@ -268,7 +268,7 @@
     font-weight: 600;
     margin: 0 0 0.3rem 0;
     line-height: 1.4;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 .course-title-text {
@@ -285,17 +285,17 @@
 .course-separator,
 .course-location,
 .course-duration {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-size: 0.9em;
 }
 
 .course-separator {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
 }
 
 .course-desc {
     font-size: 0.85em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin-top: 0.4rem;
     line-height: 1.4;
     text-align: justify;
@@ -308,7 +308,7 @@
     align-items: flex-start;
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid var(--item-separator);
+    border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
 }
 
 .project-icon {
@@ -325,7 +325,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -337,9 +337,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 10px;
 }
 
@@ -356,7 +356,7 @@
     font-weight: 600;
     margin: 0 0 0.3rem 0;
     line-height: 1.4;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 .project-title-text {
@@ -364,7 +364,7 @@
 }
 
 .project-title-text a {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
@@ -375,18 +375,18 @@
 .project-period,
 .project-separator,
 .project-location {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-size: 0.9em;
     font-weight: 600;
 }
 
 .project-separator {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
 }
 
 .project-desc {
     font-size: 0.95rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-top: 0.5rem;
     line-height: 1.6;
     text-align: justify;
@@ -394,7 +394,7 @@
 
 .project-technologies {
     font-size: 0.85em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin-top: 0.5rem;
     line-height: 1.4;
 }
@@ -404,7 +404,7 @@
     padding-top: 0rem;
     text-align: center;
     font-size: 0.95rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 .projects-footer p {
@@ -412,7 +412,7 @@
 }
 
 .projects-footer a {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
@@ -430,7 +430,7 @@
 
 .reference-item a {
 
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
     word-break: break-word;
 }
@@ -442,7 +442,7 @@
 .ref-type {
     display: block;
     font-size: 0.8em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     font-style: italic;
     margin-top: 0.2rem;
 }
@@ -451,18 +451,18 @@
 footer {
     text-align: center;
     padding: 2rem;
-    color: var(--text-muted); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
+    color: var(--text-muted, #666666); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
     font-size: 0.85rem;
 }
 
 /* GitHub repository link styling */
 .github-repo-link {
-    color: var(--text-secondary) !important; /* Theme-aware link color */
+    color: var(--text-secondary, #333333) !important; /* Theme-aware link color */
     transition: color 0.2s ease-in-out;
 }
 
 .github-repo-link:hover {
-    color: var(--accent-blue) !important;
+    color: var(--accent-blue, #0066cc) !important;
 }
 
 
diff --git a/static/css/03-components/_languages.css b/static/css/03-components/_languages.css
index c2336cd..d76f70b 100644
--- a/static/css/03-components/_languages.css
+++ b/static/css/03-components/_languages.css
@@ -7,7 +7,7 @@
 
 .language-item {
     font-size: 0.95rem!important;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-bottom: 0.3rem!important;
     line-height: 1.4!important;
     margin-left: 2rem!important;
diff --git a/static/css/03-components/_projects.css b/static/css/03-components/_projects.css
index 6ddac43..effde16 100644
--- a/static/css/03-components/_projects.css
+++ b/static/css/03-components/_projects.css
@@ -22,7 +22,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 4px;
 }
@@ -34,9 +34,9 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
-    color: var(--text-light);
+    color: var(--text-light, #999999);
     padding: 10px;
 }
 
@@ -53,7 +53,7 @@
     font-weight: 600;
     margin: 0 0 0.3rem 0;
     line-height: 1.4;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
 }
 
 .project-title-text {
@@ -61,7 +61,7 @@
 }
 
 .project-title-text a {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
@@ -72,18 +72,18 @@
 .project-period,
 .project-separator,
 .project-location {
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     font-size: 0.9em;
     font-weight: 600;
 }
 
 .project-separator {
-    color: var(--text-light);
+    color: var(--text-light, #999999);
 }
 
 .project-desc {
     font-size: 0.95rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin-top: 0.5rem;
     line-height: 1.6;
     text-align: justify;
@@ -91,7 +91,7 @@
 
 .project-technologies {
     font-size: 0.85em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin-top: 0.5rem;
     line-height: 1.4;
 }
@@ -101,7 +101,7 @@
     padding-top: 0rem;
     text-align: center;
     font-size: 0.95rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 .projects-footer p {
@@ -109,7 +109,7 @@
 }
 
 .projects-footer a {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
@@ -127,7 +127,7 @@
 
 .reference-item a {
 
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
     word-break: break-word;
 }
@@ -139,7 +139,7 @@
 .ref-type {
     display: block;
     font-size: 0.8em;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     font-style: italic;
     margin-top: 0.2rem;
 }
@@ -236,7 +236,7 @@ footer {
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent !important;
     padding: 8px;
 }
diff --git a/static/css/03-components/_sidebar.css b/static/css/03-components/_sidebar.css
index 010038b..76aaa44 100644
--- a/static/css/03-components/_sidebar.css
+++ b/static/css/03-components/_sidebar.css
@@ -4,7 +4,7 @@
 
 /* Sidebar - Left/Right columns */
 .cv-sidebar {
-  background: var(--sidebar-bg);
+  background: var(--sidebar-bg, #d1d4d2);
   padding: 4rem 1.5rem;
   font-size: 0.9rem;
 }
@@ -68,7 +68,7 @@
     }
 
     &:hover .sidebar-title {
-      color: var(--accent-blue);
+      color: var(--accent-blue, #0066cc);
     }
 
     &:hover::after,
@@ -85,7 +85,7 @@
   line-height: 1.3em;
   margin-bottom: 10px;
   padding: 0;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1a1a);
   text-align: left;
 }
 
@@ -94,12 +94,12 @@
   font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1a1a);
 }
 
 .skill-item {
   margin-bottom: 0.15rem;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1a1a);
   font-weight: 400;
 }
 
@@ -108,7 +108,7 @@
   .sidebar-section summary::after {
     content: '▶';
     font-size: 0.8em;
-    color: var(--text-muted);
+    color: var(--text-muted, #666666);
     transition: transform 0.2s ease, opacity 0.2s ease;
     opacity: 0;
     margin-left: 15px;
@@ -139,7 +139,7 @@
     &::after {
       content: '▶';
       font-size: 0.8em;
-      color: var(--text-muted);
+      color: var(--text-muted, #666666);
       transition: transform 0.2s ease, opacity 0.2s ease;
       opacity: 0;
       margin-right: 15px;
diff --git a/static/css/04-interactive/_buttons.css b/static/css/04-interactive/_buttons.css
index 4044b8e..b3f6875 100644
--- a/static/css/04-interactive/_buttons.css
+++ b/static/css/04-interactive/_buttons.css
@@ -11,7 +11,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar); /* Dark by default like other buttons */
+    background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
     color: white;
     border: none;
     border-radius: 50%;
@@ -45,7 +45,7 @@
     left: 2rem; /* LEFT SIDE instead of right */
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
+    background: var(--black-bar, #2b2b2b);
     color: white;
     border: none;
     border-radius: 50%;
@@ -82,7 +82,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar); /* Dark background by default */
+    background: var(--black-bar, #2b2b2b); /* Dark background by default */
     color: white; /* White icon by default */
     border: none;
     border-radius: 50%;
@@ -131,7 +131,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
+    background: var(--black-bar, #2b2b2b);
     color: white;
     border: none;
     border-radius: 50%;
@@ -146,7 +146,7 @@
 }
 
 .download-btn {
-    background: var(--black-bar); /* Gray by default like other buttons */
+    background: var(--black-bar, #2b2b2b); /* Gray by default like other buttons */
     opacity: 0.6; /* Match other buttons */
 }
 
diff --git a/static/css/04-interactive/_contact-form.css b/static/css/04-interactive/_contact-form.css
index 2353096..4fcbfc4 100644
--- a/static/css/04-interactive/_contact-form.css
+++ b/static/css/04-interactive/_contact-form.css
@@ -263,7 +263,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
+    background: var(--black-bar, #2b2b2b);
     color: white;
     border: none;
     border-radius: 50%;
diff --git a/static/css/04-interactive/_hamburger.css b/static/css/04-interactive/_hamburger.css
index 3a4daa3..68da932 100644
--- a/static/css/04-interactive/_hamburger.css
+++ b/static/css/04-interactive/_hamburger.css
@@ -62,7 +62,7 @@
     align-items: center;
     gap: 1rem;
     padding: 0.875rem 1.5rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     text-decoration: none;
     transition: background-color 0.2s ease, color 0.2s ease;
     font-size: 0.95rem;
@@ -72,19 +72,19 @@
 
 .menu-item:hover {
     background-color: rgba(0, 102, 204, 0.08);
-    color: var(--accent-blue);
-    border-left-color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
+    border-left-color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
 .menu-item iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
     transition: color 0.2s ease;
 }
 
 .menu-item:hover iconify-icon {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
 }
 
 /* Menu item action controls (Expand All, Collapse All) */
@@ -195,7 +195,7 @@
     align-items: center;
     gap: 1rem;
     padding: 0.875rem 0 0.875rem 0;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.85rem;
     font-weight: 700;
     text-transform: uppercase;
@@ -206,17 +206,17 @@
 /* Disable hover effect for headers */
 .menu-item-header:hover {
     background-color: transparent !important;
-    color: var(--text-dark) !important;
+    color: var(--text-dark, #1a1a1a) !important;
     border-left-color: transparent !important;
 }
 
 .menu-item-header iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
 }
 
 .menu-item-header:hover iconify-icon {
-    color: var(--text-gray) !important;
+    color: var(--text-gray, #333333) !important;
 }
 
 .menu-item-header span {
@@ -234,13 +234,13 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.9rem;
     font-weight: 500;
 }
 
 .menu-control-label iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 .menu-action-btn {
@@ -253,7 +253,7 @@
     background: rgba(0, 0, 0, 0.03);
     border: none;
     border-radius: 8px;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
@@ -264,18 +264,18 @@
 
 .menu-action-btn:hover {
     background: rgba(0, 102, 204, 0.08);
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
 .menu-action-btn iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
     transition: color 0.2s ease;
 }
 
 .menu-action-btn:hover iconify-icon {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
 }
 
 /* PDF button in menu - White bg with red icon on hover */
@@ -384,7 +384,7 @@ html {
     right: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
+    background: var(--black-bar, #2b2b2b);
     color: white;
     border: none;
     border-radius: 50%;
diff --git a/static/css/04-interactive/_modals.css b/static/css/04-interactive/_modals.css
index 2b0c413..a1d7254 100644
--- a/static/css/04-interactive/_modals.css
+++ b/static/css/04-interactive/_modals.css
@@ -78,7 +78,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
     transition: all 0.2s ease;
     z-index: 10;
 }
@@ -96,7 +96,7 @@
 .info-modal-header h2 {
     font-size: 1.5rem;
     font-weight: 600;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
     margin: 0 0 1.5rem 0;
 }
 
@@ -511,7 +511,7 @@
 .shortcut-desc {
     flex: 1;
     font-size: 0.95rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     line-height: 1.4;
 }
 
@@ -573,7 +573,7 @@
 /* Modal Subtitle */
 .pdf-modal-subtitle {
     font-size: 0.95rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin-top: 0.5rem;
     font-weight: 400;
 }
@@ -744,13 +744,13 @@
 .pdf-option-info h3 {
     font-size: 1.1rem;
     font-weight: 600;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     margin: 0 0 4px 0;
 }
 
 .pdf-option-info p {
     font-size: 0.875rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin: 0;
     line-height: 1.4;
 }
@@ -1106,13 +1106,13 @@
 .pdf-loading-title {
     font-size: 1.25rem;
     font-weight: 600;
-    color: var(--text-primary);
+    color: var(--text-primary, #1a1a1a);
     margin: 0 0 0.5rem 0;
 }
 
 .pdf-loading-message {
     font-size: 0.95rem;
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     margin: 0 0 0.5rem 0;
     line-height: 1.5;
 }
diff --git a/static/css/04-interactive/_navigation.css b/static/css/04-interactive/_navigation.css
index 5164e92..7646707 100644
--- a/static/css/04-interactive/_navigation.css
+++ b/static/css/04-interactive/_navigation.css
@@ -62,7 +62,7 @@
     align-items: center;
     gap: 1rem;
     padding: 0.875rem 1.5rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     text-decoration: none;
     transition: background-color 0.2s ease, color 0.2s ease;
     font-size: 0.95rem;
@@ -72,19 +72,19 @@
 
 .menu-item:hover {
     background-color: rgba(0, 102, 204, 0.08);
-    color: var(--accent-blue);
-    border-left-color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
+    border-left-color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
 .menu-item iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
     transition: color 0.2s ease;
 }
 
 .menu-item:hover iconify-icon {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
 }
 
 /* Menu item action controls (Expand All, Collapse All) */
@@ -195,7 +195,7 @@
     align-items: center;
     gap: 1rem;
     padding: 0.875rem 0 0.875rem 0;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.85rem;
     font-weight: 700;
     text-transform: uppercase;
@@ -206,17 +206,17 @@
 /* Disable hover effect for headers */
 .menu-item-header:hover {
     background-color: transparent !important;
-    color: var(--text-dark) !important;
+    color: var(--text-dark, #1a1a1a) !important;
     border-left-color: transparent !important;
 }
 
 .menu-item-header iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
 }
 
 .menu-item-header:hover iconify-icon {
-    color: var(--text-gray) !important;
+    color: var(--text-gray, #333333) !important;
 }
 
 .menu-item-header span {
@@ -234,13 +234,13 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     font-size: 0.9rem;
     font-weight: 500;
 }
 
 .menu-control-label iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
 }
 
 .menu-action-btn {
@@ -253,7 +253,7 @@
     background: rgba(0, 0, 0, 0.03);
     border: none;
     border-radius: 8px;
-    color: var(--text-dark);
+    color: var(--text-dark, #1a1a1a);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
@@ -264,18 +264,18 @@
 
 .menu-action-btn:hover {
     background: rgba(0, 102, 204, 0.08);
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
     text-decoration: none;
 }
 
 .menu-action-btn iconify-icon {
-    color: var(--text-gray);
+    color: var(--text-gray, #333333);
     flex-shrink: 0;
     transition: color 0.2s ease;
 }
 
 .menu-action-btn:hover iconify-icon {
-    color: var(--accent-blue);
+    color: var(--accent-blue, #0066cc);
 }
 
 /* PDF button in menu - White bg with red icon on hover */
diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css
index 9aa641a..03ea11a 100644
--- a/static/css/04-interactive/_scroll-behavior.css
+++ b/static/css/04-interactive/_scroll-behavior.css
@@ -27,7 +27,7 @@
     right: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
+    background: var(--black-bar, #2b2b2b);
     color: white;
     border: none;
     border-radius: 50%;
@@ -78,7 +78,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar); /* Dark by default like other buttons */
+    background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
     color: white;
     border: none;
     border-radius: 50%;
diff --git a/static/css/04-interactive/_toggles.css b/static/css/04-interactive/_toggles.css
index 8ff79c4..a6567fa 100644
--- a/static/css/04-interactive/_toggles.css
+++ b/static/css/04-interactive/_toggles.css
@@ -47,7 +47,7 @@
 }
 
 .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
-    background-color: var(--accent-blue);
+    background-color: var(--accent-blue, #0066cc);
 }
 
 .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
@@ -113,7 +113,7 @@
 .award-item {
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 2px solid var(--icon-border);
+    border-bottom: 2px solid var(--icon-border, #ddd);
     page-break-inside: avoid;
     display: flex;
     gap: 1.2rem;
@@ -149,7 +149,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 10px;
 }
@@ -164,7 +164,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     color: #999;
     padding: 10px;