@layer atoms {
  .mobius-text {
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);

    &:where(.--is-p) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-regular);
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-normal);
      text-wrap: pretty;
    }

    &:where(.--is-h1) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-title); /* 32px */
      font-weight: var(--font-weight-bold);
      line-height: 1.25; /* 40px */
      margin: 0.35em 0;
      text-wrap: balance;
    }

    &:where(.--is-h2) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-small-title); /* 24px */
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-tight); /* 1.333, 32px */
      margin: 0.45em 0;
      text-wrap: balance;
    }

    &:where(.--is-h3) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-lead); /* 20px */
      font-weight: var(--font-weight-bold);
      line-height: 1.2; /* 24px */
      margin: 0.5em 0;
      text-wrap: balance;
    }

    &:where(.--is-h4) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-regular); /* 16px */
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-normal); /* 1.5, 24px */
      margin: 0.55em 0;
      text-wrap: balance;
    }

    &:where(.--is-span) {
      box-sizing: border-box;
      font-size: var(--font-size-regular);
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-normal);
    }

    &:where(.--is-body) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-regular); /* 16px */
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-normal); /* 1.5, 24px */
      color: var(--color-text-medium);
    }

    &:where(.--is-small) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-small-paragraph); /* 14px */
      font-weight: var(--font-weight-normal);
      line-height: 1.428; /* 20px */
      color: var(--color-text-medium);
    }

    &:where(.--is-legal) {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size-small-print); /* 12px */
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-tight); /* 1.333, 16px */
      color: var(--color-text-medium);
    }

    /* Title variant */
    &:where(.--is-title) {
      color: var(--color-text);
      font-size: var(--font-size-small-title);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-tight);
      margin: var(--size-md) 0;
    }

    /* Compact text */
    &:where(.--has-line-height-tight) {
      line-height: var(--line-height-tight);
    }

    &:where(.--has-line-height-loose) {
      line-height: var(--line-height-normal);
    }
  }
}
