/**
 * Styled Components Type Augmentation
 *
 * Extends styled-components DefaultTheme with our ThemeInterface.
 * This allows TypeScript to recognize theme properties in styled components.
 */

import 'styled-components'

/**
 * Theme interface for styled-components
 */
export interface ThemeInterface {
  colors: {
    primary: string
    secondary: string
    background: {
      primary: string
      secondary: string
      tertiary: string
    }
    surface: string
    border: string
    text: {
      primary: string
      secondary: string
      muted: string
      disabled: string
    }
    hover: {
      primary: string
      surface: string
    }
    error: string
    success: string
    warning: string
    info: string
    disabled: string
    active: string
  }
  spacing: {
    xs: string
    sm: string
    md: string
    lg: string
    xl: string
    xxl: string
  }
  typography: {
    fontSize: {
      xs: string
      sm: string
      base: string
      md: string
      lg: string
      xl: string
      '2xl': string
      '3xl': string
    }
    fontWeight: {
      normal: number
      medium: number
      semibold: number
      bold: number
    }
    fontFamily: {
      body: string
      heading: string
    }
    lineHeight: {
      tight: string
      normal: string
      relaxed: string
    }
  }
  borderRadius: {
    sm: string
    md: string
    lg: string
    full: string
  }
  shadows: {
    sm: string
    md: string
    lg: string
    xl: string
  }
  transitions: {
    fast: string
    normal: string
    slow: string
  }
  zIndex: {
    modal: number
    dropdown: number
    tooltip: number
  }
  breakpoints: {
    sm: string
    md: string
    lg: string
    xl: string
  }
  extensions?: {
    cyberpunk?: {
      neonGlow: {
        magenta: string
        cyan: string
      }
    }
  }
}

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface DefaultTheme extends ThemeInterface {}
}