@theme {
  --base-size: var(--text-7m);
}

@utility base-anchor {
  font-size: calc(var(--base-size) * 1em);
}

@utility text-relative {
  font-size: calc(var(--font-size) / var(--base-size) * 1em);
}

/* To use this today */
@utility base-font-size {
  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
}

/* Easier usage when CSS functions become available */
@function --bem(--multiplier) {
  result: calc(var(--font-size) / var(--base-size) * 1em * var(--multiplier));
}

@function --blh(--multiplier, --lh-multiplier) {
  result: calc(var(--font-size) / var(--base-size) * 1em * var(--multiplier) * var(--lh-multiplier, var(--leading)));
}

/*********************
 * Legacy Versions *
 *********************/
/* @utility text-relative-base {
  font-size: calc(var(--text-base-size) * 1rem);
}

@utility text-relative {
  font-size: calc(var(--text-size) / var(--text-base-size) * 1em);
}

@utility rtext-base-* {
  @apply text-base;
  --text-base-size: --value(--text-base-*, [size]);
}

@utility rtext-* {
  @apply text-relative;
  --text-size: --value(--text-*, [size]);
} */