/**
 * Post Fund Management Partner Portal — UI Design System & Theme Specification
 * 
 * Centralized configuration for all colors, typography, layout, WebGL effects, and component tokens.
 * This file is compiled along with the PartnerUI application.
 * 
 * To customize the PartnerUI theme, adjust the values below and the matching CSS
 * variables in `src/theme.css`.
 */

export const ThemeConfig = {
  metadata: {
    appId: 'PartnerUI',
    appName: 'Post Fund Management Partner Portal',
    description: 'External grantee and partner portal for drawdown requests, evidence submission, and milestone reporting',
    colorScheme: 'dark' as const,
    version: '1.0.0',
  },

  /* ==========================================================================
     1. TYPOGRAPHY & FONT SPECIFICATIONS
     ========================================================================= */
  typography: {
    fonts: {
      sans: "'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
      mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
    },
    googleFontsUrl:
      'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap',
    weights: {
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
    },
  },

  /* ==========================================================================
     2. COLOR PALETTE SPECIFICATIONS (Emerald / Teal Tech Aesthetic)
     ========================================================================= */
  colors: {
    // Primary Brand Accent (Emerald / Teal)
    primary: {
      50: '#ecfdf5',
      100: '#d1fae5',
      200: '#a7f3d0',
      300: '#6ee7b7',
      400: '#34d399',
      500: '#10b981', // Main Accent
      600: '#059669', // Action button hover
      700: '#047857',
      800: '#065f46',
      900: '#064e3b',
      950: '#022c22',
      contrastText: '#ffffff',
    },

    // Secondary Accent (Cyan / Sky for gradients & glows)
    secondary: {
      300: '#67e8f9',
      400: '#22d3ee',
      500: '#06b6d4',
    },

    // Surfaces & Canvas (Dark Obsidian Theme)
    surfaces: {
      canvas: '#020617',          // slate-950 body
      glassCard: 'rgba(15, 23, 42, 0.40)', // slate-900/40 glassmorphic backdrop
      solidCard: '#0b1120',
      cardHover: 'rgba(30, 41, 59, 0.50)',
      input: '#090e1a',
    },

    // Text & Content Contrast
    text: {
      primary: '#f8fafc',         // slate-100
      secondary: '#cbd5e1',       // slate-300
      muted: '#94a3b8',           // slate-400
      accent: '#6ee7b7',          // emerald-300
    },

    // Borders & Glass Highlights
    borders: {
      glass: 'rgba(255, 255, 255, 0.12)',
      glassHighlight: 'rgba(255, 255, 255, 0.25)',
      subtle: 'rgba(255, 255, 255, 0.06)',
      accentBorder: 'rgba(16, 185, 129, 0.25)',
    },

    // Status & Milestones
    status: {
      verified: { bg: 'rgba(16, 185, 129, 0.16)', text: '#6ee7b7', border: 'rgba(110, 231, 183, 0.35)' },
      inProgress: { bg: 'rgba(6, 182, 212, 0.16)', text: '#67e8f9', border: 'rgba(103, 232, 249, 0.35)' },
      pendingAction: { bg: 'rgba(245, 158, 11, 0.16)', text: '#fcd34d', border: 'rgba(252, 211, 77, 0.35)' },
      rejected: { bg: 'rgba(244, 63, 94, 0.16)', text: '#fda4af', border: 'rgba(253, 164, 175, 0.35)' },
    },
  },

  /* ==========================================================================
     3. VISUAL EFFECTS, SHADERS & GEOMETRY
     ========================================================================= */
  effects: {
    borderGlowRadius: '28px',
    specularButtonRadius: '18px',
    modalRadius: '24px',
    glowColor: '#10b981',
    glowColorSecondary: '#06b6d4',
  },
} as const;

export type PartnerTheme = typeof ThemeConfig;