/* Live Your Dreams CI Colors */
--lyd-deep-blue: #000066;
--lyd-royal-blue: #3366CC;
--lyd-accent: #E8F0FE;
--lyd-grey: #666666;

/* Typography Scale */
--font-family-primary: 'Inter', system-ui, -apple-system, sans-serif;
--font-size-h1: 26px;  /* CI Strategy */
--font-size-h2: 19px;  /* CI Strategy */
--font-size-body: 16px; /* CI Strategy */

/* Line Heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.6;

// components/Typography.tsx
import { ReactNode } from 'react';

interface TypographyProps {
  variant?: 'display-1' | 'display-2' | 'h1' | 'h2' | 'body' | 'caption';
  color?: 'default' | 'gradient' | 'accent' | 'muted';
  children: ReactNode;
  className?: string;
}

export const Typography = ({ 
  variant = 'body', 
  color = 'default', 
  children, 
  className = '' 
}: TypographyProps) => {
  const baseClasses = {
    'display-1': 'text-6xl font-bold leading-tight tracking-tight',
    'display-2': 'text-5xl font-bold leading-tight',
    'h1': 'text-[26px] font-bold leading-tight text-lyd-royal-blue',
    'h2': 'text-[19px] font-semibold leading-tight text-lyd-royal-blue',
    'body': 'text-base leading-relaxed',
    'caption': 'text-xs uppercase tracking-wide font-medium'
  };

  const colorClasses = {
    'default': 'text-lyd-text',
    'gradient': 'bg-gradient-to-r from-lyd-royal-blue to-lyd-deep-blue bg-clip-text text-transparent',
    'accent': 'text-lyd-royal-blue font-semibold',
    'muted': 'text-lyd-grey'
  };

  return (
    <span className={`${baseClasses[variant]} ${colorClasses[color]} ${className}`}>
      {children}
    </span>
  );
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'lyd-deep-blue': '#000066',
        'lyd-royal-blue': '#3366CC',
        'lyd-accent': '#E8F0FE',
        'lyd-grey': '#666666',
        'lyd-text': '#111111',
      },
      fontFamily: {
        'primary': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
      },
      fontSize: {
        'h1-ci': ['26px', '1.2'],  // CI Strategy
        'h2-ci': ['19px', '1.2'],  // CI Strategy
        'body-ci': ['16px', '1.6'], // CI Strategy
      },
      letterSpacing: {
        'tight': '-0.025em',
        'wide': '0.025em',
        'wider': '0.05em',
        'widest': '0.1em',
      }
    }
  }
};