fix(ui): theme-card reads for new sources + padding/undefined-css-var fixes

- define missing design tokens (--card/--foreground/--accent/--font/--text-2)
  that theme/modal components referenced but :root never declared (they rendered
  transparent/wrong color)
- zero section-panel padding so .signal-header is the single top-spacing source
  (was double 22px+22px on theme/lineage/health/sim/backtest panels)
- theme cards now surface the new source reads (banks rate, retail sales YoY,
  nonbank household debt, property prices, telecom business confidence)

frontend/src/style.css

@@ -21,6 +21,18 @@
   --amber-soft: rgba(230, 185, 108, 0.12);
   --red: #ef8b8b;
   --red-soft: rgba(239, 139, 139, 0.12);
+  /* aliases the theme/macro/sources/modal components reference — these were
+     written against a design-system variable set that was never declared, so
+     every var() below fell back to invalid and those elements lost their
+     intended background/color. Map them onto the real palette here. */
+  --card: #151f2d;                       /* card background = panel-soft */
+  --foreground: #edf2f7;                 /* primary text = --text */
+  --text-2: #a9b2c2;                     /* secondary text */
+  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --accent: #4da3ff;                     /* blue accent (distinct from mint) */
+  --accent-soft: rgba(77, 163, 255, 0.12);
+  --danger: #ef8b8b;                     /* = --red */
+  --line-weak: rgba(255, 255, 255, 0.05);
 }
 
 * { box-sizing: border-box; }
@@ -116,6 +128,13 @@ tbody tr:hover { background: rgba(255,255,255,.025); }
 .reason-code { display: inline-block; margin: 2px 3px 2px 0; padding: 4px 5px; border: 1px solid var(--line-bright); border-radius: 4px; color: var(--faint); font: 9px 'DM Mono', monospace; }
 
 /* ---- Theme panel (multi-theme) ---- */
+/* These sections are `class="panel X-panel"` with an inner `.panel-header
+   signal-header`. `.panel` applies 22px padding; `.signal-header` applies its
+   own 22px + bottom border. Without padding:0 the header ends up inset 44px
+   while the body stays at 22px -> header misaligned from content. Zero the
+   panel padding and let the header carry the spacing (matches .stock-panel). */
+.theme-panel, .lineage-panel, .health-panel, .sim-panel, .backtest-panel,
+.research-panel { padding: 0; overflow: hidden; }
 .theme-panel { margin-top: 18px; }
 .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
 .theme-card { border: 1px solid var(--line-bright); border-radius: 10px; padding: 14px; background: var(--card); }
@@ -307,7 +326,12 @@ input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(82,214,189,.
   .topbar { display: block; padding-bottom: 25px; }
   .topbar-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; text-align: left; }
   .hero-grid, .bottom-grid { grid-template-columns: 1fr; }
-  .panel { padding: 18px; }
+  /* .panel's default 18px must NOT re-pad the section panels (theme/stock/
+     lineage/health/sim/backtest/research) — those keep padding:0 so their
+     .signal-header stays the single source of top spacing; otherwise the
+     header (#1a7f) would sit inset 18px further than the body. */
+  .panel:not(.theme-panel):not(.stock-panel):not(.lineage-panel):not(.health-panel):not(.sim-panel):not(.backtest-panel):not(.research-panel):not(.signal-panel) { padding: 18px; }
+  .signal-header { padding: 18px; }
   .research-grid { grid-template-columns: 1fr; gap: 18px; }
   .research-results { grid-template-columns: repeat(2, 1fr); }
 }