feat: add HeatmapCell component and Apple-inspired global design system with dark/light mode support.

src/app/globals.css

@@ -6,17 +6,26 @@
 
 /* ── Dark Mode (default) ── */
 :root {
-  /* Apple macOS dark exact values */
-  --bg-base: #000000;
-  --bg-surface: #111111;
-  --bg-elevated: #1c1c1e;
-  --bg-overlay: rgba(28, 28, 30, 0.85);
-  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.12);
+  /* Apple macOS dark aligned to Slate palette as per UX Spec */
+  --bg-base: #020617;
+  /* Slate 950 */
+  --bg-surface: #0f172a;
+  /* Slate 900 */
+  --bg-elevated: #1e293b;
+  /* Slate 800 */
+  --bg-overlay: rgba(15, 23, 42, 0.85);
+  /* Slate 900 with opacity */
+  --border: #334155;
+  /* Slate 700 */
+  --border-strong: #475569;
+  /* Slate 600 */
 
-  --text-primary: #f5f5f7;
-  --text-secondary: #a1a1a6;
-  --text-muted: #86868b;
+  --text-primary: #e2e8f0;
+  /* Slate 200 */
+  --text-secondary: #94a3b8;
+  /* Slate 400 */
+  --text-muted: #64748b;
+  /* Slate 500 */
 
   --accent: #2dd4bf;
   /* emerald-ish, Apple-tuned */
@@ -127,8 +136,13 @@
 }
 
 /* ── Surfaces & containers ── */
-.surface { background: var(--bg-surface); }
-.elevated { background: var(--bg-elevated); }
+.surface {
+  background: var(--bg-surface);
+}
+
+.elevated {
+  background: var(--bg-elevated);
+}
 
 .apple-card {
   background: var(--bg-surface);
@@ -206,33 +220,35 @@
 }
 
 .heatmap-low {
-  background: rgba(45, 212, 191, 0.08);
-  color: rgba(45, 212, 191, 0.70);
+  background: rgba(14, 165, 233, 0.08);
+  /* sky-500 */
+  color: rgba(14, 165, 233, 0.70);
 }
 
 .heatmap-mid {
-  background: rgba(45, 212, 191, 0.15);
-  color: rgba(45, 212, 191, 0.90);
+  background: rgba(14, 165, 233, 0.15);
+  color: rgba(14, 165, 233, 0.90);
 }
 
 .heatmap-high {
-  background: rgba(45, 212, 191, 0.25);
-  color: #2dd4bf;
+  background: rgba(14, 165, 233, 0.25);
+  color: #0ea5e9;
 }
 
 .light .heatmap-low {
-  background: rgba(13, 148, 136, 0.08);
-  color: #0f766e;
+  background: rgba(2, 132, 199, 0.08);
+  /* sky-600 */
+  color: #0369a1;
 }
 
 .light .heatmap-mid {
-  background: rgba(13, 148, 136, 0.14);
-  color: #0d9488;
+  background: rgba(2, 132, 199, 0.14);
+  color: #0284c7;
 }
 
 .light .heatmap-high {
-  background: rgba(13, 148, 136, 0.22);
-  color: #0f766e;
+  background: rgba(2, 132, 199, 0.22);
+  color: #0369a1;
 }
 
 /* ── Apple-style input ── */
@@ -263,7 +279,7 @@
   align-items: center;
   gap: 6px;
   padding: 8px 18px;
-  background: var(--accent);
+  background: var(--brand-solid);
   color: #fff;
   font-size: 13px;
   font-weight: 600;