PMFlow/frontend/src/design/tokens/typography.ts

/**
 * Design Tokens - Typography System
 *
 * Font sizes, line heights, and font weights
 * Optimized for UI clarity and readability
 */

// ============================================================================
// Font Family
// ============================================================================

export const fontFamily = {
  sans: [
    'Inter',                         // Linear-style preferred font
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
  ].join(', '),

  mono: [
    'ui-monospace',
    'SFMono-Regular',
    '"SF Mono"',
    'Menlo',
    'Consolas',
    '"Liberation Mono"',
    'monospace',
  ].join(', '),
}

// ============================================================================
// Font Size
// ============================================================================

export const fontSize = {
  xs: ['12px', '16px'],    // [size, lineHeight]
  sm: ['14px', '20px'],
  base: ['16px', '24px'],
  lg: ['18px', '28px'],
  xl: ['20px', '28px'],
  '2xl': ['24px', '32px'],
  '3xl': ['30px', '36px'],
  '4xl': ['36px', '40px'],
  '5xl': ['48px', '48px'],
  '6xl': ['60px', '60px'],
}

// ============================================================================
// Font Weight
// ============================================================================

export const fontWeight = {
  hairline: '100',
  thin: '200',
  light: '300',
  normal: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
  extrabold: '800',
  black: '900',
}

// ============================================================================
// Letter Spacing
// ============================================================================

export const letterSpacing = {
  tighter: '-0.05em',
  tight: '-0.025em',
  normal: '0',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em',
}

// ============================================================================
// Text Styles (Pre-composed combinations)
// ============================================================================

export const textStyle = {
  // Display styles
  display: {
    fontSize: fontSize['5xl'][0],
    lineHeight: fontSize['5xl'][1],
    fontWeight: fontWeight.bold,
    letterSpacing: letterSpacing.tighter,
  },

  heading: {
    fontSize: fontSize['4xl'][0],
    lineHeight: fontSize['4xl'][1],
    fontWeight: fontWeight.bold,
    letterSpacing: letterSpacing.tight,
  },

  subheading: {
    fontSize: fontSize['2xl'][0],
    lineHeight: fontSize['2xl'][1],
    fontWeight: fontWeight.semibold,
    letterSpacing: letterSpacing.normal,
  },

  title: {
    fontSize: fontSize.xl[0],
    lineHeight: fontSize.xl[1],
    fontWeight: fontWeight.semibold,
    letterSpacing: letterSpacing.normal,
  },

  // Body styles
  body: {
    fontSize: fontSize.base[0],
    lineHeight: fontSize.base[1],
    fontWeight: fontWeight.normal,
    letterSpacing: letterSpacing.normal,
  },

  bodyLarge: {
    fontSize: fontSize.lg[0],
    lineHeight: fontSize.lg[1],
    fontWeight: fontWeight.normal,
    letterSpacing: letterSpacing.normal,
  },

  // Small text
  caption: {
    fontSize: fontSize.sm[0],
    lineHeight: fontSize.sm[1],
    fontWeight: fontWeight.normal,
    letterSpacing: letterSpacing.normal,
  },

  label: {
    fontSize: fontSize.xs[0],
    lineHeight: fontSize.xs[1],
    fontWeight: fontWeight.medium,
    letterSpacing: letterSpacing.wide,
  },

  // Code styles
  code: {
    fontFamily: fontFamily.mono,
    fontSize: fontSize.sm[0],
    lineHeight: fontSize.sm[1],
    fontWeight: fontWeight.normal,
  },

  codeInline: {
    fontFamily: fontFamily.mono,
    fontSize: '0.9em',
    fontWeight: fontWeight.normal,
  },

  // AI Analysis text - improved readability
  aiAnalysis: {
    fontSize: fontSize.sm[0],        // 14px
    lineHeight: '1.6',               // Increased for readability
    fontWeight: fontWeight.normal,
    letterSpacing: '0.01em',         // Slight increase for readability
  },

  // Ghost button text
  ghostButton: {
    fontSize: fontSize.sm[0],
    lineHeight: fontSize.sm[1],
    fontWeight: fontWeight.medium,
    letterSpacing: letterSpacing.normal,
  },
}