feat: task slide-over panel, DM Sans typography, UI refinements

- TaskSlideOver: right-side panel with Next Up, Today, Upcoming, Quick Add
- Dashboard: compact task trigger replaces inline tasks
- Typography: DM Sans display font, antialiased rendering
- Cards: subtle hover elevation, colored left accent borders
- Navbar: accent-colored active states, frosted glass blur
- Badges: tighter uppercase style

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend-v2/src/app.css

@@ -16,9 +16,9 @@
   body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
   :root {
     /* ── Fonts ── */
-    --font: 'Inter', -apple-system, system-ui, sans-serif;
+    --font: 'DM Sans', -apple-system, system-ui, sans-serif;
     --mono: 'JetBrains Mono', ui-monospace, monospace;
-    --transition: 180ms ease;
+    --transition: 150ms ease;
 
     /* ── Spacing scale (4px grid) ──
      * Use these everywhere: padding, margin, gap.
@@ -106,16 +106,16 @@
   /* ── LIGHT MODE ── */
   :root {
     /* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */
-    --canvas: #F5F6F8;
+    --canvas: #F4F5F7;
     --surface: #FFFFFF;
-    --surface-secondary: #FAFAFB;
+    --surface-secondary: #F8F9FA;
     --card: #FFFFFF;
-    --card-secondary: #FAFAFB;
-    --card-hover: #f0f0f3;
+    --card-secondary: #F8F9FA;
+    --card-hover: #F0F1F4;
 
     /* Borders */
-    --border: rgba(0,0,0,0.06);
-    --border-strong: rgba(0,0,0,0.1);
+    --border: rgba(0,0,0,0.07);
+    --border-strong: rgba(0,0,0,0.12);
 
     /* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */
     --text-1: #1a1a1f;
@@ -202,6 +202,9 @@
     background: var(--canvas);
     color: var(--text-1);
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
     transition: background var(--transition), color var(--transition);
     -webkit-font-smoothing: antialiased;
   }
@@ -306,18 +309,12 @@
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   padding: var(--card-pad);
-  transition: box-shadow 0.2s ease;
-}
-.module:hover {
-  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
 }
 .module.primary {
   padding: var(--card-pad-primary);
   box-shadow: var(--shadow-md);
 }
-.module.primary:hover {
-  box-shadow: var(--shadow-lg);
-}
 .module.flush { padding: 0; }
 
 .module-header {
@@ -328,11 +325,11 @@
 }
 
 .module-title {
-  font-size: var(--text-sm);
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
   color: var(--text-3);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.1em;
 }
 
 .module-action {
@@ -353,22 +350,22 @@
   align-items: center;
   gap: var(--inner-gap);
   padding: var(--row-pad-y) var(--row-pad-x);
-  transition: background var(--transition);
+  transition: background 0.15s ease;
 }
 .data-row:hover { background: var(--card-hover); }
 .data-row + .data-row { border-top: 1px solid var(--border); }
-.data-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
-.data-row:nth-child(even):hover { background: var(--card-hover); }
 
 /* ── Badges ──
  * Semantic status badges. Variants: error, success, warning, accent, muted.
  */
 .badge {
-  font-size: var(--text-xs);
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--radius-xs);
   flex-shrink: 0;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .badge.error { background: var(--error-dim); color: var(--error); }
 .badge.success { background: var(--success-dim); color: var(--success); }
@@ -412,12 +409,12 @@
  * Uppercase label above a group of content.
  */
 .section-label {
-  font-size: var(--text-xs);
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: var(--text-3);
-  margin-bottom: var(--sp-1.5);
+  margin-bottom: var(--sp-2);
 }
 
 /* ── Page wrapper ── */
@@ -427,24 +424,25 @@
   font-size: var(--text-xl);
   font-weight: 600;
   color: var(--text-1);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
   line-height: var(--leading-tight);
 }
 .page-subtitle {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
   margin-bottom: var(--sp-1);
 }
 .page-greeting {
   font-size: var(--text-2xl);
-  font-weight: 300;
+  font-weight: 400;
   color: var(--text-1);
   line-height: var(--leading-tight);
+  letter-spacing: -0.02em;
 }
-.page-greeting strong { font-weight: 600; }
+.page-greeting strong { font-weight: 700; }
 
 /* ── App surface (centered container) ── */
 .app-surface {