/* Font Import */
@font-face {
  font-family: "Figtree";
  src: url("../assets/typography/Figtree.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Global Typography */
body,
html {
  font-family: "Figtree", serif;
  font-weight: 350;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1.5;
  font-size: 20px;
  /* background-color: var(--app-background-100); */
  /* -webkit-font-smoothing: antialiased;
  -mox-osx-font-smoothing: grayscale; */
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
small, 
strong {
  all: unset;
}

/* Responsive Typography for 1440+ */
h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  margin-top: var(--h1-margin-bottom);
  margin-bottom: var(--h1-margin-bottom);

  font-weight: 850;
  text-transform: uppercase;
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  margin-top: var(--h2-margin-top);
  margin-bottom: var(--h2-margin-bottom);

  font-weight: 800;
  text-transform: uppercase;
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  margin-top: var(--h3-margin-top);
  margin-bottom: var(--h3-margin-bottom);

  font-weight: 800;
  text-transform: uppercase;
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  margin-top: var(--h4-margin-top);
  margin-bottom: var(--h4-margin-bottom);

  font-weight: 800;
  text-transform: uppercase;
}

h5 {
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  margin-top: var(--h5-margin-top);
  margin-bottom: var(--h5-margin-bottom);

  font-weight: 800;
  text-transform: uppercase;
}

h6 {
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  margin-top: var(--h6-margin-top);
  margin-bottom: var(--h6-margin-bottom);

  font-weight: 800;
  text-transform: uppercase;
}

p.large {
  font-size: var(--p-large-font-size);
  line-height: var(--p-large-line-height);
  margin-top: var(--p-large-margin-top);
  margin-bottom: var(--p-large-margin-bottom);

  font-weight: 400;
}

p {
  font-size: var(--p-font-size);
  line-height: var(--p-line-height);
  margin-top: var(--p-margin-top);
  margin-bottom: var(--p-margin-bottom);

  font-weight: 400;
}

small {
  font-size: var(--small-font-size);
  line-height: var(--small-line-height);
  margin-top: var(--small-margin-top);
  margin-bottom: var(--small-margin-bottom);

  font-weight: 400;
}

p.nano {
  font-size: var(--nano-font-size);
  line-height: var(--nano-line-height);
  margin-top: var(--nano-margin-top);
  margin-bottom: var(--nano-margin-bottom);

  font-weight: 400;
}

strong {
  font-size: inherit;
  line-height: inherit;
  margin-top: inherit;
  margin-bottom: inherit;

  font-weight: 600;
}