import { addAlpha } from '../../foundation/Colors';
import { TypographyResponsiveConfig, TypographyTheme } from '../../foundation/Typography';
import { colors } from './colors';

const h1XLBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
};

const h1SmallBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
};

const h2Bold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '900',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '900',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '900',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '900',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '900',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
};

const h2Regular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '20px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
};

const h3Bold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '900',

    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '900',

    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '900',

    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '900',

    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '900',

    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
};

const h3Regular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
    textShadow: `0px 0px 20px ${addAlpha(colors.white100, 0.3)}`,
  },
};

const subheaderRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '20px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
};

const bodyXSmallMedium: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
};

const bodyXSmallBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '10px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '0.02em',
    lineHeight: '140%',
  },
};

const bodySmallMedium: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
};

const bodySmallBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '12px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
};

const bodyMediumMedium: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: '150%',
  },
};

const bodyMediumBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
};

const bodyLargeRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
};

const bodyLargeBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
};

const bodyExtraLargeRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '150%',
  },
};

const bodyXXLLarge: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
};

const bodyXXLRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '140%',
  },
};

const bodyExtraLargeBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '18px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
};

const numberBig: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '120px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '120px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '120px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
};

const bodyMegaLargeBold: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Bold', sans-serif",
    fontSize: '48px ',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '120%',
  },
};

const h1XLRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
};

const h1XLRegularSpaced: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '400',
    lineHeight: '130%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '400',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
};

const h1XLBoldSpaced: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '64px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '32px',
    fontStyle: 'normal',
    fontWeight: '700',
    lineHeight: '130%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '48px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '9.6px',
    lineHeight: '130%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi-Regular', sans-serif",
    fontSize: '40px',
    fontStyle: 'normal',
    fontWeight: '700',
    letterSpacing: '12.8px',
    lineHeight: '130%',
  },
};

const ctaRegular: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
};

const ctaLarge: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '4.8px',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '4.8px',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '16px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '3.2px',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '4.8px',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '24px',
    fontStyle: 'normal',
    fontWeight: '500',
    letterSpacing: '4.8px',
    lineHeight: '150%',
  },
};

const ctaBlack: TypographyResponsiveConfig = {
  desktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '900',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  largeDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '900',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  mobileDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '900',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  smallDesktopDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '900',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
  tabletDevice: {
    fontFamily: "'Inter', sans-serif",
    fontSize: '14px',
    fontStyle: 'normal',
    fontWeight: '900',
    letterSpacing: '2.8px',
    lineHeight: '150%',
  },
};

export const typography: TypographyTheme = {
  bodyExtraLargeBold,
  bodyExtraLargeRegular,
  bodyLargeBold,
  bodyLargeRegular,
  bodyMediumBold,
  bodyMediumMedium,
  bodyMegaLargeBold,
  bodySmallBold,
  bodySmallMedium,
  bodyXSmallBold,
  bodyXSmallMedium,
  bodyXXLLarge,
  bodyXXLRegular,
  ctaBlack,
  ctaLarge,
  ctaRegular,
  h1SmallBold,
  h1XLBold,
  h1XLBoldSpaced,
  h1XLRegular,
  h1XLRegularSpaced,
  h2Bold,
  h2Regular,
  h3Bold,
  h3Regular,
  numberBig,
  subheaderRegular,
};