@layer utilities {
  .coco-heading-1 {
    @apply font-body text-heading-1;
  }

  .coco-heading-2 {
    @apply font-body text-heading-2;
  }

  .coco-heading-3 {
    @apply font-body text-heading-3;
  }

  .coco-heading-4 {
    @apply font-body text-heading-4;
  }

  .coco-heading-5 {
    @apply font-body text-heading-5;
  }

  .coco-heading-6 {
    @apply font-body text-heading-6;
  }

  .coco-display-1 {
    @apply font-display text-display-1;
  }

  .coco-display-2 {
    @apply font-display text-display-2;
  }

  .coco-display-3 {
    @apply font-display text-display-3;
  }

  .coco-display-4 {
    @apply font-display text-display-4;
  }

  /* branded */

  .coco-branded-heading-1 {
    @apply font-branded text-heading-1;
  }

  .coco-branded-heading-2 {
    @apply font-branded text-heading-2;
  }

  .coco-branded-heading-3 {
    @apply font-branded text-heading-3;
  }

  .coco-branded-heading-4 {
    @apply font-branded text-heading-4;
  }

  .coco-branded-heading-5 {
    @apply font-branded text-heading-5;
  }

  .coco-branded-display-1 {
    @apply font-branded text-relaxed-display-1;
  }

  .coco-branded-display-2 {
    @apply font-branded text-relaxed-display-2;
  }

  .coco-branded-display-3 {
    @apply font-branded text-relaxed-display-3;
  }

  .coco-branded-display-4 {
    @apply font-branded text-relaxed-display-4;
  }
}