From 2948557e94a3210e6890ab5eede2a8bd63fbde5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 08:31:52 +0100
Subject: [PATCH] feat: soften light theme with gentler gray tones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduced contrast in light theme for softer, more comfortable appearance:

Background tones (darker, gentler):
- waveform-bg: 97% (was 99% - less bright)
- card: 96% (was 98% - softer)
- background: 93% (was 96% - more muted)
- muted: 90% (was 94% - darker)
- secondary/accent: 88% (was 92% - more visible)
- border: 85% (was 88% - stronger definition)
- input: 88% (was 92% - better contrast)

Foreground tones (lighter, softer):
- foreground: 28% (was 20% - less harsh)
- card-foreground: 28% (was 20% - softer)
- secondary-foreground: 32% (was 25% - lighter)
- muted-foreground: 48% (was 45% - easier to read)

Color adjustments:
- Reduced color intensity from 0.15 to 0.14
- Softer primary: oklch(58% 0.14 240)
- All colors slightly desaturated for gentler feel

Benefits:
- Reduced contrast reduces eye strain
- Softer, warmer appearance
- More comfortable for extended use
- Better balance between light and dark themes
- Modern low-contrast aesthetic
- Similar to Figma, Linear, or Notion's light modes

Both themes now have beautifully balanced, low-contrast
palettes that are easy on the eyes and professional.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/globals.css | 60 ++++++++++++++++++++++++-------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 2200774..aed065f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -19,51 +19,51 @@
 /* CSS Variables for theming */
 @layer base {
   :root {
-    /* Light mode colors using OKLCH - harmonized gray palette */
-    --background: oklch(96% 0.005 285.8);
-    --foreground: oklch(20% 0.015 285.8);
+    /* Light mode colors using OKLCH - soft, gentle gray palette */
+    --background: oklch(93% 0.005 285.8);
+    --foreground: oklch(28% 0.012 285.8);
 
-    --card: oklch(98% 0.003 285.8);
-    --card-foreground: oklch(20% 0.015 285.8);
+    --card: oklch(96% 0.003 285.8);
+    --card-foreground: oklch(28% 0.012 285.8);
 
-    --popover: oklch(98% 0.003 285.8);
-    --popover-foreground: oklch(20% 0.015 285.8);
+    --popover: oklch(96% 0.003 285.8);
+    --popover-foreground: oklch(28% 0.012 285.8);
 
-    --primary: oklch(55% 0.15 240);
-    --primary-foreground: oklch(98% 0.003 285.8);
+    --primary: oklch(58% 0.14 240);
+    --primary-foreground: oklch(96% 0.003 285.8);
 
-    --secondary: oklch(92% 0.005 285.8);
-    --secondary-foreground: oklch(25% 0.015 285.8);
+    --secondary: oklch(88% 0.005 285.8);
+    --secondary-foreground: oklch(32% 0.012 285.8);
 
-    --muted: oklch(94% 0.005 285.8);
-    --muted-foreground: oklch(45% 0.01 285.9);
+    --muted: oklch(90% 0.005 285.8);
+    --muted-foreground: oklch(48% 0.008 285.9);
 
-    --accent: oklch(92% 0.005 285.8);
-    --accent-foreground: oklch(25% 0.015 285.8);
+    --accent: oklch(88% 0.005 285.8);
+    --accent-foreground: oklch(32% 0.012 285.8);
 
-    --destructive: oklch(55% 0.18 29.2);
-    --destructive-foreground: oklch(98% 0.003 285.8);
+    --destructive: oklch(58% 0.16 29.2);
+    --destructive-foreground: oklch(96% 0.003 285.8);
 
-    --border: oklch(88% 0.005 285.8);
-    --input: oklch(92% 0.005 285.8);
-    --ring: oklch(55% 0.15 240);
+    --border: oklch(85% 0.005 285.8);
+    --input: oklch(88% 0.005 285.8);
+    --ring: oklch(58% 0.14 240);
 
     --radius: 0.5rem;
 
-    --success: oklch(55% 0.15 145);
-    --success-foreground: oklch(98% 0.003 285.8);
+    --success: oklch(56% 0.14 145);
+    --success-foreground: oklch(96% 0.003 285.8);
 
-    --warning: oklch(60% 0.15 85);
-    --warning-foreground: oklch(20% 0.015 285.8);
+    --warning: oklch(62% 0.14 85);
+    --warning-foreground: oklch(28% 0.012 285.8);
 
-    --info: oklch(60% 0.15 240);
-    --info-foreground: oklch(98% 0.003 285.8);
+    --info: oklch(62% 0.14 240);
+    --info-foreground: oklch(96% 0.003 285.8);
 
     /* Audio-specific colors */
-    --waveform: oklch(55% 0.15 240);
-    --waveform-progress: oklch(55% 0.15 145);
-    --waveform-selection: oklch(60% 0.15 240);
-    --waveform-bg: oklch(99% 0.002 285.8);
+    --waveform: oklch(58% 0.14 240);
+    --waveform-progress: oklch(56% 0.14 145);
+    --waveform-selection: oklch(62% 0.14 240);
+    --waveform-bg: oklch(97% 0.002 285.8);
   }
 
   .dark {