Sankofa/src/lib/design-system.ts

/**
 * Phoenix Sankofa Cloud Design System
 * 
 * Design tokens and utilities for the brand
 */

// Color Palette
export const colors = {
  phoenix: {
    fire: '#FF4500',
    flame: '#FF8C00',
    ember: '#FF6B35',
  },
  sankofa: {
    gold: '#FFD700',
    earth: '#8B4513',
  },
  sovereignty: {
    purple: '#6A0DAD',
    deep: '#4B0082',
  },
  ancestral: {
    blue: '#1E3A8A',
    deep: '#0F1B3D',
  },
  studio: {
    black: '#0A0A0A',
    dark: '#1A1A1A',
    medium: '#2A2A2A',
  },
  neon: {
    teal: '#00FFD1',
    magenta: '#FF00FF',
    cyan: '#00FFFF',
    amber: '#FFB800',
  },
  status: {
    success: '#00FF88',
    warning: '#FFB800',
    error: '#FF0040',
    info: '#00B8FF',
  },
} as const

// Typography Scale
export const typography = {
  fontFamily: {
    sans: 'var(--font-inter), system-ui, sans-serif',
    mono: 'var(--font-mono), monospace',
  },
  fontSize: {
    xs: '0.75rem',    // 12px
    sm: '0.875rem',   // 14px
    base: '1rem',     // 16px
    lg: '1.125rem',   // 18px
    xl: '1.25rem',    // 20px
    '2xl': '1.5rem',  // 24px
    '3xl': '2rem',    // 32px
    '4xl': '3rem',    // 48px
    '5xl': '4rem',    // 64px
  },
  fontWeight: {
    light: 300,
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
} as const

// Spacing Scale (4px base unit)
export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
  '2xl': '48px',
  '3xl': '64px',
  '4xl': '96px',
  '5xl': '128px',
} as const

// Animation Durations
export const animation = {
  fast: '150ms',
  normal: '200ms',
  slow: '300ms',
  slower: '500ms',
} as const

// Well-Architected Framework Pillars
export const pillars = {
  SECURITY: {
    code: 'SECURITY',
    name: 'Security',
    color: colors.status.error,
  },
  RELIABILITY: {
    code: 'RELIABILITY',
    name: 'Reliability',
    color: colors.status.success,
  },
  COST_OPTIMIZATION: {
    code: 'COST_OPTIMIZATION',
    name: 'Cost Optimization',
    color: colors.neon.cyan,
  },
  PERFORMANCE_EFFICIENCY: {
    code: 'PERFORMANCE_EFFICIENCY',
    name: 'Performance Efficiency',
    color: colors.neon.teal,
  },
  OPERATIONAL_EXCELLENCE: {
    code: 'OPERATIONAL_EXCELLENCE',
    name: 'Operational Excellence',
    color: colors.neon.magenta,
  },
  SUSTAINABILITY: {
    code: 'SUSTAINABILITY',
    name: 'Sustainability',
    color: colors.status.success,
  },
} as const

// Health Score Colors
export const healthScoreColors = {
  excellent: colors.status.success,    // 90-100
  good: colors.neon.amber,              // 70-89
  fair: colors.phoenix.flame,          // 50-69
  poor: colors.status.error,            // 0-49
} as const

/**
 * Get health score color based on score (0-100)
 */
export function getHealthScoreColor(score: number): string {
  if (score >= 90) return healthScoreColors.excellent
  if (score >= 70) return healthScoreColors.good
  if (score >= 50) return healthScoreColors.fair
  return healthScoreColors.poor
}

/**
 * Get pillar color
 */
export function getPillarColor(pillarCode: keyof typeof pillars): string {
  return pillars[pillarCode]?.color || colors.neon.cyan
}