refactor: Update color definitions in Tailwind configuration to use oklch color space

- Change color definitions in tailwind.config.js from hsl to oklch for improved color accuracy and consistency across the application.

tailwind.config.js

@@ -24,45 +24,45 @@ module.exports = {
   	},
   	extend: {
   		colors: {
-  			border: 'hsl(var(--border))',
+  			border: 'oklch(var(--border))',
-  			input: 'hsl(var(--input))',
+  			input: 'oklch(var(--input))',
-  			ring: 'hsl(var(--ring))',
+  			ring: 'oklch(var(--ring))',
-  			background: 'hsl(var(--background))',
+  			background: 'oklch(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
+  			foreground: 'oklch(var(--foreground))',
   			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+  				DEFAULT: 'oklch(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
+  				foreground: 'oklch(var(--primary-foreground))'
   			},
   			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
+  				DEFAULT: 'oklch(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
+  				foreground: 'oklch(var(--secondary-foreground))'
   			},
   			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
+  				DEFAULT: 'oklch(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
+  				foreground: 'oklch(var(--destructive-foreground))'
   			},
   			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
+  				DEFAULT: 'oklch(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
+  				foreground: 'oklch(var(--muted-foreground))'
   			},
   			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
+  				DEFAULT: 'oklch(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
+  				foreground: 'oklch(var(--accent-foreground))'
   			},
   			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
+  				DEFAULT: 'oklch(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
+  				foreground: 'oklch(var(--popover-foreground))'
   			},
   			card: {
-  				DEFAULT: 'hsl(var(--card))',
+  				DEFAULT: 'oklch(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
+  				foreground: 'oklch(var(--card-foreground))'
   			},
   			chart: {
-  				'1': 'hsl(var(--chart-1))',
+  				'1': 'oklch(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
+  				'2': 'oklch(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
+  				'3': 'oklch(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
+  				'4': 'oklch(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
+  				'5': 'oklch(var(--chart-5))'
   			}
   		},
   		borderRadius: {