// Design System - Centralized design tokens and reusable styles
export const designTokens = {
  // Colors
  colors: {
    banquise: {
      blue: '#40B4FF',
      blueDark: '#1F5D89',
      blueLight: '#69B7E2',
      blueLightest: '#A5F0FF',
      gray: '#F6F6F6',
    }
  },

  // Spacing
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
    xxl: '3rem',
  },

  // Border radius
  borderRadius: {
    sm: '0.5rem',
    md: '0.75rem',
    lg: '1rem',
    xl: '1.5rem',
    xxl: '2rem',
  },

  // Shadows
  shadows: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
    xxl: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  },

  // Typography
  typography: {
    fontFamily: {
      heading: ['Dela Gothic One', 'sans-serif'],
      body: ['Roboto', 'sans-serif'],
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '3.75rem',
    },
    fontWeight: {
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '800',
    },
  },

  // Transitions
  transitions: {
    fast: 'all 0.15s ease-in-out',
    normal: 'all 0.3s ease-in-out',
    slow: 'all 0.5s ease-in-out',
  },

  // Z-index
  zIndex: {
    dropdown: 1000,
    sticky: 1020,
    fixed: 1030,
    modalBackdrop: 1040,
    modal: 1050,
    popover: 1060,
    tooltip: 1070,
  },
} as const;

// Reusable gradient combinations
export const gradients = {
  primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light',
  primaryBr: 'bg-gradient-to-br from-banquise-blue to-banquise-blue-light',
  card: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
  cardHover: 'hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8',
  discord: 'bg-gradient-to-r from-indigo-600 to-purple-600',
  discordHover: 'hover:from-indigo-500 hover:to-purple-500',
  background: 'bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark',
} as const;

// Reusable component styles
export const componentStyles = {
  // Buttons
  button: {
    base: 'inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95',
    primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light',
    discord: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500',
    auth: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl',
  },

  // Cards
  card: {
    base: 'backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300',
    hover: 'hover:shadow-xl hover:border-banquise-blue-lightest/50',
    interactive: 'cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95',
    gradient: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
  },

  // Navigation
  nav: {
    link: 'px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group',
    mobileItem: 'group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20',
  },

  // Text styles
  text: {
    heading: 'font-heading font-bold tracking-tight',
    headingXl: 'text-3xl sm:text-4xl md:text-5xl text-banquise-gray font-heading font-bold tracking-tight',
    headingLg: 'text-2xl sm:text-3xl md:text-4xl text-banquise-gray font-heading font-bold tracking-tight',
    headingMd: 'text-xl sm:text-2xl md:text-3xl text-banquise-blue-dark font-heading font-bold tracking-tight',
    headingSm: 'text-lg sm:text-xl md:text-2xl text-banquise-blue-dark font-heading font-semibold tracking-tight',
    subheading: 'text-base sm:text-lg md:text-xl text-banquise-gray/90 font-medium leading-relaxed',
    body: 'text-sm sm:text-base md:text-lg text-banquise-blue-dark/90 leading-relaxed',
    description: 'text-banquise-gray/80 leading-relaxed',
    muted: 'text-banquise-gray/90 leading-relaxed',
    lightHeading: 'text-banquise-blue-lightest font-heading font-bold tracking-tight',
    lightBody: 'text-white/90 leading-relaxed',
  },

  // Icons
  icon: {
    base: 'w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl shadow-lg',
    small: 'w-10 h-10 rounded-lg flex items-center justify-center text-white',
  },

  // Layout
  layout: {
    section: 'py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8',
    container: 'max-w-6xl mx-auto',
    divider: 'w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full',
  },

  // Animations
  animation: {
    hover: 'hover:-translate-y-4 hover:shadow-2xl transition-all duration-300',
    scale: 'hover:scale-105 active:scale-95 transition-transform duration-300',
    fadeIn: 'animate-fadeIn',
    slideUp: 'animate-slideUp',
  },
} as const;

// Utility function to merge classes
export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
  return classes.filter(Boolean).join(' ');
};

// Responsive breakpoints
export const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
} as const;

export type DesignTokens = typeof designTokens;
export type Gradients = typeof gradients;
export type ComponentStyles = typeof componentStyles;