feat: harmonize light theme with soft gray tones

Replaced harsh whites with a soft, professional light gray palette:

Light tones (lightest to darkest):
- waveform-bg: 99% - near-white for waveform area
- card: 98% - soft white for cards/panels
- background: 96% - main background (was 100% harsh white)
- muted: 94% - muted elements
- secondary/accent: 92% - secondary/accent elements
- input: 92% - input backgrounds
- border: 88% - borders and dividers

Dark tones (text, darker):
- foreground: 20% - main text (was 9.8% too dark)
- card-foreground: 20% - card text
- secondary-foreground: 25% - secondary text
- muted-foreground: 45% - muted text (lighter for better contrast)

Primary color:
- Changed to pleasant blue: oklch(55% 0.15 240)
- Matches dark theme primary color concept
- More modern than pure black

Benefits:
- Softer, more pleasant appearance
- Reduced eye strain in light mode
- Better harmony with dark mode
- Professional appearance like Figma, Linear, etc.
- Maintains excellent readability
- Consistent gray palette across both themes

Both light and dark themes now have harmonized gray palettes
that are easy on the eyes and professional-looking.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/globals.css

@@ -19,51 +19,51 @@
 /* CSS Variables for theming */
 @layer base {
   :root {
-    /* Light mode colors using OKLCH */
+    /* Light mode colors using OKLCH - harmonized gray palette */
-    --background: oklch(100% 0 0);
+    --background: oklch(96% 0.005 285.8);
-    --foreground: oklch(9.8% 0.038 285.8);
+    --foreground: oklch(20% 0.015 285.8);
 
-    --card: oklch(100% 0 0);
+    --card: oklch(98% 0.003 285.8);
-    --card-foreground: oklch(9.8% 0.038 285.8);
+    --card-foreground: oklch(20% 0.015 285.8);
 
-    --popover: oklch(100% 0 0);
+    --popover: oklch(98% 0.003 285.8);
-    --popover-foreground: oklch(9.8% 0.038 285.8);
+    --popover-foreground: oklch(20% 0.015 285.8);
 
-    --primary: oklch(22.4% 0.053 285.8);
+    --primary: oklch(55% 0.15 240);
-    --primary-foreground: oklch(98% 0 0);
+    --primary-foreground: oklch(98% 0.003 285.8);
 
-    --secondary: oklch(96.1% 0 0);
+    --secondary: oklch(92% 0.005 285.8);
-    --secondary-foreground: oklch(13.8% 0.038 285.8);
+    --secondary-foreground: oklch(25% 0.015 285.8);
 
-    --muted: oklch(96.1% 0 0);
+    --muted: oklch(94% 0.005 285.8);
-    --muted-foreground: oklch(45.1% 0.015 285.9);
+    --muted-foreground: oklch(45% 0.01 285.9);
 
-    --accent: oklch(96.1% 0 0);
+    --accent: oklch(92% 0.005 285.8);
-    --accent-foreground: oklch(13.8% 0.038 285.8);
+    --accent-foreground: oklch(25% 0.015 285.8);
 
-    --destructive: oklch(60.2% 0.168 29.2);
+    --destructive: oklch(55% 0.18 29.2);
-    --destructive-foreground: oklch(98% 0 0);
+    --destructive-foreground: oklch(98% 0.003 285.8);
 
-    --border: oklch(89.8% 0 0);
+    --border: oklch(88% 0.005 285.8);
-    --input: oklch(89.8% 0 0);
+    --input: oklch(92% 0.005 285.8);
-    --ring: oklch(22.4% 0.053 285.8);
+    --ring: oklch(55% 0.15 240);
 
     --radius: 0.5rem;
 
-    --success: oklch(60% 0.15 145);
+    --success: oklch(55% 0.15 145);
-    --success-foreground: oklch(98% 0 0);
+    --success-foreground: oklch(98% 0.003 285.8);
 
-    --warning: oklch(75% 0.15 85);
+    --warning: oklch(60% 0.15 85);
-    --warning-foreground: oklch(20% 0 0);
+    --warning-foreground: oklch(20% 0.015 285.8);
 
-    --info: oklch(65% 0.15 240);
+    --info: oklch(60% 0.15 240);
-    --info-foreground: oklch(98% 0 0);
+    --info-foreground: oklch(98% 0.003 285.8);
 
     /* Audio-specific colors */
-    --waveform: oklch(50% 0.1 240);
+    --waveform: oklch(55% 0.15 240);
-    --waveform-progress: oklch(60% 0.15 145);
+    --waveform-progress: oklch(55% 0.15 145);
-    --waveform-selection: oklch(65% 0.15 240);
+    --waveform-selection: oklch(60% 0.15 240);
-    --waveform-bg: oklch(98% 0 0);
+    --waveform-bg: oklch(99% 0.002 285.8);
   }
 
   .dark {