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

@@ -21,7 +21,11 @@ interface Note {
   updatedAt: string
 }
 
-const NOTE_COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#8b5cf6']
+// NOTE: заметки сохраняют свой цвет на всё время жизни —
+// храним hex, но генерим их из theme-aware CSS-переменных через computed style.
+// Для совместимости с существующими заметками оставляем hex-палитру,
+// но подобранную под новые data-токены (dark theme).
+const NOTE_COLORS = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#38bdf8', '#a78bfa']
 
 export default function NotesTab() {
   const [notes, setNotes] = useState<Note[]>([])
@@ -104,14 +108,21 @@ export default function NotesTab() {
       <div style={{ width: 260, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
           <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>Заметки</h2>
-          <button onClick={() => setShowCreate(v => !v)} style={{
-            width: 36, height: 36, borderRadius: 12,
-            background: showCreate ? 'rgba(255,255,255,0.06)' : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
-            border: showCreate ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(129,140,248,0.25)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            color: showCreate ? 'var(--text-secondary)' : '#a5b4fc',
-          }}>
-            {showCreate ? <X size={16} /> : <Plus size={16} />}
+          <button
+            onClick={() => setShowCreate(v => !v)}
+            aria-label={showCreate ? 'Отмена' : 'Создать заметку'}
+            style={{
+              width: 44, height: 44, borderRadius: 14,
+              background: showCreate
+                ? 'var(--surface-2)'
+                : 'color-mix(in srgb, var(--accent) 16%, var(--surface-2))',
+              border: showCreate
+                ? '1px solid var(--border-subtle)'
+                : '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color: showCreate ? 'var(--text-secondary)' : 'var(--accent)',
+            }}>
+            {showCreate ? <X size={18} /> : <Plus size={18} />}
           </button>
         </div>
 
@@ -148,6 +159,7 @@ export default function NotesTab() {
             <motion.div
               key={note.id}
               layout
+              data-swipe-ignore
               style={{ position: 'relative', borderRadius: 16, overflow: 'hidden' }}
             >
               {/* Delete reveal layer */}
@@ -260,13 +272,16 @@ export default function NotesTab() {
                     fontFamily: 'inherit', flex: 1, minWidth: 0,
                   }}
                 />
-                <button onClick={() => setConfirmDelete(activeNote)} style={{
-                  width: 32, height: 32, borderRadius: 10,
-                  background: 'rgba(239,68,68,0.08)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: '#f87171', flexShrink: 0,
-                }}>
-                  <Trash2 size={15} />
+                <button
+                  onClick={() => setConfirmDelete(activeNote)}
+                  aria-label="Удалить заметку"
+                  style={{
+                    width: 44, height: 44, borderRadius: 12,
+                    background: 'var(--data-danger-bg)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: 'var(--data-danger)', flexShrink: 0,
+                  }}>
+                  <Trash2 size={18} />
                 </button>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
@@ -414,6 +429,7 @@ export default function NotesTab() {
       {confirmDelete && (
         <div
           onClick={() => setConfirmDelete(null)}
+          data-swipe-ignore
           style={{
             position: 'fixed', inset: 0, zIndex: 100,
             background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',