export const styleMap = {
  display: {
    large: {
      mobile: "text-[48px] leading-[48px] font-bold",
      tablet: "md:text-[72px] md:leading-[80px] font-bold",
      web: "lg:text-[96px] lg:leading-[106px] font-bold",
    },
    medium: {
      mobile: "text-[32px] leading-[36px] font-bold",
      tablet: "md:text-[56px] md:leading-[62px] font-bold",
      web: "lg:text-[72px] lg:leading-[80px] font-bold",
    },
  },
  heading: {
    large: {
      mobile: "text-[24px] leading-[32px] font-bold",
      tablet: "md:text-[30px] md:leading-[40px] font-bold",
      web: "lg:text-[36px] lg:leading-[44px] font-bold",
    },
    medium: {
      mobile: "text-[16px] leading-[18px] font-semibold",
      tablet: "md:text-[16px] md:leading-[20px] font-semibold",
      web: "lg:text-[18px] lg:leading-[20px] font-semibold",
    },
    small: {
      mobile: "text-[14px] leading-[18px] font-semibold",
      tablet: "md:text-[16px] md:leading-[18px] font-semibold",
      web: "lg:text-[16px] lg:leading-[28px] font-semibold",
    },
  },
  body: {
    large: {
      mobile: "text-[16px] leading-[24px]",
      tablet: "md:text-[18px] md:leading-[28px]",
      web: "lg:text-[18px] lg:leading-[28px]",
    },
    medium: {
      mobile: "text-[14px] leading-[20px]",
      tablet: "md:text-[16px] md:leading-[24px]",
      web: "lg:text-[16px] lg:leading-[24px]",
    },
    small: {
      mobile: "text-[12px] leading-[16px] font-semibold",
      tablet: "md:text-[14px] md:leading-[20px] font-semibold",
      web: "lg:text-[14px] lg:leading-[20px] font-semibold",
    },
  },
  button: {
    medium: {
      mobile: "text-[16px] leading-[20px]",
      tablet: "md:text-[16px] md:leading-[20px]",
      web: "lg:text-[16px] lg:leading-[20px]",
    },
    small: {
      mobile: "text-[12px] leading-[14px] font-semibold",
      tablet: "md:text-[14px] md:leading-[16px] font-semibold",
      web: "lg:text-[14px] lg:leading-[16px] font-semibold",
    },
  },
  caption: {
    medium: {
      mobile: "text-[10px] leading-[14px]",
      tablet: "md:text-[14px] md:leading-[16px]",
      web: "lg:text-[14px] lg:leading-[16px]",
    },
  },
} as const;