@import url(../../global/global.css);
@import url(../../global/colors.css);

.h1__typography,
.h2__typography,
.h3__typography,
.h4__typography,
.h5__typography,
.h6__typography,
.body1__typography,
.body2__typography,
.button__typography,
.caption__typography,
.overline__typography,
.icon__typography {
  padding: 0;
  margin: 0;
}

/*heading typography*/
/*need to add responsive typography using clamp*/
.h1__typography {
  /* font-size: clamp(40px, 5vw, 6rem); */
  font-size: 9.6rem;
  font-weight: 300;
}
.h2__typography {
  /* font-size: clamp(30px, 3vw, 5rem); */
  font-size: 6rem;
  font-weight: 300;
}
.h3__typography {
  /* font-size: clamp(20px, 2.5vw, 4rem); */
  font-size: 4.8rem;
  font-weight: 400;
}
.h4__typography {
  /* font-size: clamp(18px, 2vw, 4.5rem); */
  font-size: 3.4rem;
  font-weight: 400;
}
.h5__typography {
  /* font-size: clamp(15px, 1.8vw, 4rem); */
  font-size: 2.4rem;
  font-weight: 400;
}
.h6__typography {
  /* font-size: clamp(12px, 1.5vw, 3rem); */
  font-size: 2rem;
  font-weight: 500;
}

/*body typogrphy*/
.body1__typography {
  /* font-size: clamp(14px, 2vw, 2rem);
  line-height: clamp(16px, 2.4vw, 2.4rem); */
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.2rem;
}

.body2__typography {
  /* font-size: clamp(12px, 2vw, 1.8rem);
  line-height: clamp(14px, 2.2vw, 2.2rem); */
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
}

/*Subtitle typogrphy*/
.subtitle1__typography {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  font-weight: 400;
}

.subtitle2__typography {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.center__typography {
  text-align: center;
}

/*Caption Typography*/
.caption__typography {
  font-size: 1.2rem;
}

.overline__typography {
  font-size: 1.2rem;
  text-transform: uppercase;
}

/*Button Typography*/
.button__typography {
  /* font-size: clamp(10px, 1vw, 3rem); */
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 5px;
}

/*Icon typography*/
.icon__typography {
  font-size: 3rem;
  /* font-size: clamp(10px, 2vw, 4rem); */
  display: inline-flex;
}

.strike__line {
  text-decoration: line-through;
}

.underline--typography {
  text-decoration: underline;
}

.bold--typography {
  font-weight: 800;
}

/*typography color*/
.typography--white {
  color: var(--white);
}

.typography--black {
  color: var(--black);
}

.typography--red {
  color: var(--tomato-red);
}

.typography--green {
  color: var(--green-teal);
}

.typography--blue {
  color: var(--yue-guang-lan-blue);
}

.typography--yellow {
  color: var(--squash-blossom);
}

.typography--pink {
  color: var(--jalapeno-red);
}