diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
index 9da1a79..ad6d073 100644
--- a/src/app/experience/page.tsx
+++ b/src/app/experience/page.tsx
@@ -68,7 +68,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(delay + index, 4)} card-hover`}
             >
               <Card>
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-start gap-3">
@@ -95,7 +95,7 @@ export default function ExperiencePage() {
                     </div>
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <ul className="space-y-3">
                     {exp.description.map((item, itemIndex) => (
                       <li key={itemIndex} className="flex items-start gap-3">
@@ -161,10 +161,10 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <CardTitle className="text-lg">{category}</CardTitle>
                 </CardHeader>
-                <CardContent className="card-content-stretch pt-0">
+                <CardContent className="card-content-stretch">
                   <div className="flex flex-wrap gap-2">
                     {skills.map((skill) => (
                       <Badge
@@ -193,7 +193,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start justify-between">
                     <div className="min-w-0">
                       <CardTitle className="break-words text-lg leading-tight">
@@ -206,7 +206,7 @@ export default function ExperiencePage() {
                     <Award className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <p className="text-muted-foreground">{conf.presentation}</p>
                 </CardContent>
               </Card>
@@ -225,7 +225,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start gap-3">
                     <Award className="mt-1 h-5 w-5 flex-shrink-0 text-primary" />
                     <div className="min-w-0">
@@ -241,7 +241,7 @@ export default function ExperiencePage() {
                   </div>
                 </CardHeader>
                 {award.description && (
-                  <CardContent className="card-content-stretch pt-0">
+                  <CardContent className="card-content-stretch">
                     <p className="break-words text-sm leading-relaxed text-muted-foreground">
                       {award.description}
                     </p>
@@ -258,7 +258,7 @@ export default function ExperiencePage() {
         <h2 className="text-2xl font-bold">Relevant Coursework</h2>
         <div className="animate-fade-in-up-delay-1">
           <Card>
-            <CardContent className="pt-6">
+            <CardContent>
               <ul className="space-y-3">
                 {relevantCoursework.map((course, index) => (
                   <li key={index} className="flex items-start gap-3">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c27d08..6f81d22 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -106,7 +106,7 @@ export default function HomePage() {
           {educationList.map((edu, index) => (
             <div key={index} className={`animate-fade-in-up-delay-${index + 1}`}>
               <Card className="card-hover">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center justify-between">
                     <div>
                       <CardTitle className="mb-1">{edu.institution}</CardTitle>
@@ -115,7 +115,7 @@ export default function HomePage() {
                     <School className="h-5 w-5 text-muted-foreground" />
                   </div>
                 </CardHeader>
-                <CardContent className="space-y-3 pt-0">
+                <CardContent className="space-y-3">
                   <div>
                     <p className="font-medium">{edu.degree}</p>
                     <p className="text-sm text-muted-foreground">
@@ -154,7 +154,7 @@ export default function HomePage() {
               className={`animate-fade-in-up-delay-${index + 1}`}
             >
               <Card className="card-hover">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center justify-between">
                     <div>
                       <CardTitle className="mb-1">{exp.title}</CardTitle>
@@ -166,7 +166,7 @@ export default function HomePage() {
                     <FlaskConical className="h-5 w-5 text-muted-foreground" />
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <ul className="space-y-2 text-sm text-muted-foreground">
                     {exp.description.map((item, itemIndex) => (
                       <li key={itemIndex} className="flex items-start gap-2">
@@ -194,7 +194,7 @@ export default function HomePage() {
               className={`animate-fade-in-up-delay-${index + 1}`}
             >
               <Card className="card-hover">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center justify-between">
                     <div>
                       <CardTitle className="mb-1">{exp.title}</CardTitle>
@@ -206,7 +206,7 @@ export default function HomePage() {
                     <Building className="h-5 w-5 text-muted-foreground" />
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <ul className="space-y-2 text-sm text-muted-foreground">
                     {exp.description.slice(0, 3).map((item, itemIndex) => (
                       <li key={itemIndex} className="flex items-start gap-2">
@@ -232,7 +232,7 @@ export default function HomePage() {
               className={`animate-fade-in-up-delay-${index + 1}`}
             >
               <Card className="card-hover card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center gap-2">
                     <GraduationCap className="h-5 w-5 flex-shrink-0" />
                     <div className="min-w-0">
@@ -248,7 +248,7 @@ export default function HomePage() {
                     </div>
                   </div>
                 </CardHeader>
-                <CardContent className="card-content-stretch pt-0">
+                <CardContent className="card-content-stretch">
                   <p className="text-sm leading-relaxed text-muted-foreground">
                     {exp.description[0]}
                   </p>
@@ -269,7 +269,7 @@ export default function HomePage() {
               className={`animate-fade-in-up-delay-${index + 1}`}
             >
               <Card className="card-hover card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center gap-2">
                     <Users className="h-5 w-5 flex-shrink-0" />
                     <div className="min-w-0">
@@ -285,7 +285,7 @@ export default function HomePage() {
                     </div>
                   </div>
                 </CardHeader>
-                <CardContent className="card-content-stretch pt-0">
+                <CardContent className="card-content-stretch">
                   <ul className="space-y-1 text-sm text-muted-foreground">
                     {exp.description.slice(0, 2).map((item, itemIndex) => (
                       <li key={itemIndex} className="flex items-start gap-2">
@@ -311,7 +311,7 @@ export default function HomePage() {
               className={`animate-fade-in-up-delay-${index + 1}`}
             >
               <Card className="card-hover card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-center gap-2">
                     <Award className="h-5 w-5 flex-shrink-0" />
                     <div className="min-w-0">
@@ -327,7 +327,7 @@ export default function HomePage() {
                   </div>
                 </CardHeader>
                 {award.description && (
-                  <CardContent className="card-content-stretch pt-0">
+                  <CardContent className="card-content-stretch">
                     <p className="break-words text-sm leading-relaxed text-muted-foreground">
                       {award.description}
                     </p>
@@ -345,13 +345,13 @@ export default function HomePage() {
         <div className="grid-equal-height grid gap-6 md:grid-cols-3">
           <div className="animate-fade-in-up-delay-1">
             <Card className="card-hover card-full-height">
-              <CardHeader className="pb-3">
+              <CardHeader>
                 <div className="flex items-center gap-2">
                   <Code className="h-5 w-5 flex-shrink-0" />
                   <CardTitle className="mb-1 break-words">Projects</CardTitle>
                 </div>
               </CardHeader>
-              <CardContent className="card-content-stretch pt-0">
+              <CardContent className="card-content-stretch">
                 <div className="flex h-full flex-col">
                   <p className="break-words leading-relaxed text-muted-foreground">
                     Explore my featured projects including HRIStudio, machine
@@ -370,7 +370,7 @@ export default function HomePage() {
 
           <div className="animate-fade-in-up-delay-2">
             <Card className="card-hover card-full-height">
-              <CardHeader className="pb-3">
+              <CardHeader>
                 <div className="flex items-center gap-2">
                   <BookOpen className="h-5 w-5 flex-shrink-0" />
                   <CardTitle className="mb-1 break-words">
@@ -378,7 +378,7 @@ export default function HomePage() {
                   </CardTitle>
                 </div>
               </CardHeader>
-              <CardContent className="card-content-stretch pt-0">
+              <CardContent className="card-content-stretch">
                 <div className="flex h-full flex-col">
                   <p className="break-words leading-relaxed text-muted-foreground">
                     Read my peer-reviewed publications in human-robot
@@ -397,7 +397,7 @@ export default function HomePage() {
 
           <div className="animate-fade-in-up-delay-3">
             <Card className="card-hover card-full-height">
-              <CardHeader className="pb-3">
+              <CardHeader>
                 <div className="flex items-center gap-2">
                   <ExternalLink className="h-5 w-5 flex-shrink-0" />
                   <CardTitle className="mb-1 break-words">
@@ -405,7 +405,7 @@ export default function HomePage() {
                   </CardTitle>
                 </div>
               </CardHeader>
-              <CardContent className="card-content-stretch pt-0">
+              <CardContent className="card-content-stretch">
                 <div className="flex h-full flex-col">
                   <p className="break-words leading-relaxed text-muted-foreground">
                     View my complete academic and professional curriculum vitae.
diff --git a/src/app/publications/page.tsx b/src/app/publications/page.tsx
index c8ac759..bbdd923 100644
--- a/src/app/publications/page.tsx
+++ b/src/app/publications/page.tsx
@@ -146,7 +146,7 @@ export default function PublicationsPage() {
                     </div>
                   )}
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   {pub.abstract && (
                     <p className="break-words text-sm leading-relaxed text-muted-foreground">
                       {pub.abstract}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3113c3e..dcdb460 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,79 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+@keyframes slide-in-from-left {
+  from { transform: translateX(-100%); }
+}
+@keyframes slide-in-from-right {
+  from { transform: translateX(100%); }
+}
+@keyframes slide-in-from-top {
+  from { transform: translateY(-100%); }
+}
+@keyframes slide-in-from-bottom {
+  from { transform: translateY(100%); }
+}
+@keyframes slide-out-to-left {
+  to { transform: translateX(-100%); }
+}
+@keyframes slide-out-to-right {
+  to { transform: translateX(100%); }
+}
+@keyframes slide-out-to-top {
+  to { transform: translateY(-100%); }
+}
+@keyframes slide-out-to-bottom {
+  to { transform: translateY(100%); }
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    /* Darker secondary for better badge contrast against white bg */
-    --secondary: 240 4.8% 90%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-5: 27 87% 67%;
-    --radius: 1rem;
-    --sidebar: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.625rem;
+    --chart-1: 222.2 47.4% 11.2%;
+    --chart-2: 210 40% 44%;
+    --chart-3: 210 40% 57.6%;
+    --chart-4: 182 40% 76.5%;
+    --chart-5: 340 75% 55%;
   }
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --background: 240 10% 3.9%;
-      --foreground: 0 0% 98%;
-      --card: 240 10% 3.9%;
-      --card-foreground: 0 0% 98%;
-      --popover: 240 10% 3.9%;
-      --popover-foreground: 0 0% 98%;
-      --primary: 0 0% 98%;
-      --primary-foreground: 240 5.9% 10%;
-      --secondary: 240 3.7% 20%;
-      /* Slightly lighter for visibility */
-      --secondary-foreground: 0 0% 98%;
-      --muted: 240 3.7% 15.9%;
-      --muted-foreground: 240 5% 64.9%;
-      --accent: 240 3.7% 15.9%;
-      --accent-foreground: 0 0% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
-      --border: 240 3.7% 15.9%;
-      --input: 240 3.7% 15.9%;
-      --ring: 240 4.9% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-      --sidebar: 240 5.9% 10%;
-      --sidebar-foreground: 240 4.8% 95.9%;
-      --sidebar-primary: 224.3 76.3% 48%;
-      --sidebar-primary-foreground: 0 0% 100%;
-      --sidebar-accent: 240 3.7% 15.9%;
-      --sidebar-accent-foreground: 240 4.8% 95.9%;
-      --sidebar-border: 240 3.7% 15.9%;
-      --sidebar-ring: 217.2 91.2% 59.8%;
-    }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.9 100% 50%;
+    --chart-1: 217.2 91.2% 59%;
+    --chart-2: 160 84% 39%;
+    --chart-3: 30 80% 50%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 
@@ -82,156 +104,18 @@
   * {
     @apply border-border outline-ring/50;
   }
-
   body {
-    @apply bg-background text-foreground font-sans;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply font-heading;
+    @apply bg-background text-foreground;
   }
 }
 
-@layer utilities {
-  .animate-blob {
-    animation: blob 7s infinite;
-  }
-
-  .animation-delay-2000 {
-    animation-delay: 2s;
-  }
-
-  .animation-delay-4000 {
-    animation-delay: 4s;
-  }
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes blob {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-
-  33% {
-    transform: translate(30px, -50px) scale(1.1);
-  }
-
-  66% {
-    transform: translate(-20px, 20px) scale(0.9);
-  }
-
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
-@layer components {
-
-  /* Animation utilities */
-  .animate-fade-in {
-    animation: fadeIn 0.5s ease-in-out;
-  }
-
-  .animate-fade-in-up {
-    animation: fadeInUp 0.5s ease-in-out;
-  }
-
-  .animate-fade-in-up-delay-1 {
-    animation: fadeInUp 0.5s ease-in-out 0.1s backwards;
-  }
-
-  .animate-fade-in-up-delay-2 {
-    animation: fadeInUp 0.5s ease-in-out 0.2s backwards;
-  }
-
-  .animate-fade-in-up-delay-3 {
-    animation: fadeInUp 0.5s ease-in-out 0.3s backwards;
-  }
-
-  .animate-fade-in-up-delay-4 {
-    animation: fadeInUp 0.5s ease-in-out 0.4s backwards;
-  }
-
-  /* Card hover effects */
-  .card-hover {
-    transition: all 0.3s ease-out;
-  }
-
-  .card-hover:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
-  }
-
-  /* Button hover effects */
-  .button-hover {
-    transition: all 0.2s ease-out;
-  }
-
-  .button-hover:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1);
-  }
-
-  /* Equal height cards in grid layouts */
-  .grid-equal-height>* {
-    height: 100%;
-  }
-
-  .card-full-height {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .card-content-stretch {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .card-content-stretch p:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
-  /* Text wrapping and overflow utilities */
-  .break-words {
-    word-wrap: break-word;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    hyphens: auto;
-  }
-
-  .leading-relaxed {
-    line-height: 1.625;
-  }
-
-  .leading-tight {
-    line-height: 1.25;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
\ No newline at end of file
+.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }
+.animate-fade-in-up-delay-1 { animation: fade-in-up 0.5s ease-out 0.1s both; }
+.animate-fade-in-up-delay-2 { animation: fade-in-up 0.5s ease-out 0.2s both; }
+.animate-fade-in-up-delay-3 { animation: fade-in-up 0.5s ease-out 0.3s both; }
+.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2f956c1..710f1a1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,7 @@ import typography from "@tailwindcss/typography";
 import tailwindAnimate from "tailwindcss-animate";
 
 export default {
-  darkMode: "media",
+  darkMode: "class",
   content: ["./src/**/*.tsx", "./src/**/*.mdx"],
   theme: {
     extend: {
@@ -16,48 +16,48 @@ export default {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
-        xl: "calc(var(--radius) + 4px)",
+        xl: "calc(var(--radius) + 2px)",
       },
       colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
         },
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
         },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
         chart: {
-          "1": "hsl(var(--chart-1))",
-          "2": "hsl(var(--chart-2))",
-          "3": "hsl(var(--chart-3))",
-          "4": "hsl(var(--chart-4))",
-          "5": "hsl(var(--chart-5))",
+          "1": "hsl(var(--chart-1) / <alpha-value>)",
+          "2": "hsl(var(--chart-2) / <alpha-value>)",
+          "3": "hsl(var(--chart-3) / <alpha-value>)",
+          "4": "hsl(var(--chart-4) / <alpha-value>)",
+          "5": "hsl(var(--chart-5) / <alpha-value>)",
         },
       },
       boxShadow: {