@layer base {
  :root {
    --gutter: 1rem;
    --margin: 1rem;

    /* Typography */

    /* sm */
    --font-size-body-sm: 0.875rem; /* 14px */
    --line-height-body-sm: 1.25rem; /* 20px */
    --letter-spacing-body-sm: 0.02em; /* 2%   */

    /* md */
    --font-size-body-base: 1rem; /* 16px */
    --line-height-body-base: 1.5rem; /* 24px */
    --letter-spacing-body-base: 0; /* 0%   */

    /* lg */
    --font-size-body-lg: 1.125rem; /* 18px */
    --line-height-body-lg: 1.625rem; /* 26px */
    --letter-spacing-body-lg: -0.02em; /* -2%  */

    /* t8 */
    --font-size-t8: 0.875rem; /* 14px */
    --font-weight-t8: 700; /* bold */
    --line-height-t8: 1rem; /* 16px */
    --letter-spacing-t8: -0.02em; /* -2%  */

    /* t7 */
    --font-size-t7: 1.125rem; /* 18px */
    --font-weight-t7: 700; /* bold */
    --line-height-t7: 1.25rem; /* 20px */
    --letter-spacing-t7: -0.02em; /* -2%  */

    /* t6 */
    --font-size-t6: 1.25rem; /* 20px */
    --font-weight-t6: 700; /* bold */
    --line-height-t6: 1.375rem; /* 22px */
    --letter-spacing-t6: -0.02em; /* -2%  */

    /* t5 */
    --font-size-t5: 1.5rem; /* 24px */
    --font-weight-t5: 700; /* bold */
    --line-height-t5: 1.625rem; /* 26px */
    --letter-spacing-t5: -0.02em; /* -2%  */

    /* t4 */
    --font-size-t4: 1.75rem; /* 28px */
    --font-weight-t4: 700; /* bold */
    --line-height-t4: 1.875rem; /* 30px */
    --letter-spacing-t4: -0.02em; /* -2%  */

    /* t3 */
    --font-size-t3: 2.125rem; /* 34px */
    --font-weight-t3: 700;
    --line-height-t3: 2.375rem; /* 38px */
    --letter-spacing-t3: -0.02em; /* -2%  */

    /* t2 */
    --font-size-t2: 2.5rem; /* 40px */
    --font-weight-t2: 700; /* bold */
    --line-height-t2: 2.75rem; /* 44px */
    --letter-spacing-t2: -0.02em; /* -2%  */

    /* t1 */
    --font-size-t1: 2.875rem; /* 46px */
    --font-weight-t1: 700; /* bold */
    --line-height-t1: 3.125rem; /* 50px */
    --letter-spacing-t1: -0.02em; /* -2%  */

    /* dsp */
    --font-size-dsp: 4.125rem; /* 66px */
    --font-weight-dsp: 700; /* bold */
    --line-height-dsp: 4.5rem; /* 72px */
    --letter-spacing-dsp: -0.02em; /* -2%  */

    /* Space sizes */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 8rem;
    --header-height: 4.5rem;
    --hero-top: var(--header-height);
  }
  @screen sm {
    :root {
      --margin: 1.875rem;
    }
  }

  @screen md {
    :root {
      --margin: 3.125rem;

      /* Typography sizes */

      /* lg */
      --font-size-body-lg: 1.25rem; /* 20 px */
      --line-height-body-lg: 1.75rem; /* 28px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.5rem; /* 24px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.625rem; /* 26px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 1.75rem; /* 28px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2rem; /* 32px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.125rem; /* 34px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.375rem; /* 38px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 2.625rem; /* 42px */
      --font-weight-t3: 700;
      --line-height-t3: 2.875rem; /* 46px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.125rem; /* 50px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 3.5rem; /* 56px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 3.625rem; /* 58px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 4.125rem; /* 66px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 5.5rem; /* 88px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 6rem; /* 96px */
      --letter-spacing-dsp: -0.02em; /* -2%  */

      /* Space sizes */
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2rem;
      --space-xl: 2.5rem;
      --space-2xl: 4rem;
      --space-3xl: 5rem;
      --space-4xl: 8rem;
      --space-5xl: 10rem;
      --hero-top: calc(var(--header-height));
    }
  }

  @screen lg {
    :root {
      --margin: 5.625rem;
      --gutter: 1.5rem;

      /* Typography sizes */

      /* md */
      --font-size-body-base: 1.125rem; /* 18px */
      --line-height-body-base: 1.625rem; /* 26px */
      --letter-spacing-body-base: 0; /* 0%   */

      /* lg */
      --font-size-body-lg: 1.375rem; /* 22px */
      --line-height-body-lg: 2rem; /* 32px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.625rem; /* 26px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.75rem; /* 28px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 2rem; /* 32px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2.25rem; /* 36px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.5rem; /* 40px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.75rem; /* 44px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 3rem; /* 48px */
      --font-weight-t3: 700;
      --line-height-t3: 3.25rem; /* 52px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.75rem; /* 60px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 4.125rem; /* 66px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 4.5rem; /* 72px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 5rem; /* 80px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 6.875rem; /* 110px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 7.5rem; /* 120px */
      --letter-spacing-dsp: -0.02em; /* -2%  */
    }
  }
}

@layer utilities {
  .container {
    @apply mx-margin w-auto max-w-none;
  }

  @screen xl {
    .container {
      @apply w-full mx-auto;
      max-width: calc(theme('screens.xl') - (var(--margin) * 2));
    }
  }
}