fix: update Tailwind CSS and adjust related styles

src/components/layout/Footer.tsx

@@ -3,7 +3,7 @@ import { FadeIn } from '../ui/FadeIn';
 export const Footer = () => {
   return (
     <footer role="contentinfo" className="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border">
-      <div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
+      <div className="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
         <div className="grid gap-16 sm:gap-24">
           <FadeIn>
             <div className="text-center space-y-4 sm:space-y-5">

src/components/layout/Header.tsx

@@ -28,7 +28,7 @@ export const Header = () => {
         delay: 0.2
       }}
     >
-      <div className="max-w-screen-xl mx-auto">
+      <div className="max-w-(--breakpoint-xl) mx-auto">
         <nav className="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
           <div className="flex items-center">
             <Link href="/" className="flex items-center gap-2 group" aria-label="Home">

src/components/layout/MobileMenu.tsx

@@ -48,7 +48,7 @@ export const MobileMenu = () => {
         {isOpen && (
           <>
             <motion.div 
-              className="fixed inset-0 bg-black z-[90]"
+              className="fixed inset-0 bg-black z-90"
               initial={{ opacity: 0 }}
               animate={{ opacity: 0.95 }}
               exit={{ opacity: 0 }}
@@ -58,7 +58,7 @@ export const MobileMenu = () => {
             />
             
             <motion.div 
-              className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-[100] h-[100dvh]"
+              className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh]"
               ref={menuRef}
               initial={{ x: "100%" }}
               animate={{ x: 0 }}
@@ -69,7 +69,7 @@ export const MobileMenu = () => {
                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)' }}>
                 <motion.button 
                   onClick={() => setIsOpen(false)}
-                  className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-[110]"
+                  className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
                   aria-label="Close menu"
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}

src/components/sections/About.tsx

@@ -31,20 +31,20 @@ const interests: Interest[] = [
 export const About = () => {
   return (
     <section id="about" className="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
-      <div className="max-w-screen-xl mx-auto">
+      <div className="max-w-(--breakpoint-xl) mx-auto">
         <FadeIn>
           <div className="flex items-baseline gap-4 mb-12 sm:mb-24">
             <h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
               About
             </h2>
-            <div className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
+            <div className="h-px grow bg-white/10 relative top-[-4px]"></div>
           </div>
         </FadeIn>
         
-        <div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24">
+        <div className="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
           <div className="space-y-6 sm:space-y-8">
             <FadeIn>
-              <div className="aspect-square bg-gradient-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
+              <div className="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
                 <Image
                   src="/profile-image.jpg"
                   alt="Jan-Marlon Leibl - Fullstack Software Developer"
@@ -84,7 +84,7 @@ export const About = () => {
                     <h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
                       Technologies
                     </h3>
-                    <div className="h-px flex-grow theme-border"></div>
+                    <div className="h-px grow theme-border"></div>
                   </div>
                   <ul className="space-y-4 sm:space-y-5">
                     {technologies.map((tech) => (
@@ -104,7 +104,7 @@ export const About = () => {
                     <h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
                       Interests
                     </h3>
-                    <div className="h-px flex-grow theme-border"></div>
+                    <div className="h-px grow theme-border"></div>
                   </div>
                   <ul className="space-y-4 sm:space-y-5">
                     {interests.map((interest) => (

src/components/sections/Hero.tsx

@@ -6,7 +6,7 @@ export const Hero = () => {
   return (
     <section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-24 sm:pt-8">
       <div className="absolute inset-0 theme-bg-gradient"></div>
-      <div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
+      <div className="max-w-(--breakpoint-xl) w-full relative pt-8 sm:pt-24">
         <FadeIn className="space-y-8 sm:space-y-16">
           <div className="space-y-6 sm:space-y-8">
             <div className="space-y-6 sm:space-y-8">

src/components/sections/Work.tsx

@@ -107,8 +107,8 @@ const sortedProjects = [...projects].sort((a, b) => {
 export const Work = () => {
   return (
     <section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative">
-      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
-      <div className="max-w-screen-xl mx-auto relative">
+      <div className="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
+      <div className="max-w-(--breakpoint-xl) mx-auto relative">
         <FadeIn>
           <div className="flex flex-col gap-3 mb-12 sm:mb-24">
             <span className="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
@@ -118,7 +118,7 @@ export const Work = () => {
               <h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
                 Selected Work
               </h2>
-              <div className="h-px flex-grow theme-border"></div>
+              <div className="h-px grow theme-border"></div>
             </div>
           </div>
         </FadeIn>
@@ -131,10 +131,10 @@ export const Work = () => {
                   <div className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
                     {project.year}
                   </div>
-                  <div className="h-px flex-grow theme-border"></div>
+                  <div className="h-px grow theme-border"></div>
                 </div>
 
-                <div className="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr,1fr] gap-6 sm:gap-16">
+                <div className="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16">
                   <div className="space-y-4 sm:space-y-8">
                     <h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
                       {project.title}
@@ -153,7 +153,7 @@ export const Work = () => {
                         {project.tags.map((tag, tagIndex) => (
                           <span 
                             key={tagIndex} 
-                            className="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-sm"
+                            className="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs"
                           >
                             <span className="mr-2 flex items-center">{tag.icon}</span>
                             {tag.name}

src/styles/globals.css

@@ -1,6 +1,27 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 :root {
   --background: #ffffff;