From 3f97d07f4e4b796444e0d47189ff66e0b4c8e3b1 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Wed, 11 Mar 2026 20:51:26 +0100
Subject: [PATCH] feat(01-01): replace CSS tokens with pastel oklch values

- Update all :root tokens with lavender-tinted pastel oklch values
- Map --chart-1 through --chart-5 to category base colors (bill, variable_expense, debt, saving, investment)
- Add --success and --warning semantic tokens with foreground pairs
- Register --color-success and --color-warning in @theme inline for Tailwind utility access
- Preserve --card and --popover as pure white (intentional locked decision)
- Leave .dark block unchanged (out of scope)
---
 frontend/src/index.css | 66 +++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 223c38c..b9710d8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,38 +6,42 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --background: oklch(0.98 0.005 290);
+    --foreground: oklch(0.145 0.005 290);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
+    --card-foreground: oklch(0.145 0.005 290);
     --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.145 0.005 290);
+    --primary: oklch(0.50 0.12 260);
+    --primary-foreground: oklch(0.99 0.005 290);
+    --secondary: oklch(0.95 0.015 280);
+    --secondary-foreground: oklch(0.25 0.01 280);
+    --muted: oklch(0.95 0.010 280);
+    --muted-foreground: oklch(0.50 0.01 280);
+    --accent: oklch(0.94 0.020 280);
+    --accent-foreground: oklch(0.25 0.01 280);
     --destructive: oklch(0.58 0.22 27);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.809 0.105 251.813);
-    --chart-2: oklch(0.623 0.214 259.815);
-    --chart-3: oklch(0.546 0.245 262.881);
-    --chart-4: oklch(0.488 0.243 264.376);
-    --chart-5: oklch(0.424 0.199 265.638);
+    --border: oklch(0.91 0.008 280);
+    --input: oklch(0.91 0.008 280);
+    --ring: oklch(0.65 0.08 260);
+    --chart-1: oklch(0.76 0.12 250);
+    --chart-2: oklch(0.80 0.14 85);
+    --chart-3: oklch(0.76 0.13 15);
+    --chart-4: oklch(0.75 0.13 280);
+    --chart-5: oklch(0.76 0.12 320);
     --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --sidebar: oklch(0.97 0.012 280);
+    --sidebar-foreground: oklch(0.20 0.01 280);
+    --sidebar-primary: oklch(0.50 0.12 260);
+    --sidebar-primary-foreground: oklch(0.99 0.005 290);
+    --sidebar-accent: oklch(0.93 0.020 280);
+    --sidebar-accent-foreground: oklch(0.25 0.01 280);
+    --sidebar-border: oklch(0.90 0.010 280);
+    --sidebar-ring: oklch(0.65 0.08 260);
+    --success: oklch(0.55 0.15 145);
+    --success-foreground: oklch(0.99 0 0);
+    --warning: oklch(0.70 0.14 75);
+    --warning-foreground: oklch(0.99 0 0);
 }
 
 .dark {
@@ -107,6 +111,10 @@
     --color-card: var(--card);
     --color-foreground: var(--foreground);
     --color-background: var(--background);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
     --radius-sm: calc(var(--radius) * 0.6);
     --radius-md: calc(var(--radius) * 0.8);
     --radius-lg: var(--radius);
@@ -126,4 +134,4 @@
   html {
     @apply font-sans;
     }
-}
\ No newline at end of file
+}