Change styling

src/app/globals.css

@@ -46,7 +46,7 @@
   --radius-4xl: calc(var(--radius) + 16px);
 }
 
-:root {
+/* :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -113,6 +113,87 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+} */
+
+:root {
+  --radius: 0.625rem;
+
+  /* Light: warm paper + graphite */
+  --background: oklch(0.985 0.012 85);       /* warm off-white */
+  --foreground: oklch(0.18 0.02 35);         /* graphite */
+
+  --card: oklch(0.992 0.008 85);             /* slightly lifted paper */
+  --card-foreground: var(--foreground);
+
+  --popover: oklch(0.992 0.008 85);
+  --popover-foreground: var(--foreground);
+
+  /* Primary: deep ink / indigo (artist-y but still neutral enough) */
+  --primary: oklch(0.32 0.06 260);
+  --primary-foreground: oklch(0.985 0.012 85);
+
+  /* Secondary/muted/accent: warm washes */
+  --secondary: oklch(0.96 0.015 85);
+  --secondary-foreground: oklch(0.22 0.02 35);
+
+  --muted: oklch(0.955 0.012 85);
+  --muted-foreground: oklch(0.46 0.02 35);
+
+  --accent: oklch(0.95 0.02 110);            /* subtle “wash” */
+  --accent-foreground: oklch(0.22 0.02 35);
+
+  --destructive: oklch(0.58 0.22 27.325);
+
+  --border: oklch(0.90 0.02 85);             /* warm border */
+  --input: oklch(0.90 0.02 85);
+  --ring: oklch(0.55 0.07 260);              /* ties to primary */
+
+  /* charts can stay, or we can harmonize later */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* sidebar inherits the same “paper” idea */
+  --sidebar: oklch(0.975 0.012 85);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.95 0.02 110);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.dark {
+  /* Inky navy background (clearly not neutral) */
+  --background: oklch(21.393% 0.06154 260.121);
+  --foreground: oklch(0.95 0.012 85);
+
+  /* Surfaces */
+  --card: oklch(0.155 0.03 255);
+  --card-foreground: var(--foreground);
+
+  --popover: oklch(0.155 0.03 255);
+  --popover-foreground: var(--foreground);
+
+  /* Primary accent stays “artist ink” */
+  --primary: oklch(0.78 0.11 255);
+  --primary-foreground: oklch(0.13 0.03 255);
+
+  --secondary: oklch(0.19 0.025 255);
+  --secondary-foreground: var(--foreground);
+
+  --muted: oklch(0.19 0.025 255);
+  --muted-foreground: oklch(0.74 0.02 85);
+
+  --accent: oklch(0.22 0.03 110);
+  --accent-foreground: var(--foreground);
+
+  --border: oklch(0.40 0.03 255 / 55%);
+  --input: oklch(0.40 0.03 255 / 65%);
+  --ring: oklch(0.65 0.10 255);
 }
 
 .markdown {
@@ -181,5 +262,13 @@
   }
   body {
     @apply bg-background text-foreground;
+    background-image:
+      radial-gradient(1200px 600px at 20% -10%, oklch(0.92 0.05 110 / 30%), transparent 60%),
+      radial-gradient(900px 500px at 80% 0%, oklch(0.85 0.06 260 / 22%), transparent 55%);
+  }
+  .dark body {
+    background-image:
+      radial-gradient(1200px 700px at 15% -10%, oklch(0.55 0.14 255 / 16%), transparent 60%),
+      radial-gradient(900px 600px at 85% 0%, oklch(0.50 0.12 110 / 10%), transparent 55%);
   }
 }