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

@@ -14,35 +14,44 @@ interface DeviceCardProps {
   extraInfo?: string
 }
 
-function getDeviceIcon(id: string, isOn: boolean) {
-  const color = isOn ? '#a5b4fc' : 'rgba(255,255,255,0.35)'
-  const size = 24
-  if (id.includes('air_purifier')) return <Fan size={size} color={color} />
-  if (id.includes('light')) return <Lightbulb size={size} color={isOn ? '#fbbf24' : color} />
-  if (id.includes('tv')) return <Tv size={size} color={color} />
-  if (id.includes('ac')) return <Snowflake size={size} color={isOn ? '#22d3ee' : color} />
-  return <Power size={size} color={color} />
+type DeviceKind = 'air_purifier' | 'light' | 'tv' | 'ac' | 'default'
+
+function getDeviceKind(id: string): DeviceKind {
+  if (id.includes('air_purifier')) return 'air_purifier'
+  if (id.includes('light')) return 'light'
+  if (id.includes('tv')) return 'tv'
+  if (id.includes('ac')) return 'ac'
+  return 'default'
 }
 
-function getDeviceGradient(id: string): string {
-  if (id.includes('air_purifier')) return 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.12))'
-  if (id.includes('light')) return 'linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.1))'
-  if (id.includes('tv')) return 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.1))'
-  if (id.includes('ac')) return 'linear-gradient(135deg, rgba(34,211,238,0.18), rgba(6,182,212,0.1))'
-  return 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
+// Каждый тип устройства — свой data-token (а не хардкод hex)
+const DEVICE_ACCENT: Record<DeviceKind, string> = {
+  air_purifier: 'var(--data-violet)',
+  light:        'var(--data-warm)',
+  tv:           'var(--data-info)',
+  ac:           'var(--data-cool)',
+  default:      'var(--accent)',
 }
 
-function getDeviceBorder(id: string): string {
-  if (id.includes('air_purifier')) return 'rgba(129,140,248,0.25)'
-  if (id.includes('light')) return 'rgba(251,191,36,0.25)'
-  if (id.includes('tv')) return 'rgba(99,102,241,0.25)'
-  if (id.includes('ac')) return 'rgba(34,211,238,0.25)'
-  return 'rgba(129,140,248,0.2)'
+function getDeviceIcon(kind: DeviceKind, isOn: boolean) {
+  const color = isOn ? DEVICE_ACCENT[kind] : 'var(--text-tertiary)'
+  const size = 26
+  const strokeWidth = 1.9
+  switch (kind) {
+    case 'air_purifier': return <Fan size={size} color={color} strokeWidth={strokeWidth} />
+    case 'light':        return <Lightbulb size={size} color={color} strokeWidth={strokeWidth} />
+    case 'tv':           return <Tv size={size} color={color} strokeWidth={strokeWidth} />
+    case 'ac':           return <Snowflake size={size} color={color} strokeWidth={strokeWidth} />
+    default:             return <Power size={size} color={color} strokeWidth={strokeWidth} />
+  }
 }
 
 export default function DeviceCard({
   id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
 }: DeviceCardProps) {
+  const kind = getDeviceKind(id)
+  const accent = DEVICE_ACCENT[kind]
+
   const [isOn, setIsOn] = useState(initialState)
   const [synced, setSynced] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -78,33 +87,36 @@ export default function DeviceCard({
     }
   }
 
+  const activeBg = `color-mix(in srgb, ${accent} 14%, var(--surface-1))`
+  const activeBorder = `color-mix(in srgb, ${accent} 35%, var(--border-subtle))`
+  const activeGlow = `color-mix(in srgb, ${accent} 22%, transparent)`
+
   return (
     <div style={{
-      background: isOn ? getDeviceGradient(id) : 'rgba(255,255,255,0.03)',
-      backdropFilter: 'blur(20px)',
-      WebkitBackdropFilter: 'blur(20px)',
-      border: isOn ? `1px solid ${getDeviceBorder(id)}` : '1px solid rgba(255,255,255,0.06)',
+      background: isOn ? activeBg : 'var(--surface-1)',
+      border: `1px solid ${isOn ? activeBorder : 'var(--border-subtle)'}`,
       borderRadius: 22,
       padding: '20px 18px 18px',
-      minHeight: 150,
+      minHeight: 160,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
       transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
-      boxShadow: isOn ? '0 8px 32px rgba(99,102,241,0.1)' : '0 2px 8px rgba(0,0,0,0.1)',
+      boxShadow: isOn ? `0 8px 32px -12px ${activeGlow}` : 'var(--shadow-sm)',
       position: 'relative',
       overflow: 'hidden',
+      opacity: isMock ? 0.88 : 1,
     }}>
-      {/* Subtle glow effect when on */}
+      {/* Subtle accent glow when on */}
       {isOn && (
         <div style={{
           position: 'absolute',
           top: -30,
           right: -30,
-          width: 100,
-          height: 100,
+          width: 120,
+          height: 120,
           borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
+          background: `radial-gradient(circle, color-mix(in srgb, ${accent} 25%, transparent) 0%, transparent 70%)`,
           pointerEvents: 'none',
         }} />
       )}
@@ -112,36 +124,40 @@ export default function DeviceCard({
       {/* Top: icon + toggle */}
       <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
         <div
-          className={isOn ? (id.includes('air_purifier') ? 'fan-spinning' : id.includes('light') ? 'light-on-pulse' : 'device-active-breathe') : ''}
+          className={isOn ? (kind === 'air_purifier' ? 'fan-spinning' : kind === 'light' ? 'light-on-pulse' : 'device-active-breathe') : ''}
           style={{
-            width: 48, height: 48, borderRadius: 16,
-            background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
+            width: 52, height: 52, borderRadius: 16,
+            background: isOn
+              ? `color-mix(in srgb, ${accent} 20%, var(--surface-2))`
+              : 'var(--surface-2)',
+            border: `1px solid ${isOn ? `color-mix(in srgb, ${accent} 35%, transparent)` : 'var(--border-subtle)'}`,
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             transition: 'all 0.3s ease',
-            boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
           }}>
-          {getDeviceIcon(id, isOn)}
+          {getDeviceIcon(kind, isOn)}
         </div>
 
+        {/* Toggle switch — 60x36, touch-friendly */}
         <button
           onClick={toggle}
-          disabled={loading}
+          disabled={loading || isMock}
+          aria-label={isOn ? `Выключить ${name}` : `Включить ${name}`}
           style={{
-            width: 54, height: 30, borderRadius: 15,
+            width: 60, height: 36, borderRadius: 18,
             background: isOn
-              ? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
-              : 'rgba(255,255,255,0.08)',
-            position: 'relative', border: 'none', cursor: 'pointer',
+              ? `linear-gradient(90deg, ${accent}, color-mix(in srgb, ${accent} 70%, black))`
+              : 'var(--off-color)',
+            position: 'relative', border: 'none', cursor: isMock ? 'not-allowed' : 'pointer',
             flexShrink: 0,
             transition: 'all 0.3s ease',
             opacity: loading ? 0.6 : 1,
-            boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
+            boxShadow: isOn ? `0 0 18px -2px ${activeGlow}` : 'none',
           }}
         >
           <span style={{
             position: 'absolute', top: 4,
             left: isOn ? 28 : 4,
-            width: 22, height: 22, borderRadius: '50%',
+            width: 28, height: 28, borderRadius: '50%',
             background: '#fff',
             boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
             transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
@@ -152,14 +168,14 @@ export default function DeviceCard({
 
       {/* Bottom: name + status */}
       <div style={{ position: 'relative', zIndex: 1 }}>
-        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
+        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.3 }}>
           {name}
         </div>
         <div style={{
           fontSize: 12,
-          color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
+          color: isOn ? accent : 'var(--text-secondary)',
           marginTop: 4,
-          fontWeight: 500,
+          fontWeight: 600,
         }}>
           {isOn ? 'Включён' : 'Выключен'}
           {extraInfo && isOn ? ` · ${extraInfo}` : ''}
@@ -168,8 +184,10 @@ export default function DeviceCard({
           <div style={{
             fontSize: 10,
             color: 'var(--text-tertiary)',
-            marginTop: 2,
-            fontStyle: 'italic',
+            marginTop: 3,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
           }}>demo</div>
         )}
       </div>