{
  "project_name": "RBS REGAL BUSINESS SUITE",
  "theme_and_archetype": {
    "theme": "DARK/LIGHT HYBRID",
    "archetype": "4 (Swiss & High-Contrast) + Premium SaaS Luxury",
    "rationale": "High contrast split layout. Left side is grounded, secure, and clear (Light). Right side is immersive, enterprise-grade, and aspirational (Dark, Royal Blue)."
  },
  "typography": {
    "font_stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    "rules": {
      "headings": "font-bold tracking-tight text-slate-900 dark:text-white",
      "body": "text-slate-600 dark:text-slate-300 leading-relaxed",
      "labels": "text-xs font-semibold tracking-[0.05em] uppercase text-slate-500"
    }
  },
  "color_tokens": {
    "primary": "#1D4ED8",
    "primary_hover": "#1E40AF",
    "royal_blue_bg": "#0A1128",
    "sky_glow": "#38BDF8",
    "surface_white": "#FFFFFF",
    "surface_glass": "rgba(255, 255, 255, 0.03)",
    "border_glass": "rgba(255, 255, 255, 0.1)",
    "text_on_white": "#0F172A",
    "text_on_blue": "#F8FAFC"
  },
  "layout_breakdown": {
    "global": "h-screen w-full flex overflow-hidden bg-slate-50",
    "mobile_strategy": "On viewport < 1024px (lg), hide the entire right panel. Center the left panel. Add a compact 'RBS Regal' branding strip at the top of the mobile view.",
    "left_panel": {
      "wrapper": "w-full lg:w-[480px] xl:w-[540px] flex-shrink-0 flex flex-col justify-center px-8 sm:px-12 bg-white relative z-10 shadow-[20px_0_40px_rgba(0,0,0,0.05)]",
      "header_branding": "text-2xl font-black tracking-tighter text-slate-900 mb-2 flex items-center gap-3",
      "status_pill": "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 text-emerald-600 text-xs font-bold tracking-wide border border-emerald-200 mb-8 w-max",
      "typography": {
        "title": "text-3xl font-bold tracking-tight text-slate-900 mb-3",
        "subtitle": "text-sm text-slate-500 leading-relaxed mb-8"
      },
      "form_elements": {
        "input_wrapper": "space-y-4",
        "label": "text-sm font-medium text-slate-700",
        "input": "w-full h-12 px-4 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all",
        "button": "w-full h-12 mt-6 bg-blue-700 hover:bg-blue-800 text-white font-semibold rounded-lg shadow-[0_4px_14px_0_rgba(29,78,216,0.39)] hover:shadow-[0_6px_20px_rgba(29,78,216,0.23)] hover:-translate-y-[1px] transition-all duration-200"
      },
      "footer": "mt-auto pt-8 flex items-center justify-between text-xs text-slate-400 font-medium",
      "test_ids": {
        "email_input": "login-email-input",
        "password_input": "login-password-input",
        "submit_button": "login-submit-button",
        "status_indicator": "system-status-indicator"
      }
    },
    "right_panel": {
      "wrapper": "hidden lg:flex flex-1 relative bg-[#0A1128] flex-col items-center justify-center p-12 overflow-y-auto overflow-x-hidden",
      "background_effects": {
        "grid": "absolute inset-0 opacity-20 pointer-events-none z-0",
        "grid_css": "background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);",
        "glow_orb_1": "absolute top-1/4 left-1/4 w-[40vw] h-[40vw] bg-blue-600/20 rounded-full blur-[120px] pointer-events-none",
        "glow_orb_2": "absolute bottom-1/4 right-1/4 w-[30vw] h-[30vw] bg-sky-400/10 rounded-full blur-[100px] pointer-events-none"
      },
      "fake_3d_hero": {
        "container": "relative w-64 h-64 mx-auto mb-16 z-10 perspective-[1000px] animate-float",
        "base_css": "transform-style: preserve-3d; transform: rotateX(20deg) rotateY(-20deg);",
        "layers": {
          "shadow": "absolute inset-0 bg-sky-500/30 blur-2xl transform translate-y-12 translate-z-[-50px]",
          "main_block": "absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-900 rounded-2xl border border-white/20 backdrop-blur-md flex items-center justify-center shadow-[inset_0_0_40px_rgba(255,255,255,0.2),_20px_20px_40px_rgba(0,0,0,0.8)]",
          "logo_text": "text-5xl font-black text-white tracking-tighter drop-shadow-[0_0_15px_rgba(255,255,255,0.5)] transform translate-z-[30px]"
        }
      },
      "typography": {
        "title": "text-4xl xl:text-5xl font-bold tracking-tight text-white mb-4 text-center z-10",
        "subtitle": "text-lg text-blue-200/80 text-center max-w-2xl mb-12 z-10"
      },
      "feature_grid": {
        "wrapper": "grid grid-cols-2 xl:grid-cols-4 gap-4 w-full max-w-5xl z-10",
        "card_classes": "relative group p-5 rounded-xl bg-white/[0.02] hover:bg-white/[0.04] border border-white/5 hover:border-sky-400/30 backdrop-blur-md transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgba(56,189,248,0.1)]",
        "icon_wrapper": "w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-3 text-sky-400 group-hover:scale-110 transition-transform group-hover:text-sky-300",
        "title": "text-sm font-semibold text-white mb-1",
        "items": [
          "GST Ready", "Smart Accounting", "AI Insights", "Inventory Control", 
          "Multi User", "Multi Company", "Offline + Fast", "Secure & Reliable"
        ]
      }
    },
    "below_the_fold": {
      "strategy": "Since scroll on a desktop login screen feels unoptimized, integrate the 'Second Hero Section' content into a highly compact, marquee or rotating text banner at the absolute bottom of the Right Panel. The tagline 'One Suite · Complete Control · Business Growth · Future Ready' should sit at the bottom center of the Right Panel."
    }
  },
  "css_animations": {
    "instructions": "Add these to tailwind.config.js OR inside a global CSS file.",
    "keyframes": {
      "float": "{ '0%, 100%': { transform: 'translateY(0) rotateX(20deg) rotateY(-20deg)' }, '50%': { transform: 'translateY(-15px) rotateX(22deg) rotateY(-18deg)' } }",
      "pulse-glow": "{ '0%, 100%': { opacity: 0.5, transform: 'scale(1)' }, '50%': { opacity: 0.8, transform: 'scale(1.05)' } }",
      "fade-in-up": "{ '0%': { opacity: 0, transform: 'translateY(15px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } }"
    },
    "utilities": {
      "animate-float": "float 6s ease-in-out infinite",
      "animate-glow": "pulse-glow 3s ease-in-out infinite",
      "animate-fade-in-up": "fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards"
    }
  },
  "acceptance_criteria": [
    "No external fonts or 3D libraries (Three.js) are loaded.",
    "Left panel uses strict white/slate/emerald hierarchy with extremely high clarity.",
    "Right panel grid and background glows render flawlessly using only standard CSS.",
    "3D RBS object creates depth via CSS transforms and nested drop-shadows/inset-shadows.",
    "Status indicator clearly defaults to online with correct data-testid.",
    "Hover states on all 8 cards trigger a sky-blue border glow and slight upward lift.",
    "On screens < 1024px, the complex right panel is hidden to prioritize fast login."
  ],
  "instructions_to_main_agent": [
    "1. Replace existing layout in /app/frontend/src/pages/Login.jsx with a full-screen flex layout.",
    "2. DO NOT delete existing logic (offline checks, 'skip-tour' parsing, form state). Preserve all React hooks.",
    "3. Implement the Right Panel 3D object purely with the CSS provided in 'fake_3d_hero' (transform-style: preserve-3d).",
    "4. Use Lucide-react for the 8 feature card icons (e.g., Receipt, Calculator, Brain, Box, Users, Building2, Zap, Shield).",
    "5. Map all interactive elements to the defined data-testids.",
    "6. No images required. Do not place dummy URLs."
  ]
}