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/CalendarTab.tsx

@@ -57,7 +57,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
   }
 
   return (
-    <div style={{
+    <div data-swipe-ignore style={{
       position: 'fixed', inset: 0,
       background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)',
       zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -79,13 +79,13 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
           <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
             Новое событие
           </span>
-          <button onClick={onClose} style={{
-            width: 32, height: 32, borderRadius: 10,
-            background: 'rgba(255,255,255,0.05)',
+          <button onClick={onClose} aria-label="Закрыть" style={{
+            width: 44, height: 44, borderRadius: 12,
+            background: 'var(--surface-2)',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             color: 'var(--text-secondary)',
           }}>
-            <X size={16} />
+            <X size={18} />
           </button>
         </div>
 
@@ -301,7 +301,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
   }
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
       <div style={{
         background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
         border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
@@ -348,13 +348,13 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
                   Изменить
                 </button>
               )}
-              <button onClick={onClose} style={{
-                width: 32, height: 32, borderRadius: 10,
-                background: 'rgba(255,255,255,0.06)',
+              <button onClick={onClose} aria-label="Закрыть" style={{
+                width: 44, height: 44, borderRadius: 12,
+                background: 'var(--surface-2)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                 color: 'var(--text-secondary)',
               }}>
-                <X size={16} />
+                <X size={18} />
               </button>
             </div>
           </div>
@@ -543,7 +543,7 @@ function DayEventsModal({ day, month, year, events, onClose, onSelect }: {
   const label = date.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
       <div style={{
         background: 'rgba(18,18,35,0.95)', backdropFilter: 'blur(40px)',
         border: '1px solid rgba(255,255,255,0.08)', borderRadius: 24,
@@ -701,13 +701,13 @@ export default function CalendarTab() {
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <button onClick={prevMonth} style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <button onClick={prevMonth} aria-label="Предыдущий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               <ChevronLeft size={16} />
             </button>
             <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', minWidth: 180, textAlign: 'center' }}>
               {MONTHS[month]} {year}
             </span>
-            <button onClick={nextMonth} style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <button onClick={nextMonth} aria-label="Следующий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               <ChevronRight size={16} />
             </button>
           </div>
@@ -733,15 +733,19 @@ export default function CalendarTab() {
                 </button>
               )
             })}
-            <button onClick={() => setShowUpcoming(v => !v)} style={{
-              width: 36, height: 36, borderRadius: 12,
-              background: showUpcoming ? 'rgba(99,102,241,0.15)' : 'rgba(255,255,255,0.04)',
-              border: showUpcoming ? '1px solid rgba(129,140,248,0.25)' : '1px solid rgba(255,255,255,0.06)',
-              color: showUpcoming ? '#a5b4fc' : 'var(--text-secondary)',
+            <button onClick={() => setShowUpcoming(v => !v)} aria-label="Ближайшие события" style={{
+              width: 44, height: 44, borderRadius: 12,
+              background: showUpcoming
+                ? 'color-mix(in srgb, var(--accent) 18%, var(--surface-2))'
+                : 'var(--surface-2)',
+              border: showUpcoming
+                ? '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))'
+                : '1px solid var(--border-subtle)',
+              color: showUpcoming ? 'var(--accent)' : 'var(--text-secondary)',
               display: 'flex', alignItems: 'center', justifyContent: 'center',
               transition: 'all 0.25s ease',
             }}>
-              <List size={16} />
+              <List size={18} />
             </button>
             <button onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }} style={{
               display: 'flex', alignItems: 'center', gap: 6,