feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets

Big design pass across Home + tokens + components.

— globals.css: new data-* palette (cool/warm/hot/good/info/rose/violet/mood)
  with theme-aware variants, .grain overlay utility, .num-display
  typography helper, .hit-zone 44px wrapper, .eyebrow label, .focus-card
  base, focus-visible outline-offset 3px, space/touch scale vars.
— FocusCard.tsx: context engine — пять состояний (morning-outfit,
  tram-imminent, event-upcoming, countdown, bill-due, night, quiet).
  Auto-rotates by hour + live data. 96px display numbers, accent-mixed
  surfaces, grain overlay.
— CountdownCard.tsx + /api/countdowns: rotating 8s list, persistent
  /data/tablet-countdowns.json, full CRUD. Default seeded with Токио.
— HomeTab: replaced plain Weather hero with FocusCard, added Row 4
  with CountdownCard. Pulls trams + countdowns for the Focus context.
— Swipe between tabs: pointer-level detection on <main>, data-swipe-ignore
  bails out inside modals + note swipe-to-delete + voice overlay.
— Touch-target sweep: TopBar HA dot → 44px hit-zone, sensor chip 44px
  min-height, forecast day buttons 92px min, DeviceCard toggle 60x36,
  CalendarTab prev/next/close/list all 44x44, NotesTab buttons 44x44,
  TimerHomeWidget + 44x44, WeatherDayModal chevrons 48x48, close 48.
— Hardcoded hex → data-* tokens: TopBar sensors, TransportWidget routes
  (via color-mix), DeviceCard full rewrite (per-kind accent, glass
  removed in favor of color-mix surfaces + proper mock-state treatment),
  NotesTab palette refreshed to match dark theme.

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

components/TopBar.tsx

@@ -86,32 +86,41 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
         </div>
 
         {/* Right: sensors + weather */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>
-          {/* HA status */}
-          <div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
-            width: 10, height: 10, borderRadius: '50%',
-            background: haConnected ? '#34d399' : '#f87171',
-            boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
-            transition: 'all 0.5s ease',
-            flexShrink: 0,
-          }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifySelf: 'end' }}>
+          {/* HA status — 44px hit-zone wrapping 14px dot */}
+          <div
+            title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'}
+            className="hit-zone"
+            style={{ width: 44, height: 44 }}
+          >
+            <div style={{
+              width: 14, height: 14, borderRadius: '50%',
+              background: haConnected ? 'var(--data-good)' : 'var(--data-danger)',
+              boxShadow: haConnected
+                ? '0 0 10px color-mix(in srgb, var(--data-good) 55%, transparent)'
+                : '0 0 10px color-mix(in srgb, var(--data-danger) 55%, transparent)',
+              transition: 'all 0.5s ease',
+              flexShrink: 0,
+            }} />
+          </div>
 
           {sensors && (
             <div style={{
-              display: 'flex', alignItems: 'center', gap: 4,
-              padding: '8px 14px', borderRadius: 14,
+              display: 'flex', alignItems: 'center', gap: 6,
+              padding: '10px 16px', borderRadius: 16,
+              minHeight: 44,
               background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
             }}>
-              <Thermometer size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+              <Thermometer size={18} color="var(--data-hot)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                 {sensors.temperature}°
               </span>
-              <Droplets size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
+              <Droplets size={18} color="var(--data-cool)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                 {sensors.humidity}%
               </span>
-              <Wind size={14} color="var(--text-tertiary)" />
-              <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+              <Wind size={18} color="var(--text-tertiary)" strokeWidth={1.8} />
+              <span className="num" style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
                 {sensors.pm25}
               </span>
             </div>