@import "../variables/root.css";

@layer utilities {
  .text-sp {
    font: var(--sp-bold);
    font-size: var(--text-heading-sm-2xl);
    line-height: var(--leading-heading-sm-2xl);

    @variant md {
      font-size: var(--text-heading-md-2xl);
      line-height: var(--leading-heading-md-2xl);
    }

    @variant lg {
      font-size: var(--text-heading-lg-2xl);
      line-height: var(--leading-heading-lg-2xl);
    }
  }

  .text-h1-medium {
    font: var(--h1-medium);
    font-size: var(--text-heading-sm-xl);
    line-height: var(--leading-heading-sm-xl);

    @variant md {
      font-size: var(--text-heading-md-xl);
      line-height: var(--leading-heading-md-xl);
    }

    @variant lg {
      font-size: var(--text-heading-lg-xl);
      line-height: var(--leading-heading-lg-xl);
    }
  }

  .text-h1-bold {
    font: var(--h1-bold);
    font-size: var(--text-heading-sm-xl);
    line-height: var(--leading-heading-sm-xl);
    letter-spacing: var(--tracking-1);

    @variant md {
      font-size: var(--text-heading-md-xl);
      line-height: var(--leading-heading-md-xl);
    }

    @variant lg {
      font-size: var(--text-heading-lg-xl);
      line-height: var(--leading-heading-lg-xl);
    }
  }

  .text-h2-medium {
    font: var(--h2-medium);
    font-size: var(--text-heading-sm-lg);
    line-height: var(--leading-heading-sm-lg);

    @variant md {
      font-size: var(--text-heading-md-lg);
      line-height: var(--leading-heading-md-lg);
    }

    @variant lg {
      font-size: var(--text-heading-lg-lg);
      line-height: var(--leading-heading-lg-lg);
    }
  }

  .text-h2-bold {
    font: var(--h2-bold);
    font-size: var(--text-heading-sm-lg);
    line-height: var(--leading-heading-sm-lg);

    @variant md {
      font-size: var(--text-heading-md-lg);
      line-height: var(--leading-heading-md-lg);
    }

    @variant lg {
      font-size: var(--text-heading-lg-lg);
      line-height: var(--leading-heading-lg-lg);
    }
  }

  .text-h3-medium {
    font: var(--h3-medium);
    font-size: var(--text-heading-sm-md);
    line-height: var(--leading-heading-sm-md);

    @variant md {
      font-size: var(--text-heading-md-md);
      line-height: var(--leading-heading-md-md);
    }

    @variant md {
      font-size: var(--text-heading-lg-md);
      line-height: var(--leading-heading-lg-md);
    }
  }

  .text-h3-bold {
    font: var(--h3-bold);
    font-size: var(--text-heading-sm-md);
    line-height: var(--leading-heading-sm-md);

    @variant md {
      font-size: var(--text-heading-md-md);
      line-height: var(--leading-heading-md-md);
    }

    @variant md {
      font-size: var(--text-heading-lg-md);
      line-height: var(--leading-heading-lg-md);
    }
  }

  .text-h3-serif {
    font: var(--h3-serif);
    font-size: var(--text-heading-sm-md);
    line-height: var(--leading-heading-sm-md);

    @variant md {
      font-size: var(--text-heading-md-md);
      line-height: var(--leading-heading-md-md);
    }

    @variant md {
      font-size: var(--text-heading-lg-md);
      line-height: var(--leading-heading-lg-md);
    }
  }

  .text-h4-medium {
    font: var(--h4-medium);
    font-size: var(--text-heading-sm-sm);
    line-height: var(--leading-heading-sm-sm);

    @variant md {
      font-size: var(--text-heading-md-sm);
      line-height: var(--leading-heading-md-sm);
    }

    @variant md {
      font-size: var(--text-heading-lg-sm);
      line-height: var(--leading-heading-lg-sm);
    }
  }

  .text-h4-bold {
    font: var(--h4-bold);
    font-size: var(--text-heading-sm-sm);
    line-height: var(--leading-heading-sm-sm);

    @variant md {
      font-size: var(--text-heading-md-sm);
      line-height: var(--leading-heading-md-sm);
    }

    @variant md {
      font-size: var(--text-heading-lg-sm);
      line-height: var(--leading-heading-lg-sm);
    }
  }

  .text-h4-serif {
    font: var(--h4-serif);
    font-size: var(--text-heading-sm-sm);
    line-height: var(--leading-heading-sm-sm);

    @variant md {
      font-size: var(--text-heading-md-sm);
      line-height: var(--leading-heading-md-sm);
    }

    @variant md {
      font-size: var(--text-heading-lg-sm);
      line-height: var(--leading-heading-lg-sm);
    }
  }

  .text-h5-medium {
    font: var(--h5-medium);
    font-size: var(--text-heading-sm-xs);
    line-height: var(--leading-heading-sm-xs);

    @variant md {
      font-size: var(--text-heading-md-xs);
      line-height: var(--leading-heading-md-xs);
    }

    @variant md {
      font-size: var(--text-heading-lg-xs);
      line-height: var(--leading-heading-lg-xs);
    }
  }

  .text-h5-bold {
    font: var(--h5-bold);
    font-size: var(--text-heading-sm-xs);
    line-height: var(--leading-heading-sm-xs);

    @variant md {
      font-size: var(--text-heading-md-xs);
      line-height: var(--leading-heading-md-xs);
    }

    @variant md {
      font-size: var(--text-heading-lg-xs);
      line-height: var(--leading-heading-lg-xs);
    }
  }

  .text-t1-medium {
    font: var(--t1-medium);
  }

  .text-t2-medium {
    font: var(--t2-medium);
  }

  .text-t2-medium-ul {
    @apply underline;

    font: var(--t2-medium-ul);
  }

  .text-t3-medium {
    font: var(--t3-medium);
  }

  .text-t3-bold {
    font: var(--t3-bold);
  }

  .text-t4-medium-ul {
    @apply underline;

    font: var(--t4-medium-ul);
  }

  .text-t4-medium {
    font: var(--t4-medium);
  }

  .text-t4-bold {
    font: var(--t4-bold);
  }

  .text-t5-medium-ul {
    @apply underline;

    font: var(--t5-medium-ul);
  }

  .text-t5-medium {
    font: var(--t5-medium);
  }

  .text-t5-bold {
    font: var(--t5-bold);
  }

  .text-caption-medium {
    font: var(--caotion-medium);
  }

  .text-caption-medium-ul {
    @apply underline;

    font: var(--caotion-medium-ul);
  }

  .text-bg-linear {
    @apply text-transparent;

    background: linear-gradient(
        254deg,
        var(--color-blue-400) 8.18%,
        var(--color-blue-600) 90.55%
      )
      0 0 /100% no-repeat;
    background-clip: text;
  }
}