html {
  font-size: 16px;
}

:root {
  --title-4xl: 2.5rem;
  --title-3xl: 2rem;
  --title-2xl: 1.5rem;
  --title-xl: 1.25rem;
  --title-lg: 1.125rem;
  --title-md: 1rem;
  --title-sm: 0.875rem;
  --title-xs: 0.75rem;
  --btn-md: 0.875rem;
  --btn-sm: 0.75rem;
  --text-lg: 1.25rem;
  --text-md: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;

  --line-h-title-4xl: 1.4;
  --line-h-title-3xl: 1.25;
  --line-h-title-2xl: 1.33;
  --line-h-title-xl: 1.6;
  --line-h-title-lg: 1.33;
  --line-h-title-md: 1.25;
  --line-h-title-sm: 1.428;
  --line-h-title-xs: 1.33;
  --line-h-btn-md: 1.285;
  --line-h-btn-sm: 1.33;
  --line-h-text-lg: 1.5;
  --line-h-text-md: 1.33;
  --line-h-text-base: 1.25;
  --line-h-text-sm: 1.14;
}

@media only screen and (min-width: 1080px) {
  :root {
    --title-4xl: 3.5rem;
    --title-3xl: 2.5rem;
    --title-2xl: 2rem;
    --title-xl: 1.5rem;
    --title-lg: 1.25rem;
    --title-md: 1.125rem;
    --title-sm: 1rem;
    --title-xs: 0.875rem;
    --btn-md: 1rem;
    --btn-sm: 0.875rem;
    --text-lg: 1.5rem;
    --text-md: 1.25rem;
    --text-base: 1.125rem;
    --text-sm: 1rem;

    --line-h-title-4xl: 1.25;
    --line-h-title-3xl: 1.2;
    --line-h-title-2xl: 1.125;
    --line-h-title-xl: 1.33;
    --line-h-title-lg: 1.4;
    --line-h-title-md: 1.33;
    --line-h-title-sm: 1.5;
    --line-h-title-xs: 1.428;
    --line-h-btn-md: 1.25;
    --line-h-btn-sm: 1.428;
    --line-h-text-lg: 1.33;
    --line-h-text-md: 1.4;
    --line-h-text-base: 1.33;
    --line-h-text-sm: 1.25;
  }
}

body {
  @apply font-secondary text-neutral-08 text-base;
}

.h,
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-primary font-semibold;
}

h1,
.h1 {
  @apply text-title-4xl;
}

h2,
.h2 {
  @apply text-title-3xl;
}

h3,
.h3 {
  @apply text-title-2xl;
}

h4,
.h4 {
  @apply text-title-xl;
}

h5,
.h5 {
  @apply text-title-lg;
}

h6,
.h6 {
  @apply text-title-md;
}

a {
  @apply underline text-primary-01 transition-all;
}

.link--stretched {
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}

.link--stretched {
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}

.title--border-prefix {
  position: relative;
  padding-top: 1rem;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 4px;
    background-color: var(--accent-05);
  }
}