{
  "app_name": "PLAY CHANNELS",
  "personality": "6 Glass / Luxe DARK (Adapted for Cinematic TV/Mobile Streaming)",
  "personality_one_liner": "A premium, cinematic dark-mode experience that feels expensive and immersive, prioritizing high-contrast focus states for TV and fluid surfaces for mobile.",
  "color": {
    "surface": "#0A0A0A",
    "onSurface": "#FFFFFF",
    "surfaceSecondary": "#141414",
    "onSurfaceSecondary": "#E0E0E0",
    "surfaceTertiary": "#1F1F1F",
    "onSurfaceTertiary": "#CCCCCC",
    "surfaceInverse": "#FFFFFF",
    "onSurfaceInverse": "#0A0A0A",
    "brand": "#D91636",
    "brandPrimary": "#D91636",
    "onBrandPrimary": "#FFFFFF",
    "brandSecondary": "#8C0E23",
    "onBrandSecondary": "#FFFFFF",
    "brandTertiary": "#3D0A14",
    "onBrandTertiary": "#FFD1D9",
    "success": "#00B862",
    "onSuccess": "#FFFFFF",
    "warning": "#F5A623",
    "onWarning": "#000000",
    "error": "#FF3B30",
    "onError": "#FFFFFF",
    "info": "#3A3A3C",
    "onInfo": "#FFFFFF",
    "border": "#2C2C2E",
    "borderStrong": "#FFFFFF",
    "divider": "#1C1C1E",
    "muted": "#8E8E93",
    "onBrand": "#FFFFFF"
  },
  "typography": {
    "displayFontFamily": "Outfit",
    "textFontFamily": "Manrope",
    "scale": {
      "sm": 12,
      "base": 14,
      "lg": 16,
      "xl": 20,
      "2xl": 24
    }
  },
  "spacing": {
    "rule": "Use generous overscan margins (48px sides, 27px top/bottom) for TV targets. Mobile uses standard md/lg padding. Elements must have enough internal padding to accommodate scale-up focus animations.",
    "xs": 4,
    "sm": 8,
    "md": 12,
    "lg": 16,
    "xl": 24,
    "2xl": 32,
    "3xl": 48
  },
  "radius_tokens": {
    "sm": 6,
    "md": 12,
    "lg": 20,
    "pill": 999
  },
  "shadow_tier": "2",
  "navigation": "bottom_tabs_mobile_side_rail_tv",
  "icon_set": "Phosphor",
  "glassmorphism": {
    "enabled": "true",
    "do's": [
      "Use on mobile bottom tabs, sticky headers, and hero card overlays.",
      "Ensure heavy tint (≥75% surface) behind blur for readability."
    ],
    "dont's": [
      "Do not use heavy blur on TV targets if performance drops; fallback to solid surfaceSecondary.",
      "Never blur video player controls."
    ]
  },
  "platform_libraries": {
    "glass": {
      "ios": "expo-glass-effect",
      "android": "expo-blur",
      "low_end_android_fallback": "solid surfaceSecondary"
    },
    "image": "expo-image",
    "blur": "expo-blur",
    "bottom_sheet": "@gorhom/bottom-sheet",
    "animation": "react-native-reanimated",
    "gesture": "react-native-gesture-handler"
  },
  "screens": [
    {
      "name": "Login",
      "purpose": "Secure entry point with brand logo, credentials, and session persistence.",
      "states": {
        "loading": "Centered brand-colored spinner",
        "empty": "N/A",
        "error": "Inline red text below inputs or toast"
      },
      "layout": "Centered single-column form. Large logo at top. Inputs for user/pass with 'eye' icon for visibility. 'Keep me logged in' checkbox. Primary CTA at bottom. TV focus: highlight inputs with borderStrong."
    },
    {
      "name": "Home",
      "purpose": "Main discovery feed with cinematic hero banners and horizontal content carousels.",
      "states": {
        "loading": "Skeleton rows of posters",
        "empty": "N/A",
        "error": "Retry button with abstract dark error illustration"
      },
      "layout": "Top: Full-bleed Hero banner (cinematic poster) with vertical gradient scrim (transparent to surface). Foreground: Title, Synopsis, 'Play' and 'Details' buttons. Below: Horizontal ScrollViews (Carousels) for 'Featured', 'Trending', categories. TV: D-pad focus scales posters by 1.1x and applies borderStrong."
    },
    {
      "name": "MoviesAndSeries",
      "purpose": "Library browsing and detailed view for VOD content, including seasons for series.",
      "states": {
        "loading": "Grid skeleton",
        "empty": "Icon + 'No content found'",
        "error": "Retry button"
      },
      "layout": "Grid layout (2-col mobile, 4-6 col TV). Detail modal/screen: Large cover image with scrim, title, metadata (year, rating), synopsis, 'Add to Favorites'. For series: a segmented control or Dropdown for Seasons, followed by a vertical list of episodes."
    },
    {
      "name": "LiveChannels",
      "purpose": "Real-time television broadcast viewing with EPG or channel list.",
      "states": {
        "loading": "Skeleton list",
        "empty": "'No channels available'",
        "error": "Retry connection"
      },
      "layout": "Split view or horizontal list. TV: Left side list of channels (icons), right side shows currently playing preview and EPG timeline. Mobile: Stacked list of live channels with progress bars showing current show duration."
    },
    {
      "name": "VPN",
      "purpose": "Integrated security and proxy management.",
      "states": {
        "loading": "Connecting animation on shield",
        "empty": "N/A",
        "error": "Connection failed toast"
      },
      "layout": "Central large Shield icon denoting status (Green=Protected, Gray=Off). Large toggle button. Below: Current IP / Protected DNS status. List of available servers to connect, with ping indicators."
    },
    {
      "name": "Player",
      "purpose": "Immersive video playback with minimal UI overlay.",
      "states": {
        "loading": "Spinner over black screen",
        "empty": "N/A",
        "error": "'Playback error' overlay"
      },
      "layout": "Full screen surfaceInverse (or black). Auto-hiding controls. Play/Pause, timeline scrubber, audio/subtitle toggles. TV: D-pad maps to scrubber and play/pause."
    }
  ],
  "images": {
    "hero_banner_1": {
      "url": "https://images.unsplash.com/photo-1627133805103-ce2d34ccdd37?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDJ8MHwxfHNlYXJjaHwxfHxjaW5lbWF0aWMlMjBtb3ZpZSUyMHBvc3RlciUyMGRhcmt8ZW58MHx8fHwxNzkzMzg2NTYzfDA&ixlib=rb-4.1.0&q=85",
      "alt": "Cinematic dark movie poster backdrop"
    },
    "hero_banner_2": {
      "url": "https://images.unsplash.com/photo-1791010484572-14b22492cf5d?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDJ8MHwxfHNlYXJjaHwzfHxjaW5lbWF0aWMlMjBtb3ZpZSUyMHBvc3RlciUyMGRhcmt8ZW58MHx8fHwxNzkzMzg2NTYzfDA&ixlib=rb-4.1.0&q=85",
      "alt": "Person walking past a dark movie poster"
    },
    "live_tv_preview": {
      "url": "https://images.unsplash.com/photo-1693328394659-e0782c606d25?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1NzB8MHwxfHNlYXJjaHwyfHxsaXZlJTIwdHYlMjBjaGFubmVscyUyMGJyb2FkY2FzdHxlbnwwfHx8fDE3OTMzODY1NjN8MA&ixlib=rb-4.1.0&q=85",
      "alt": "Broadcast studio representing live channels"
    },
    "vpn_shield_bg": {
      "url": "https://images.unsplash.com/photo-1751448555253-f39c06e29d82?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA4Mzl8MHwxfHNlYXJjaHwxfHx2cG4lMjBzZWN1cml0eSUyMHNoaWVsZCUyMGRhcmt8ZW58MHx8fHwxNzkzMzg2NTYzfDA&ixlib=rb-4.1.0&q=85",
      "alt": "Dark VPN security dashboard"
    }
  },
  "instructions_to_main_agent": [
    "IMPLEMENT EXPLICIT TV FOCUS STATES: All interactive elements (cards, buttons, inputs) MUST have a distinct `focused` state. Use `borderStrong` (White) and `transform: scale(1.05)` or `1.1` to clearly indicate the active element for D-pad navigation.",
    "OVERSCAN MARGINS: Ensure the root container of TV screens maintains a 5% margin (approx 48px sides, 27px top/bottom) to prevent UI cropping on older displays.",
    "NAVIGATION ADAPTABILITY: Mobile should use a bottom tab bar, while TV should use a side navigation rail to maximize horizontal space for content.",
    "CINEMATIC HERO SCRIMS: Hero banners on the Home screen must have a vertical gradient scrim (transparent to surface) covering the bottom 50% to ensure text readability.",
    "TYPOGRAPHY LEGIBILITY: Use 'Outfit' for display and 'Manrope' for body. Ensure base font sizes are large enough for a 10-foot viewing experience (base 14px mobile, scale up for TV).",
    "DARK THEME ONLY: The app is strictly dark mode. Do not implement a light theme. Use deep ruby (#D91636) exclusively as the primary brand accent, avoiding Netflix's exact red but keeping the premium streaming feel."
  ]
}