Add photo frame idle mode and switch to Skylight-style theme

- After 5 min of no touch/motion, dashboard hides behind a fullscreen
  photo slideshow with centered time and date overlay
- Photos loaded from PHOTOS_PATH env var (defaults to ~/Pictures/dashboard)
  via IPC + file:// URLs; traversal-guarded, recursive up to 2 levels
- Motion or touch exits idle back to dashboard
- Theme repainted warm cream / sage / stone ink with Nunito font and
  rounded cards; dark tokens kept so component classes still resolve
- Adds PHOTO_FRAME.md with Samba cifs mount + systemd env instructions

tailwind.config.js

@@ -7,41 +7,49 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // Modern dark theme
+        // Skylight-style warm light theme.
+        // Token names kept as "dark.*" so existing components don't need class changes.
         dark: {
-          primary: '#0f0f0f',
-          secondary: '#171717',
-          tertiary: '#1f1f1f',
-          elevated: '#262626',
-          hover: '#2a2a2a',
-          border: '#2e2e2e',
-          'border-light': '#3a3a3a',
+          primary: '#faf6f0',      // page bg - warm cream
+          secondary: '#ffffff',     // card bg - white
+          tertiary: '#f5ede1',      // subtle panels / compact rows
+          elevated: '#ffffff',      // elevated cards
+          hover: '#ede2cf',         // hover states
+          border: '#ebe0cc',        // soft warm borders
+          'border-light': '#d9cab0',
         },
-        // Blue accent
+        // Sage accent (Skylight uses muted greens/peach, not blue)
         accent: {
-          DEFAULT: '#3b82f6',
-          light: '#60a5fa',
-          dark: '#2563eb',
+          DEFAULT: '#7fa894',       // sage
+          light: '#a0c2b1',
+          dark: '#5e8a76',
+        },
+        // Warm ink text scale
+        ink: {
+          DEFAULT: '#3a322a',       // primary dark text
+          muted: '#6b5f51',
+          subtle: '#8a7d6e',
+          faint: '#b0a494',
         },
-        // Status colors
         status: {
-          success: '#22c55e',
-          warning: '#f59e0b',
-          error: '#ef4444',
+          success: '#4a9d7a',       // muted green
+          warning: '#d99a4a',       // warm amber
+          error: '#c75b5b',         // muted brick
         },
-        // Legacy imperial colors (for gradual migration)
+        // Legacy imperial tokens retained so old references don't break
         imperial: {
-          black: '#0a0a0a',
-          dark: '#1a1a1a',
-          medium: '#2a2a2a',
-          light: '#3a3a3a',
-          red: '#cc0000',
-          'red-dark': '#990000',
-          'red-light': '#ff3333',
+          black: '#faf6f0',
+          dark: '#f5ede1',
+          medium: '#ebe0cc',
+          light: '#d9cab0',
+          red: '#c75b5b',
+          'red-dark': '#a84545',
+          'red-light': '#d97777',
         },
       },
       fontFamily: {
-        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        sans: ['Nunito', 'Quicksand', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        display: ['Nunito', 'Quicksand', 'sans-serif'],
       },
       fontSize: {
         'touch': '1.125rem',
@@ -51,18 +59,23 @@ module.exports = {
         'touch-lg': '56px',
       },
       borderRadius: {
-        'xl': '0.75rem',
-        '2xl': '1rem',
+        'xl': '1rem',
+        '2xl': '1.5rem',
+        '3xl': '2rem',
       },
       boxShadow: {
-        'glow-green': '0 0 8px rgba(34, 197, 94, 0.3)',
-        'glow-blue': '0 0 8px rgba(59, 130, 246, 0.3)',
-        'glow-orange': '0 0 8px rgba(249, 115, 22, 0.3)',
+        'card': '0 2px 8px rgba(58, 50, 42, 0.06), 0 1px 2px rgba(58, 50, 42, 0.04)',
+        'card-lg': '0 8px 24px rgba(58, 50, 42, 0.08), 0 2px 6px rgba(58, 50, 42, 0.05)',
+        'glow-green': '0 0 12px rgba(127, 168, 148, 0.35)',
+        'glow-blue': '0 0 12px rgba(127, 168, 148, 0.35)',
+        'glow-orange': '0 0 12px rgba(217, 154, 74, 0.35)',
       },
       animation: {
         'fade-in': 'fade-in 0.2s ease-out',
+        'fade-slow': 'fade-in 1.2s ease-out',
         'slide-up': 'slide-up 0.3s ease-out',
         'pulse': 'pulse 2s ease-in-out infinite',
+        'ken-burns': 'ken-burns 20s ease-in-out infinite alternate',
       },
       keyframes: {
         'fade-in': {
@@ -77,6 +90,10 @@ module.exports = {
           '0%, 100%': { opacity: '1' },
           '50%': { opacity: '0.5' },
         },
+        'ken-burns': {
+          '0%': { transform: 'scale(1.0) translate(0, 0)' },
+          '100%': { transform: 'scale(1.08) translate(-1%, -1%)' },
+        },
       },
     },
   },