@layer utilities {
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .font-display {
    font-family: var(--font-family-display);
  }
  .font-body {
    font-family: var(--font-family-body);
  }
  .font-script {
    font-family: var(--font-family-script);
  }

  .text-xs {
    font-size: var(--font-size-xs);
  }
  .text-sm {
    font-size: var(--font-size-sm);
  }
  .text-md {
    font-size: var(--font-size-md);
  }
  .text-lg {
    font-size: var(--font-size-lg);
  }
  .text-xl {
    font-size: var(--font-size-xl);
  }
  .text-2xl {
    font-size: var(--font-size-2xl);
  }
  .text-3xl {
    font-size: var(--font-size-3xl);
  }
  .text-4xl {
    font-size: var(--font-size-4xl);
  }
  .text-5xl {
    font-size: var(--font-size-5xl);
  }
  .text-6xl {
    font-size: var(--font-size-6xl);
  }

  .text-magenta {
    color: var(--color-brand-magenta);
  }
  .text-green {
    color: var(--color-brand-green);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-white {
    color: var(--color-white);
  }

  .bg-cream {
    background: var(--color-cream);
  }
  .bg-green-soft {
    background: var(--color-brand-green-light);
  }
  .bg-off-white {
    background: var(--color-off-white);
  }

  .accent-green {
    --accent: var(--color-brand-green);
  }
  .accent-magenta {
    --accent: var(--color-brand-magenta);
  }
  .accent-yellow {
    --accent: var(--color-yellow);
  }
  .accent-blue {
    --accent: var(--color-blue);
  }

  .underline-wavy {
    text-decoration: underline wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
  }
}