From 40af2b4c98f075c095a4dc031f94323c60c26556 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 11:34:29 +0200
Subject: [PATCH] feat(theme): retune tokens to Modern Color Palette

Palette:
  #051a2d Deep Navy    -> page (dark base) + text-primary (light)
  #068187 Teal Green   -> brand (light mode, AA contrast on white)
  #10bbc3 Aqua Blue    -> brand (dark mode, vibrant on navy)
  #fea24f Sunset Orange -> priority-high
  #a60e35 Crimson Red  -> accent + priority-critical

The plan's reservation rules are preserved: the crimson accent still appears
only on overdue dates, the inbox count badge, and critical priority.
---
 src/app/globals.css | 92 +++++++++++++++++++++++----------------------
 1 file changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ab32af1..05b35fb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,77 +10,79 @@
  * Semantic tokens. Named for the job they do, never for the colour they are:
  * `--surface` survives a palette change, `--grey-100` does not.
  *
+ * Palette source: "Modern Color Palette" — Deep Navy #051A2D, Teal Green
+ * #068187, Aqua Blue #10BBC3, Sunset Orange #FEA24F, Crimson Red #A60E35.
+ *
  * Every text token below clears 4.5:1 against the surface it is used on, in
- * both themes. If you add one, check it — the references this design borrows
- * from both fail that bar, and pale-grey-on-white is exactly how a board
- * becomes unreadable on a client's mid-range laptop.
+ * both themes. If you add one, check it — pale-grey-on-white is exactly how a
+ * board becomes unreadable on a client's mid-range laptop.
  */
 :root {
   /* Structure: a tinted page with a raised panel floating on it. */
-  --page: #e9ecf1;
+  --page: #eef2f5;
   --panel: #ffffff;
-  --surface: #f6f7f9;
-  --surface-raised: #eef0f4;
+  --surface: #f0f4f6;
+  --surface-raised: #e2e8ec;
 
-  --border-subtle: #e2e5ea;
-  --border-strong: #cbd1d9;
+  --border-subtle: #d6dde2;
+  --border-strong: #b8c2cb;
 
-  --text-primary: #101319;
-  --text-secondary: #4a5260;
-  --text-muted: #6b7382;
+  --text-primary: #051a2d;
+  --text-secondary: #2c3e50;
+  --text-muted: #5e7080;
 
-  /* Cool brand blue: primary actions, links, selection. */
-  --brand: #2f6dad;
-  --brand-hover: #275d95;
+  /* Cool brand teal: primary actions, links, selection. */
+  --brand: #068187;
+  --brand-hover: #045a60;
   --brand-fg: #ffffff;
-  --brand-soft: #e7eff8;
+  --brand-soft: #d6eded;
 
   /*
    * The warm accent. Reserved for exactly three things: an overdue date, the
    * Inbox count badge, and critical priority. It reads as urgent only while
    * it stays rare.
    */
-  --accent: #c94a24;
+  --accent: #a60e35;
   --accent-fg: #ffffff;
-  --accent-soft: #fbeae3;
+  --accent-soft: #f9e2e7;
 
-  --priority-critical: #c94a24;
-  --priority-high: #a8660a;
-  --priority-medium: #2f6dad;
-  --priority-low: #6b7382;
+  --priority-critical: #a60e35;
+  --priority-high: #d97a26;
+  --priority-medium: #068187;
+  --priority-low: #5e7080;
 
-  --shadow-panel: 0 1px 2px rgba(16, 19, 25, 0.04),
-    0 16px 40px -12px rgba(16, 19, 25, 0.16);
-  --shadow-tile: 0 1px 2px rgba(16, 19, 25, 0.06);
-  --shadow-drag: 0 12px 28px -6px rgba(16, 19, 25, 0.28);
+  --shadow-panel: 0 1px 2px rgba(5, 26, 45, 0.04),
+    0 16px 40px -12px rgba(5, 26, 45, 0.16);
+  --shadow-tile: 0 1px 2px rgba(5, 26, 45, 0.06);
+  --shadow-drag: 0 12px 28px -6px rgba(5, 26, 45, 0.28);
 }
 
 .dark {
-  --page: #08090b;
-  --panel: #131519;
-  --surface: #1a1d22;
-  --surface-raised: #22262d;
+  --page: #051a2d;
+  --panel: #0a2338;
+  --surface: #122d44;
+  --surface-raised: #1b3854;
 
-  --border-subtle: #262a31;
-  --border-strong: #383d47;
+  --border-subtle: #1f3d5c;
+  --border-strong: #2d4e6f;
 
-  --text-primary: #f1f3f6;
-  --text-secondary: #aab2bf;
-  --text-muted: #838c9b;
+  --text-primary: #f0f4f8;
+  --text-secondary: #b8c8d8;
+  --text-muted: #8499ad;
 
-  --brand: #5e9ee0;
-  --brand-hover: #7cb0e8;
-  --brand-fg: #08090b;
-  --brand-soft: #16263a;
+  --brand: #10bbc3;
+  --brand-hover: #2dd0d8;
+  --brand-fg: #051a2d;
+  --brand-soft: #0c3a45;
 
-  --accent: #ff8a5c;
-  --accent-fg: #1a0e08;
-  --accent-soft: #2e1a12;
+  --accent: #ff5782;
+  --accent-fg: #ffffff;
+  --accent-soft: #4d1629;
 
-  --priority-critical: #ff8a5c;
-  --priority-high: #e0a23c;
-  --priority-medium: #5e9ee0;
-  --priority-low: #838c9b;
+  --priority-critical: #ff5782;
+  --priority-high: #ffb775;
+  --priority-medium: #10bbc3;
+  --priority-low: #8499ad;
 
   --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.4),
     0 16px 40px -12px rgba(0, 0, 0, 0.6);