{
  "theme_strategy": {
    "preferred_theme": "light",
    "rationale": "NGO, Educational, and Government-style platforms require high legibility and trust. A light theme with deep, authoritative accents works best for reading dense Hindi (Devanagari) data tables and processing forms.",
    "archetype": "Swiss & High-Contrast (Authority, Clarity, Truth) mixed with Organic & Earthy (Trust)."
  },
  "colors": {
    "primary": {
      "hex": "#1e1b4b",
      "name": "Midnight Indigo",
      "usage": "Sidebar background, primary buttons, major headings. Conveys authority and official structure."
    },
    "accent": {
      "hex": "#f59e0b",
      "name": "Olympiad Gold",
      "usage": "Calls to action, wallet balances, important highlights, active states."
    },
    "background": {
      "hex": "#fafaf9",
      "name": "Soft Paper",
      "usage": "Main app background. Prevents eye strain compared to pure white."
    },
    "surface": {
      "hex": "#ffffff",
      "name": "Pure White",
      "usage": "Dashboard cards, data tables, form containers. Requires a 1px border (#e7e5e4) for definition."
    },
    "text": {
      "main": "#1c1917",
      "muted": "#57534e",
      "inverse": "#ffffff"
    },
    "status": {
      "success": { "bg": "#dcfce7", "text": "#166534", "border": "#bbf7d0" },
      "warning": { "bg": "#fef08a", "text": "#854d0e", "border": "#fde047" },
      "error": { "bg": "#fee2e2", "text": "#991b1b", "border": "#fecaca" }
    },
    "rules": [
      "Never use pure #000000 or #808080. Always tint neutrals with a warm stone/brown undertone (e.g., Tailwind's Stone scale).",
      "For CTAs, use primary or accent. Limit the use of the primary color outside of navigation and buttons to prevent overwhelming the layout.",
      "Ensure text contrast meets APCA/WCAG AA standards, especially for Hindi glyphs which have complex top-bars (Shirekha)."
    ]
  },
  "typography": {
    "font_families": {
      "heading": "'Khand', 'Noto Sans Devanagari', sans-serif",
      "body": "'Hind', 'Noto Sans Devanagari', sans-serif",
      "mono": "'JetBrains Mono', monospace"
    },
    "hierarchy": {
      "h1": "text-4xl sm:text-5xl font-black tracking-tight",
      "h2": "text-2xl sm:text-3xl font-bold tracking-tight",
      "h3": "text-xl sm:text-2xl font-semibold",
      "h4": "text-lg sm:text-xl font-medium",
      "body": "text-base leading-relaxed",
      "small": "text-sm text-muted-foreground",
      "overline": "text-xs font-bold uppercase tracking-[0.2em]"
    },
    "rules": [
      "Import Google Fonts 'Khand' and 'Hind' in index.html or global CSS.",
      "Hindi text often appears smaller than English text at the same pixel size. Maintain text-base (16px) minimum for readability.",
      "Do not use tracking-tight on body text in Hindi, as it can cause matras (vowel signs) to collide."
    ]
  },
  "layouts": {
    "global_structure": "Sidebar + Header + Main Content Area",
    "sidebar": "Fixed width 260px. Deep Indigo background (#1e1b4b) with white text. High contrast active states.",
    "header": "Sticky top, glassmorphism (backdrop-blur-xl bg-white/70), contains Wallet Balance, Role Indicator (Super Admin, Coordinator, Volunteer), and Profile.",
    "dashboard_grid": "High Density Grid for State Manager (grid-cols-1 md:grid-cols-3 lg:grid-cols-4), wide spacing (gap-6).",
    "spacing_system": "Use generous spacing. Cards should have p-6 or p-8. Sections separated by gap-8.",
    "rules": [
      "Never center-align form inputs or dense data. Left-align for better readability.",
      "Use optical alignment for icons and text.",
      "Grid children must be direct children of grid containers."
    ]
  },
  "components": {
    "buttons": "Pill-shaped or slightly rounded (rounded-md). Smooth hover transitions (transform -translate-y-[1px] shadow-md).",
    "cards": "Flat solid surfaces. 1px solid border (border-border). Soft ambient shadow on hover.",
    "data_tables": "Shadcn UI tables. Must have clear borders on rows. Include contextual actions (Accept/Reject) as icon buttons or dropdowns.",
    "forms": "Use Shadcn Input, Select, and Form. For document uploads (Aadhaar, Passbook), use a dashed border dropzone with a central Lucide icon.",
    "badges": "Pill-shaped (rounded-full). Use status colors defined in the theme for Pending/Verified/Rejected.",
    "id_card_preview": "Design a specific stylized component that looks like a physical ID card (aspect-ratio for vertical ID, standard MOF logo placement, photo placeholder).",
    "logo": "Mock logo text: 'Max Olympiad Foundation'. Use an icon like 'GraduationCap' or 'BookOpen' from lucide-react next to the text. Make it prominent in the sidebar."
  },
  "visual_enhancers": {
    "borders": "Grid borders pattern for data-heavy sections (border-collapse style).",
    "shadows": "Use layered shadows. Ambient + direct shadow for active states.",
    "icons": "lucide-react (default for Shadcn) or @phosphor-icons/react for deeper dashboard aesthetics. Do not use emojis.",
    "glassmorphism": "Use ONLY for the sticky header and dropdown menus. Background white/80 with backdrop-blur-xl and 1px border-white/20."
  },
  "motion": {
    "transitions": "Specific properties only (e.g., transition-transform, transition-colors). Never use 'transition-all'.",
    "hover_states": "Cards lift slightly (-translate-y-1). Buttons shift color and gain shadow.",
    "list_animations": "Staggered entrance for table rows or dashboard widgets using framer-motion (if added) or basic CSS animations."
  },
  "accessibility": {
    "contrast": "Strict adherence to 4.5:1 ratio. Test Hindi fonts especially over colored backgrounds.",
    "focus_states": "High contrast focus rings (ring-2 ring-primary ring-offset-2) on all inputs and buttons.",
    "test_ids": "All interactive elements MUST have data-testid attributes (e.g., data-testid='login-submit', data-testid='approve-volunteer-btn')."
  },
  "media": {
    "image_urls": {
      "dashboard_hero": {
        "url": "https://images.pexels.com/photos/3231359/pexels-photo-3231359.jpeg",
        "description": "Indian schoolgirls in uniform studying. Good for welcome banners in the dashboard."
      },
      "volunteer_placeholder": {
        "url": "https://images.unsplash.com/photo-1524069290683-0457abfe42c3?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2MzR8MHwxfHNlYXJjaHwyfHx2b2x1bnRlZXIlMjBoZWxwaW5nJTIwc2Nob29sfGVufDB8fHx8MTc4NDIyMTY4Nnww&ixlib=rb-4.1.0&q=85",
        "description": "Children taking pictures / engaging. Good for volunteer dashboard banners."
      }
    },
    "rules": [
      "Never use placeholder URLs (via.placeholder.com).",
      "Ensure images have descriptive alt texts.",
      "If overlaying text on images, use bg-black/40 overlay to preserve contrast."
    ]
  },
  "3d_libraries": {
    "recommendation": "Not strictly required for this administrative dashboard. However, Recharts should be used for Wallet and School Visit analytics (2D charts).",
    "data_viz": "Use Shadcn charts (Recharts wrapper) for showing district-wise performance or wallet payouts."
  },
  "instructions_to_main_agent": [
    "You are building a multi-role NGO management system. Treat the UI as a highly professional, trustworthy environment.",
    "Implement a robust layout with a Sidebar (containing navigation specific to the logged-in role) and a Top Header.",
    "Create 3 distinct dashboards based on roles: State Manager, District Coordinator, and Volunteer.",
    "For the 'Max Olympiad Foundation' logo, create a component combining a Lucide icon (e.g., Award or GraduationCap) and typography.",
    "Forms must support Hindi text input seamlessly. Ensure inputs have sufficient padding and height (h-10 minimum).",
    "Use standard HTML inputs customized via Shadcn or build custom file upload dropzones for Aadhaar/Passbook.",
    "Do not hallucinate complex backend logic, mock the API responses for the different roles."
  ],
  "UNIVERSAL GUIDELINES FOR MAIN AGENT": [
    "You tend to converge toward generic outputs. Avoid this: make creative, distinctive frontends that surprise and delight.",
    "Dark colors look good when used independently without gradients. DO NOT use dark colors as gradients.",
    "Don't make generic centered layouts. Use F-pattern and Grid layouts.",
    "Create depth through layered design elements with z-index hierarchy.",
    "Use glass-morphism effects with backdrop filters (12-24px blur) only for headers/modals, NOT transparent backgrounds for content areas.",
    "You MUST NOT apply universal transition (e.g., transition: all). Add transitions for specific interactive elements.",
    "You MUST NOT center align the app container, i.e., do not add `.App { text-align: center; }`. Left-align primarily.",
    "Always use modern button styles (pill-shaped or rounded-md) with interaction animations.",
    "NEVER use AI assistant Emoji characters like 🤖🧠💭💡🔮🎯 for icons. Use lucide-react.",
    "Every interaction needs micro-animations - hover states, focus states, etc.",
    "Use 2-3x more spacing than feels comfortable. Cramped designs look cheap.",
    "All interactive and key informational elements MUST include a data-testid attribute.",
    "Use `sonner` for toasts. Sonner component is located in `/app/src/components/ui/sonner.tsx`."
  ]
}