diff --git a/src/components/BookNavigation.astro b/src/components/BookNavigation.astro
index 09016f5..20f073d 100644
--- a/src/components/BookNavigation.astro
+++ b/src/components/BookNavigation.astro
@@ -57,14 +57,14 @@ const { prevUrl, prevTitle, nextUrl, nextTitle } = Astro.props;
     font-size: 0.9rem;
     padding: 0.75rem 1.25rem;
     border-radius: 0.5rem;
-    background: rgba(var(--accent-base), 0.15);
-    border: 1px solid rgba(var(--accent-base), 0.3);
-    color: rgb(var(--accent-base));
+    background: rgb(from var(--accent-base) r g b / 0.15);
+    border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
+    color: var(--accent-base);
     transition: all 0.2s ease;
     user-select: none;
   }
   .toc-label:hover {
-    background: rgba(var(--accent-base), 0.25);
+    background: rgb(from var(--accent-base) r g b / 0.25);
   }
   
   .toc-dropdown {
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 36ae2a7..2fa9f4e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -68,19 +68,19 @@ import Logo from "../assets/logo.svg";
     transition: color 0.2s ease;
   }
   .links a:hover {
-    color: rgb(var(--accent-base));
+    color: var(--accent-base);
   }
   .links a[href="/portfolio"]:hover {
-    color: rgb(var(--accent-base--portfolio));
+    color: var(--accent-base--portfolio);
   }
   .links a[href="/blog"]:hover {
-    color: rgb(var(--accent-base--blog));
+    color: var(--accent-base--blog);
   }
   .links a[href="/book"]:hover {
-    color: rgb(var(--accent-base--book));
+    color: var(--accent-base--book);
   }
   .links a.active {
-    color: rgb(var(--accent-base));
+    color: var(--accent-base);
     font-weight: 600;
   }
 
diff --git a/src/components/WelcomeTypewriter.astro b/src/components/WelcomeTypewriter.astro
index 26744bd..f67d24c 100644
--- a/src/components/WelcomeTypewriter.astro
+++ b/src/components/WelcomeTypewriter.astro
@@ -23,7 +23,7 @@
         text-align: center;
         white-space: break-spaces;
         word-wrap: break-word;
-        color: rgb(var(--accent-base));
+        color: var(--accent-base);
         text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
     }
 
@@ -42,7 +42,7 @@
 
     .welcome-typewriter-nostyle {
         min-height: 1em;
-        border-right: 2px solid rgb(var(--accent-base));
+        border-right: 2px solid var(--accent-base);
         margin: 0 auto;
         display: block;
         overflow-x: hidden;
@@ -70,7 +70,7 @@
         display: inline-block;
         height: 1em;
         width: 0px;
-        border-right: 2px solid rgb(var(--accent-base));
+        border-right: 2px solid var(--accent-base);
         animation: blink-caret 1s step-end infinite;
     }
 
@@ -79,7 +79,7 @@
     }
 
     @keyframes blink-caret {
-        from, to { border-color: rgb(var(--accent-base)) }
+        from, to { border-color: var(--accent-base); }
         50% { border-color: transparent; }
     }
 
diff --git a/src/pages/book/[...slug].astro b/src/pages/book/[...slug].astro
index b650876..a770b11 100644
--- a/src/pages/book/[...slug].astro
+++ b/src/pages/book/[...slug].astro
@@ -102,12 +102,12 @@ const chapters = allPages.reduce((acc, p) => {
     text-decoration: none;
   }
   .mini-chapter a:hover {
-    background: rgba(var(--accent-base), 0.1);
-    color: rgb(var(--accent-base));
+    background: rgb(from var(--accent-base) r g b / 0.1);
+    color: var(--accent-base);
   }
   .mini-chapter a.active {
-    background: rgba(var(--accent-base), 0.2);
-    color: rgb(var(--accent-base));
+    background: rgb(from var(--accent-base) r g b / 0.2);
+    color: var(--accent-base);
     font-weight: 600;
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 444178d..5ed45c7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -91,7 +91,7 @@ import socials from "../data/socials.json";
   }
 
   .social-link {
-    color: rgb(var(--accent-base));
+    color: var(--accent-base);
     font-size: 2rem;
     height: 2rem;
     line-height: 1;
@@ -101,7 +101,7 @@ import socials from "../data/socials.json";
   }
 
   .social-link:hover svg {
-    filter: drop-shadow(0px 0px 5px rgba(var(--accent-base), 0.4));
+    filter: drop-shadow(0px 0px 5px rgb(from var(--accent-base) r g b / 0.4));
   }
 
   .subtitle {
@@ -192,43 +192,43 @@ import socials from "../data/socials.json";
   .portfolio {
     background: linear-gradient(
       135deg,
-      rgba(var(--accent-base--portfolio), 0.5) 0%,
-      rgba(var(--accent-base--portfolio), 0.15) 100%
+      rgb(from var(--accent-base--portfolio) r g b / 0.5) 0%,
+      rgb(from var(--accent-base--portfolio) r g b / 0.15) 100%
     );
   }
   .blog {
     background: linear-gradient(
       135deg,
-      rgba(var(--accent-base--blog), 0.8) 0%,
-      rgba(var(--accent-base--blog), 0.15) 100%
+      rgb(from var(--accent-base--blog) r g b / 0.8) 0%,
+      rgb(from var(--accent-base--blog) r g b / 0.15) 100%
     );
   }
   .book {
     background: linear-gradient(
       135deg,
-      rgba(var(--accent-base--book), 0.8) 0%,
-      rgba(var(--accent-base--book), 0.15) 100%
+      rgb(from var(--accent-base--book) r g b / 0.8) 0%,
+      rgb(from var(--accent-base--book) r g b / 0.15) 100%
     );
   }
 
   .portfolio:hover {
-    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1);
+    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--portfolio) r g b / 1);
   }
   .blog:hover {
-    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4);
+    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--blog) r g b / 0.4);
   }
   .book:hover {
-    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4);
+    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--book) r g b / 0.4);
   }
 
   .portfolio .icon {
-    color: rgb(var(--accent-base--portfolio));
+    color: rgb(--accent-base--portfolio);
   }
   .blog .icon {
-    color: rgb(var(--accent-base--blog));
+    color: rgb(--accent-base--blog);
   }
   .book .icon {
-    color: rgb(var(--accent-base--book));
+    color: rgb(--accent-base--book);
   }
 
   @keyframes fadeUp {
diff --git a/src/pages/portfolio/[...slug].astro b/src/pages/portfolio/[...slug].astro
index 38e1b6a..811e76a 100644
--- a/src/pages/portfolio/[...slug].astro
+++ b/src/pages/portfolio/[...slug].astro
@@ -57,7 +57,7 @@ const { Content } = await render(entry);
   }
   .tag {
     font-size: 0.8rem;
-    background: rgba(var(--accent-base), 0.2);
+    background: rgb(from var(--accent-base) r g b / 0.2);
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
   }
@@ -77,7 +77,7 @@ const { Content } = await render(entry);
   .meta-repository {
     flex-shrink: 1;
     font-size: 1.2rem;
-    color: rgb(var(--accent-base));
+    color: var(--accent-base);
   }
   .meta-repository a {
     display: flex;
diff --git a/src/pages/portfolio/index.astro b/src/pages/portfolio/index.astro
index f2c717e..59ee54f 100644
--- a/src/pages/portfolio/index.astro
+++ b/src/pages/portfolio/index.astro
@@ -70,7 +70,7 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
   }
   .tag {
     font-size: 0.8rem;
-    background: rgba(var(--accent-base), 0.2);
+    background: rgb(from var(--accent-base) r g b / 0.2);
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
   }
@@ -79,6 +79,6 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
     font-size: 1.2rem;
     display: flex;
     align-items: center;
-    color: rgb(var(--accent-base));
+    color: var(--accent-base);
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 9c212fb..00ebe12 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -18,7 +18,7 @@
 @property --accent-base {
   syntax: '<color>';
   inherits: true;
-  initial-value: 214, 134, 249;
+  initial-value: rgb(214, 134, 249);
 }
 
 @property --bg-image {
@@ -51,12 +51,6 @@
   initial-value: 16px;
 }
 
-@property --glass-shadow {
-  syntax: '<shadow>';
-  inherits: true;
-  initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-}
-
 @property --text-main {
   syntax: '<color>';
   inherits: true;
@@ -78,25 +72,25 @@
 @property --accent-base--default {
   syntax: '<color>';
   inherits: true;
-  initial-value: 214, 134, 249;
+  initial-value: rgb(214, 134, 249);
 }
 
 @property --accent-base--portfolio {
   syntax: '<color>';
   inherits: true;
-  initial-value: 255, 181, 102;
+  initial-value: rgb(255, 181, 102);
 }
 
 @property --accent-base--blog {
   syntax: '<color>';
   inherits: true;
-  initial-value: 111, 221, 246;
+  initial-value: rgb(111, 221, 246);
 }
 
 @property --accent-base--book {
   syntax: '<color>';
   inherits: true;
-  initial-value: 247, 110, 138;
+  initial-value: rgb(247, 110, 138);
 }
 
 :root {
@@ -110,10 +104,10 @@
   --glass-blur: 16px;
   --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 
-  --accent-base--default: 214, 134, 249;
-  --accent-base--portfolio: 255, 181, 102;
-  --accent-base--blog: 111, 221, 246;
-  --accent-base--book: 247, 110, 138;
+  --accent-base--default: rgb(214, 134, 249);
+  --accent-base--portfolio: rgb(255, 181, 102);
+  --accent-base--blog: rgb(111, 221, 246);
+  --accent-base--book: rgb(247, 110, 138);
   --accent-base: var(--accent-base--default);
 }
 
@@ -171,7 +165,7 @@ body {
   padding: 0;
   line-height: 1.6;
   min-height: 100vh;
-  background-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
+  background-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
   background-size: cover, auto;
   background-position: center;
   background-attachment: fixed;
@@ -180,7 +174,7 @@ body {
 
 @media (prefers-reduced-motion: reduce) {
   body {
-    background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
+    background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
   }
 }
 
@@ -190,7 +184,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: rgb(var(--accent-base));
+  color: var(--accent-base);
   font-weight: 600;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -203,7 +197,7 @@ a {
 }
 
 a:hover {
-  text-shadow: 0 0 8px rgba(var(--accent-base), 0.6);
+  text-shadow: 0 0 8px rgba(from var(--accent-base) r g b / 0.6);
 }
 
 .glass-container {
@@ -218,8 +212,8 @@ a:hover {
 }
 
 .glass-container:hover {
-  border-color: rgba(var(--accent-base), 0.3);
-  box-shadow: 0 8px 32px 0 rgba(var(--accent-base), 0.1);
+  border-color: rgba(from var(--accent-base) r g b / 0.3);
+  box-shadow: 0 8px 32px 0 rgba(from var(--accent-base) r g b / 0.1);
 }
 
 .container {
@@ -231,7 +225,7 @@ a:hover {
 /* Typography styles for markdown content */
 .prose code {
   font-family: var(--font-cascadia-code);
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(from var(--accent-base) r g b / 0.1);
   padding: 0.2em 0.4em;
   border-radius: 0.25rem;
   font-size: 0.9em;