@layer utilities {
  /* paragraphs */

  .coco-para-lg {
    @apply font-body text-para-lg;
  }

  .coco-para-md {
    @apply font-body text-para-md;
  }

  .coco-para-sm {
    @apply font-body text-para-sm;
  }

  .coco-para-xs {
    @apply font-body text-para-xs;
  }

  /* labels */

  .coco-label-lg {
    @apply font-body text-label-lg font-semibold;
  }

  .coco-label-md {
    @apply font-body text-label-md font-semibold;
  }

  .coco-label-sm {
    @apply font-body text-label-sm font-semibold;
  }

  .coco-label-xs {
    @apply font-body text-label-xs font-semibold;
  }

  .coco-label-xxs {
    @apply font-body text-label-xxs font-semibold;
  }

  /* standard headings */

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

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

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

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

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

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

  /* standard subheadings */

  .coco-subheading-1 {
    @apply font-body text-subheading-1 font-[500];
  }

  .coco-subheading-2 {
    @apply font-body text-subheading-2 font-[500];
  }

  .coco-subheading-3 {
    @apply font-body text-subheading-3 font-[500];
  }

  .coco-subheading-4 {
    @apply font-body text-subheading-4 font-[500];
  }

  /* display headings */

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

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

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

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

  /* branded headings */

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

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

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

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

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

  /* branded display headings */

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

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

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

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