diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index c6d6228..ec0ea66 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,13 +1,13 @@
-@import './variables.scss';
+@use './variables.scss' as vars;
 
 // Reset and base styles
 :root {
   // Global transition for theme switching
   --theme-transition-duration: 0.3s;
   --theme-transition-timing: ease;
-  font-family: $font-family;
-  line-height: $line-height;
-  font-weight: $font-weight-normal;
+  font-family: vars.$font-family;
+  line-height: vars.$line-height;
+  font-weight: vars.$font-weight-normal;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -18,16 +18,16 @@
 // Default dark theme
 :root, .dark-mode {
   color-scheme: dark;
-  color: $text-color-dark;
-  background-color: $bg-color-dark;
+  color: vars.$text-color-dark;
+  background-color: vars.$bg-color-dark;
 
   // CSS variables for theming
-  --primary-color: #{$primary-color};
-  --primary-hover-color: #{$primary-hover-color};
-  --text-color: #{$text-color-dark};
+  --primary-color: #{vars.$primary-color};
+  --primary-hover-color: #{vars.$primary-hover-color};
+  --text-color: #{vars.$text-color-dark};
   --text-color-secondary: #bbb;
   --text-color-tertiary: #999;
-  --bg-color: #{$bg-color-dark};
+  --bg-color: #{vars.$bg-color-dark};
   --sidebar-bg: #1e1e1e;
   --sidebar-border: #333;
   --card-bg: #2a2a2a;
@@ -37,12 +37,12 @@
 }
 
 a {
-  font-weight: $font-weight-medium;
-  color: $primary-color;
+  font-weight: vars.$font-weight-medium;
+  color: vars.$primary-color;
   text-decoration: inherit;
   
   &:hover {
-    color: $primary-hover-color;
+    color: vars.$primary-hover-color;
   }
 }
 
@@ -64,19 +64,19 @@ button {
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
-  font-weight: $font-weight-medium;
+  font-weight: vars.$font-weight-medium;
   font-family: inherit;
-  background-color: $button-bg-dark;
+  background-color: vars.$button-bg-dark;
   cursor: pointer;
   transition: border-color 0.25s;
   
   &:hover {
-    border-color: $primary-color;
+    border-color: vars.$primary-color;
   }
 }
 
 #app {
-  max-width: $max-content-width;
+  max-width: vars.$max-content-width;
   margin: 0 auto;
   padding: 1rem;
 }
@@ -84,16 +84,16 @@ button {
 // Light mode theme
 .light-mode {
   color-scheme: light;
-  color: $text-color-light;
-  background-color: $bg-color-light;
+  color: vars.$text-color-light;
+  background-color: vars.$bg-color-light;
   
   // Update CSS variables for light mode
-  --primary-color: #{$primary-color};
-  --primary-hover-color: #{$primary-hover-color};
-  --text-color: #{$text-color-light};
+  --primary-color: #{vars.$primary-color};
+  --primary-hover-color: #{vars.$primary-hover-color};
+  --text-color: #{vars.$text-color-light};
   --text-color-secondary: #555;
   --text-color-tertiary: #777;
-  --bg-color: #{$bg-color-light};
+  --bg-color: #{vars.$bg-color-light};
   --sidebar-bg: #fff;
   --sidebar-border: #eee;
   --card-bg: #fff;
@@ -102,23 +102,23 @@ button {
   --primary-color-light: rgba(52, 152, 219, 0.1);
   
   button {
-    background-color: $button-bg-light;
+    background-color: vars.$button-bg-light;
   }
 }
 
 // // System preference override
 // @media (prefers-color-scheme: light) {
 //   :root:not(.dark-mode):not(.light-mode) {
-//     color: $text-color-light;
-//     background-color: $bg-color-light;
+//     color: vars.$text-color-light;
+//     background-color: vars.$bg-color-light;
     
 //     // Update CSS variables for light mode
-//     --primary-color: #{$primary-color};
-//     --primary-hover-color: #{$primary-hover-color};
-//     --text-color: #{$text-color-light};
+//     --primary-color: #{vars.$primary-color};
+//     --primary-hover-color: #{vars.$primary-hover-color};
+//     --text-color: #{vars.$text-color-light};
 //     --text-color-secondary: #555;
 //     --text-color-tertiary: #777;
-//     --bg-color: #{$bg-color-light};
+//     --bg-color: #{vars.$bg-color-light};
 //     --sidebar-bg: #fff;
 //     --sidebar-border: #eee;
 //     --card-bg: #fff;
@@ -128,7 +128,7 @@ button {
 //   }
   
 //   :root:not(.dark-mode):not(.light-mode) button {
-//     background-color: $button-bg-light;
+//     background-color: vars.$button-bg-light;
 //   }
 // }
 .breadcrumb {
diff --git a/src/components/JobDetail.vue b/src/components/JobDetail.vue
index dcb26d5..7e7f5d7 100644
--- a/src/components/JobDetail.vue
+++ b/src/components/JobDetail.vue
@@ -932,6 +932,8 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+@use 'sass:color';
+
 .job-detail-container {
   width: 100%;
   margin: 0 auto;
@@ -967,7 +969,7 @@ onMounted(() => {
       font-weight: 500;
       
       &:hover {
-        background-color: darken(#3498db, 10%);
+        background-color: color.adjust(#3498db, $lightness: -10%);
       }
     }
   }
@@ -1158,7 +1160,7 @@ onMounted(() => {
         transition: all 0.2s;
         
         &:hover {
-          background-color: var(--primary-hover-color, #2980b9);
+          background-color: color.adjust(#3498db, $lightness: -10%);
           transform: translateY(-2px);
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index db09365..644e291 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -393,6 +393,8 @@ const totalExperience = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use 'sass:color';
+
 /* Global transition properties for smoother theme switching */
 .profile-container * {
   transition: color var(--theme-transition-duration) var(--theme-transition-timing),
@@ -540,7 +542,7 @@ const totalExperience = computed(() => {
           border: none;
           
           &:hover {
-            background-color: darken(#3498db, 10%);
+            background-color: color.adjust(#3498db, $lightness: -10%);
           }
         }