diff --git a/app/globals.css b/app/globals.css
index 7be1708..c79ae63 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,29 +1,202 @@
 @import "tailwindcss";
 
-/* Custom theme for all 23 measurement categories */
-@theme {
-  /* Category colors for unit types */
-  --color-category-angle: #0ea5e9;
-  --color-category-apparent-power: #8b5cf6;
-  --color-category-area: #f59e0b;
-  --color-category-current: #f59e0b;
-  --color-category-digital: #06b6d4;
-  --color-category-each: #64748b;
-  --color-category-energy: #eab308;
-  --color-category-frequency: #a855f7;
-  --color-category-illuminance: #84cc16;
-  --color-category-length: #3b82f6;
-  --color-category-mass: #10b981;
-  --color-category-pace: #14b8a6;
-  --color-category-parts-per: #ec4899;
-  --color-category-power: #f43f5e;
-  --color-category-pressure: #6366f1;
-  --color-category-reactive-energy: #d946ef;
-  --color-category-reactive-power: #e879f9;
-  --color-category-speed: #10b981;
-  --color-category-temperature: #ef4444;
-  --color-category-time: #7c3aed;
-  --color-category-voltage: #fb923c;
-  --color-category-volume: #8b5cf6;
-  --color-category-volume-flow-rate: #22d3ee;
+@source "../components/**/*.{js,ts,jsx,tsx}";
+@source "*.{js,ts,jsx,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.5rem;
+
+  /* Light Mode Colors - Using OKLCH for better color precision */
+  --background: oklch(100% 0 0);
+  --foreground: oklch(9.8% 0.038 285.8);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(9.8% 0.038 285.8);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(9.8% 0.038 285.8);
+  --primary: oklch(22.4% 0.053 285.8);
+  --primary-foreground: oklch(98% 0.016 240);
+  --secondary: oklch(96.1% 0.016 240);
+  --secondary-foreground: oklch(22.4% 0.053 285.8);
+  --muted: oklch(96.1% 0.016 240);
+  --muted-foreground: oklch(46.9% 0.025 244.1);
+  --accent: oklch(96.1% 0.016 240);
+  --accent-foreground: oklch(22.4% 0.053 285.8);
+  --destructive: oklch(60.2% 0.168 29.2);
+  --destructive-foreground: oklch(98% 0.016 240);
+  --border: oklch(91.4% 0.026 243.1);
+  --input: oklch(91.4% 0.026 243.1);
+  --ring: oklch(9.8% 0.038 285.8);
+}
+
+@theme inline {
+  /* Tailwind v4 theme color definitions */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Category colors for 23 unit types */
+  --color-category-angle: oklch(69.2% 0.154 237.7);
+  --color-category-apparent-power: oklch(64.8% 0.190 293.6);
+  --color-category-area: oklch(75.8% 0.159 70.5);
+  --color-category-current: oklch(75.8% 0.159 70.5);
+  --color-category-digital: oklch(72.3% 0.134 216.8);
+  --color-category-each: oklch(52.5% 0.033 257.5);
+  --color-category-energy: oklch(80.3% 0.162 97.3);
+  --color-category-frequency: oklch(66.8% 0.238 301.6);
+  --color-category-illuminance: oklch(78.3% 0.184 128.6);
+  --color-category-length: oklch(62.1% 0.214 255.5);
+  --color-category-mass: oklch(72.4% 0.159 165.1);
+  --color-category-pace: oklch(71.5% 0.145 192.2);
+  --color-category-parts-per: oklch(69.4% 0.224 350.3);
+  --color-category-power: oklch(62.8% 0.230 16.6);
+  --color-category-pressure: oklch(61.3% 0.218 281.3);
+  --color-category-reactive-energy: oklch(67.5% 0.276 320.6);
+  --color-category-reactive-power: oklch(74.5% 0.233 316.8);
+  --color-category-speed: oklch(72.4% 0.159 165.1);
+  --color-category-temperature: oklch(62.8% 0.257 29.2);
+  --color-category-time: oklch(58.5% 0.238 293.1);
+  --color-category-voltage: oklch(75.5% 0.159 55.3);
+  --color-category-volume: oklch(64.8% 0.190 293.6);
+  --color-category-volume-flow-rate: oklch(77.9% 0.162 208.8);
+
+  /* Custom Animations */
+  --animate-fade-in: fadeIn 0.3s ease-in-out;
+  --animate-slide-up: slideUp 0.4s ease-out;
+  --animate-slide-down: slideDown 0.4s ease-out;
+  --animate-slide-in-right: slideInRight 0.3s ease-out;
+  --animate-slide-in-left: slideInLeft 0.3s ease-out;
+  --animate-scale-in: scaleIn 0.2s ease-out;
+  --animate-bounce-gentle: bounceGentle 0.5s ease-in-out;
+  --animate-shimmer: shimmer 2s infinite;
+}
+
+.dark {
+  --background: oklch(9.8% 0.038 285.8);
+  --foreground: oklch(98% 0.016 240);
+  --card: oklch(9.8% 0.038 285.8);
+  --card-foreground: oklch(98% 0.016 240);
+  --popover: oklch(9.8% 0.038 285.8);
+  --popover-foreground: oklch(98% 0.016 240);
+  --primary: oklch(98% 0.016 240);
+  --primary-foreground: oklch(22.4% 0.053 285.8);
+  --secondary: oklch(17.5% 0.036 242.3);
+  --secondary-foreground: oklch(98% 0.016 240);
+  --muted: oklch(17.5% 0.036 242.3);
+  --muted-foreground: oklch(65.1% 0.031 244);
+  --accent: oklch(17.5% 0.036 242.3);
+  --accent-foreground: oklch(98% 0.016 240);
+  --destructive: oklch(30.6% 0.125 29.2);
+  --destructive-foreground: oklch(98% 0.016 240);
+  --border: oklch(17.5% 0.036 242.3);
+  --input: oklch(17.5% 0.036 242.3);
+  --ring: oklch(83.9% 0.031 243.7);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 200ms;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Disable transitions during theme switch to prevent flash */
+  .theme-transitioning * {
+    transition: none !important;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-background;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-muted-foreground/20 rounded-lg hover:bg-muted-foreground/30;
+  }
+
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+/* Animation Keyframes */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideDown {
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes bounceGentle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes shimmer {
+  from { background-position: -1000px 0; }
+  to { background-position: 1000px 0; }
 }