:root {
  /* Text S — 12px / 18px */
  --typography-text-s-size: 0.75rem;
  --typography-text-s-leading: 1.125rem;

  /* Text M — 14px / 21px */
  --typography-text-m-size: 0.875rem;
  --typography-text-m-leading: 1.3125rem;

  /* Text L — 16px / 24px */
  --typography-text-l-size: 1rem;
  --typography-text-l-leading: 1.5rem;

  /* Heading S — 20px / 30px */
  --typography-heading-s-size: 1.25rem;
  --typography-heading-s-leading: 1.875rem;

  /* Heading M — 28px / 42px */
  --typography-heading-m-size: 1.75rem;
  --typography-heading-m-leading: 2.625rem;

  /* Heading L — 32px / 48px */
  --typography-heading-l-size: 2rem;
  --typography-heading-l-leading: 3rem;
}

@theme inline {
  --font-sans: var(--font-outfit);
  --font-brand: var(--font-playfair);
}

/* Text S */
@utility text-s-light {
  font-size: var(--typography-text-s-size);
  line-height: var(--typography-text-s-leading);
  font-weight: 300;
}

@utility text-s-regular {
  font-size: var(--typography-text-s-size);
  line-height: var(--typography-text-s-leading);
  font-weight: 400;
}

@utility text-s-medium {
  font-size: var(--typography-text-s-size);
  line-height: var(--typography-text-s-leading);
  font-weight: 500;
}

/* Text M */
@utility text-m-light {
  font-size: var(--typography-text-m-size);
  line-height: var(--typography-text-m-leading);
  font-weight: 300;
}

@utility text-m-regular {
  font-size: var(--typography-text-m-size);
  line-height: var(--typography-text-m-leading);
  font-weight: 400;
}

@utility text-m-medium {
  font-size: var(--typography-text-m-size);
  line-height: var(--typography-text-m-leading);
  font-weight: 500;
}

/* Text L */
@utility text-l-light {
  font-size: var(--typography-text-l-size);
  line-height: var(--typography-text-l-leading);
  font-weight: 300;
}

@utility text-l-regular {
  font-size: var(--typography-text-l-size);
  line-height: var(--typography-text-l-leading);
  font-weight: 400;
}

@utility text-l-medium {
  font-size: var(--typography-text-l-size);
  line-height: var(--typography-text-l-leading);
  font-weight: 500;
}

/* Heading */
@utility heading-s {
  font-size: var(--typography-heading-s-size);
  line-height: var(--typography-heading-s-leading);
  font-weight: 500;
}

@utility heading-m {
  font-size: var(--typography-heading-m-size);
  line-height: var(--typography-heading-m-leading);
  font-weight: 500;
}

@utility heading-l {
  font-size: var(--typography-heading-l-size);
  line-height: var(--typography-heading-l-leading);
  font-weight: 500;
}