import { css } from '@design.estate/dees-element';

// Font families matching shadcn design
export const fontFamilies = {
  sans: `'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
  mono: `'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`
};

// Font sizes following shadcn scale
export const fontSizes = {
  xs: '0.75rem',     // 12px
  sm: '0.875rem',    // 14px
  base: '1rem',      // 16px
  lg: '1.125rem',    // 18px
  xl: '1.25rem',     // 20px
  '2xl': '1.5rem',   // 24px
  '3xl': '1.875rem', // 30px
  '4xl': '2.25rem',  // 36px
  '5xl': '3rem',     // 48px
  '6xl': '3.75rem',  // 60px
  '7xl': '4.5rem',   // 72px
  '8xl': '6rem',     // 96px
  '9xl': '8rem'      // 128px
};

// Line heights
export const lineHeights = {
  none: '1',
  tight: '1.25',
  snug: '1.375',
  normal: '1.5',
  relaxed: '1.625',
  loose: '2'
};

// Font weights
export const fontWeights = {
  thin: '100',
  extralight: '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: '0em',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em'
};

// Typography presets matching shadcn components
export const typography = {
  h1: css`
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.025em;
  `,
  
  h2: css`
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
  `,
  
  h3: css`
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: 600;
  `,
  
  h4: css`
    font-size: 1.25rem;
    line-height: 1.375;
    font-weight: 600;
  `,
  
  body: css`
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
  `,
  
  bodyLarge: css`
    font-size: 1.125rem;
    line-height: 1.625;
    font-weight: 400;
  `,
  
  bodySmall: css`
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
  `,
  
  caption: css`
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 400;
  `,
  
  code: css`
    font-family: 'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
  `,
  
  button: css`
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.025em;
  `,
  
  input: css`
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
  `
};

// Font loading CSS
export const fontLoadingStyles = css`
  @font-face {
    font-family: 'Geist Sans';
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Geist Mono';
    src: url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
    font-display: swap;
  }
`;