From 2c948eb235575f207eab144a341eac73438b31f2 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Fri, 1 May 2026 17:57:30 +0200
Subject: [PATCH] chore: release v0.40.1

---
 CHANGELOG.md                | 12 ++++++++++++
 package-lock.json           |  4 ++--
 package.json                |  2 +-
 public/styles/budget.css    |  4 ++++
 public/styles/calendar.css  |  2 ++
 public/styles/dashboard.css |  3 +++
 public/styles/layout.css    | 22 ++++++++++++++--------
 public/styles/tokens.css    | 12 ++++++------
 8 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59707e6..b0f83ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.40.1] - 2026-05-01
+
+### Changed
+- **Typography tightening**: page titles and modal titles use tighter letter-spacing (`-0.5 px` / `-0.8 px` on desktop) and `text-wrap: balance` to eliminate orphaned words on wrapped headings.
+- **Warm-tinted shadows**: all elevation shadows (`sm` through `xl`) now use a warm-tinted base colour (`rgba(18, 14, 8, …)`) that matches the warm neutral palette instead of pure black.
+- **Button radius**: regular buttons use `--radius-md` (12 px) instead of `--radius-sm` (8 px), creating a clear visual distinction from text inputs.
+- **Empty-state icons**: icons in empty states pick up a 40 % tint of the current module accent colour, making them feel contextually connected to each module rather than uniformly grey.
+- **Search section labels**: category headings inside the search overlay are now sentence-case instead of all-caps, improving readability.
+
+### Fixed
+- **Tabular figures**: currency amounts (budget summary cards, transaction list, loan cards, chart rows), weather temperature, dashboard metrics, and calendar time labels now use `font-variant-numeric: tabular-nums` so digit columns remain visually aligned.
+
 ## [0.40.0] - 2026-05-01
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index a4273fb..687f85f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "oikos",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "oikos",
-      "version": "0.40.0",
+      "version": "0.40.1",
       "license": "MIT",
       "dependencies": {
         "bcrypt": "^6.0.0",
diff --git a/package.json b/package.json
index 4c16b5f..add1ae5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oikos",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
   "main": "server/index.js",
   "type": "module",
diff --git a/public/styles/budget.css b/public/styles/budget.css
index ca2ecfe..bffb69d 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -160,6 +160,7 @@
 .budget-summary-card__amount {
   font-size: var(--text-xl);
   font-weight: var(--font-weight-bold);
+  font-variant-numeric: tabular-nums;
 }
 
 .budget-summary-card--income   .budget-summary-card__amount { color: var(--color-success); }
@@ -236,6 +237,7 @@
 .budget-bar-row__amount {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
   width: 64px;
   text-align: right;
   flex-shrink: 0;
@@ -336,6 +338,7 @@
 .budget-loan-card__amounts strong {
   display: block;
   font-size: var(--text-base);
+  font-variant-numeric: tabular-nums;
   color: var(--color-text-primary);
   margin-top: 2px;
   white-space: nowrap;
@@ -712,6 +715,7 @@
 .budget-entry__amount {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
 
diff --git a/public/styles/calendar.css b/public/styles/calendar.css
index 127fe0b..eab690d 100644
--- a/public/styles/calendar.css
+++ b/public/styles/calendar.css
@@ -346,6 +346,7 @@
   font-size: var(--text-xs);
   color: var(--color-text-disabled);
   white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
 
 .week-view__columns {
@@ -420,6 +421,7 @@
 .week-event__time {
   font-size: var(--text-xs);
   opacity: 0.85;
+  font-variant-numeric: tabular-nums;
 }
 
 .event-attachment-preview {
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 22731ec..5fea042 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -137,6 +137,7 @@
 .dashboard-metric__value {
   font-size: var(--text-xl);
   font-weight: var(--font-weight-bold);
+  font-variant-numeric: tabular-nums;
   color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1002,6 +1003,7 @@
 .weather-widget__temp {
   font-size: var(--text-4xl);
   font-weight: var(--font-weight-bold);
+  font-variant-numeric: tabular-nums;
   line-height: 1;
   margin-bottom: 2px;
 }
@@ -1068,6 +1070,7 @@
   display: flex;
   gap: var(--space-1);
   font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
 }
 
 .weather-forecast__high {
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 03d4ea1..3368ebe 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -432,9 +432,8 @@
 .search-section__heading {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  color: var(--color-text-secondary);
+  letter-spacing: 0.01em;
   margin-bottom: var(--space-2);
 }
 
@@ -816,7 +815,7 @@ html.fab-anim-done .page-fab {
   .nav-sidebar__brand-name {
     font-size: var(--text-lg);
     font-weight: var(--font-weight-bold);
-    letter-spacing: -0.3px;
+    letter-spacing: -0.6px;
     color: var(--color-text-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -874,7 +873,8 @@ html.fab-anim-done .page-fab {
 .page__title {
   font-size: var(--text-xl);
   font-weight: var(--font-weight-bold);
-  letter-spacing: -0.3px;
+  letter-spacing: -0.5px;
+  text-wrap: balance;
 }
 
 @media (min-width: 1024px) {
@@ -884,7 +884,7 @@ html.fab-anim-done .page-fab {
 
   .page__title {
     font-size: var(--text-2xl);
-    letter-spacing: -0.5px;
+    letter-spacing: -0.8px;
   }
 }
 
@@ -976,6 +976,7 @@ html.fab-anim-done .page-fab {
   font-size: var(--text-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
+  text-wrap: balance;
 }
 
 .card__body {
@@ -1057,6 +1058,7 @@ html.fab-anim-done .page-fab {
 .modal-panel__title {
   font-size: var(--text-md);
   font-weight: var(--font-weight-semibold);
+  text-wrap: balance;
 }
 
 .modal-panel__close {
@@ -1209,7 +1211,7 @@ html.fab-anim-done .page-fab {
   justify-content: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
   min-height: var(--target-lg);
@@ -1533,7 +1535,7 @@ html.fab-anim-done .page-fab {
 .empty-state__icon {
   width: 56px;
   height: 56px;
-  color: var(--color-text-disabled);
+  color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 40%, var(--color-text-disabled));
 }
 
 .empty-state__title {
@@ -2281,11 +2283,15 @@ html.fab-anim-done .page-fab {
 button i[data-lucide],
 button svg { pointer-events: none; }
 
+/* Tabular numbers: gleichbreite Ziffern für Zahlen/Beträge */
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
 /* Kompakter Icon-Button: 44px Klickfläche, optisch kompakt durch geringes Padding */
 .btn--icon-sm {
   padding: var(--space-1);
   min-height: var(--target-base);
   min-width: var(--target-base);
+  border-radius: var(--radius-sm);
 }
 
 /* Textarea: vertikale Größenänderung ist nutzbar */
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index 74a45a2..4c0e7b0 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -262,16 +262,16 @@
    *    3 Stufen: subtle (Karten), medium (Dropdowns, Hover),
    *    elevated (Modals, FAB).
    * -------------------------------------------------------- */
-  --shadow-drop-icon: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
-  --_shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
+  --shadow-drop-icon: drop-shadow(0 2px 4px rgba(18, 14, 8, 0.16));
+  --_shadow-sm: 0 1px 2px rgba(18, 14, 8, 0.05), 0 1px 4px rgba(18, 14, 8, 0.04);
   --shadow-sm:  var(--_shadow-sm);
-  --_shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --_shadow-md: 0 2px 8px rgba(18, 14, 8, 0.09), 0 1px 2px rgba(18, 14, 8, 0.05);
   --shadow-md:  var(--_shadow-md);
-  --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
+  --_shadow-lg: 0 8px 24px rgba(18, 14, 8, 0.13), 0 2px 6px rgba(18, 14, 8, 0.05);
   --shadow-lg:  var(--_shadow-lg);
-  --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
+  --_shadow-xl: 0 16px 48px rgba(18, 14, 8, 0.19), 0 4px 12px rgba(18, 14, 8, 0.07);
   --shadow-xl:  var(--_shadow-xl);
-  --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --_shadow-xs: 0 1px 2px rgba(18, 14, 8, 0.09);
   --shadow-xs:  var(--_shadow-xs);
 
   /* --------------------------------------------------------