@import url("./tokens.css");
@import url("./variables.css");

html {
  color: var(--text--color);
  background-color: var(--background--color);
}

body {
  margin: 0;
  font-family: var(--type--scale---body--medium--family);
  font-weight: var(--type--scale---body--medium--weight);
  font-size: var(--type--scale---body--medium--size);
  line-height: var(--type--scale---body--medium--height);
  letter-spacing: var(--type--scale---body--medium--space);
  overflow-x: hidden;
}
.icon path {
  fill: var(--icon--foreground);
}

.display-large {
  font-family: var(--type--scale---display--large--family);
  font-weight: var(--type--scale---display--large--weight);
  font-size: var(--type--scale---display--large--size);
  line-height: var(--type--scale---display--large--height);
  letter-spacing: var(--type--scale---display--large--space);
}

.display-medium {
  font-family: var(--type--scale---display--medium--family);
  font-weight: var(--type--scale---display--medium--weight);
  font-size: var(--type--scale---display--medium--size);
  line-height: var(--type--scale---display--medium--height);
  letter-spacing: var(--type--scale---display--medium--space);
}

.display-small {
  font-family: var(--type--scale---display--small--family);
  font-weight: var(--type--scale---display--small--weight);
  font-size: var(--type--scale---display--small--size);
  line-height: var(--type--scale---display--small--height);
  letter-spacing: var(--type--scale---display--small--space);
}

.headline-large {
  font-family: var(--type--scale---headline--large--family);
  font-weight: var(--type--scale---headline--large--weight);
  font-size: var(--type--scale---headline--large--size);
  line-height: var(--type--scale---headline--large--height);
  letter-spacing: var(--type--scale---headline--large--space);
}

.headline-medium {
  font-family: var(--type--scale---headline--medium--family);
  font-weight: var(--type--scale---headline--medium--weight);
  font-size: var(--type--scale---headline--medium--size);
  line-height: var(--type--scale---headline--medium--height);
  letter-spacing: var(--type--scale---headline--medium--space);
}

.headline-small {
  font-family: var(--type--scale---headline--small--family);
  font-weight: var(--type--scale---headline--small--weight);
  font-size: var(--type--scale---headline--small--size);
  line-height: var(--type--scale---headline--small--height);
  letter-spacing: var(--type--scale---headline--small--space);
}

.title-large {
  font-weight: var(--type--scale---title--large--weight);
  font-size: var(--type--scale---title--large--size);
  line-height: var(--type--scale---title--large--height);
  letter-spacing: var(--type--scale---title--large--space);
}

.title-medium {
  font-weight: var(--type--scale---title--medium--weight);
  font-size: var(--type--scale---title--medium--size);
  line-height: var(--type--scale---title--medium--height);
  letter-spacing: var(--type--scale---title--medium--space);
}

.title-small {
  font-weight: var(--type--scale---title--small--weight);
  font-size: var(--type--scale---title--small--size);
  line-height: var(--type--scale---title--small--height);
  letter-spacing: var(--type--scale---title--small--space);
}

.body-large {
  font-weight: var(--type--scale---body--large--weight);
  font-size: var(--type--scale---body--large--size);
  line-height: var(--type--scale---body--large--height);
  letter-spacing: var(--type--scale---body--large--space);
}

.body-medium {
  font-weight: var(--type--scale---body--medium--weight);
  font-size: var(--type--scale---body--medium--size);
  line-height: var(--type--scale---body--medium--height);
  letter-spacing: var(--type--scale---body--medium--space);
}

.body-small {
  font-weight: var(--type--scale---body--small--weight);
  font-size: var(--type--scale---body--small--size);
  line-height: var(--type--scale---body--small--height);
  letter-spacing: var(--type--scale---body--small--space);
}

.label-large {
  font-weight: var(--type--scale---label--large--weight);
  font-size: var(--type--scale---label--large--size);
  line-height: var(--type--scale---label--large--height);
  letter-spacing: var(--type--scale---label--large--space);
}

.label-medium {
  font-weight: var(--type--scale---label--medium--weight);
  font-size: var(--type--scale---label--medium--size);
  line-height: var(--type--scale---label--medium--height);
  letter-spacing: var(--type--scale---label--medium--space);
}

.label-small {
  font-weight: var(--type--scale---label--small--weight);
  font-size: var(--type--scale---label--small--size);
  line-height: var(--type--scale---label--small--height);
  letter-spacing: var(--type--scale---label--small--space);
}

.btn-outline {
  background-color: var(--btn--outline--background-normal);
  border-radius: 100px;
  border: 1px solid var(--btn--outline--stroke-normal);
  color: var(--btn--outline--color-normal);
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  gap: 8px;
  transition: all 120ms ease-in-out;
  text-decoration: none;
}

.btn-outline svg path {
  fill: var(--btn--outline--color-normal);
  transition: fill 120ms ease-in-out;
}

.btn-outline:hover svg path {
  fill: var(--btn--outline--color-hover);
}

.btn-outline:hover {
  background-color: var(--btn--outline--background-hover);
  color: var(--btn--outline--color-hover);
}

.btn-outline:active svg path {
  fill: var(--btn--outline--color-active);
}

.btn-outline:active {
  background-color: var(--btn--outline--background-active);
  color: var(--btn--outline--color-active);
}