:root {

  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F0F0F0;
  --neutral-200: #E2E2E2;
  --neutral-300: #D3D3D3;
  --neutral-400: #C5C5C5;
  --neutral-500: #9E9E9E;
  --neutral-600: #777777;
  --neutral-700: #4F4F4F;
  --neutral-800: #282828;
  --neutral-900: #141414;
  --neutral-1000: #000000;

  --blue-25: #f8fcff;
  --blue-50: #ebf5ff;
  --blue-100: #bedbfe;
  --blue-200: #90c1fe;
  --blue-300: #63a8fd;
  --blue-400: #358efd;
  --blue-500: #086CFF;
  --blue-600: #0556c6;
  --blue-700: #03398f;
  --blue-800: #001b59;

  --font-size-2xs: 1.4rem;
  --font-size-xs: 1.8rem;
  --font-size-sm: 2.4rem;
  --font-size-md: 3.2rem;
  --font-size-lg: 5rem;
  --font-size-xl: 8rem;
  --font-size-2xl: 11rem;
  --font-size-display: 20rem;

  --line-height-2xs: 18px;
  --line-height-xs: 22px;
  --line-height-sm: 30px;
  --line-height-md: 38px;
  --line-height-lg: 50px;
  --line-height-xl: 80px;
  --line-height-2xl: 110px;
  --line-height-display: 200px;

  --freeman-size-lg: 3rem;
  --freeman-size-md: 2rem;
  --freeman-size-sm: 1.4rem;

  --freeman-line-height-lg: 38px;
  --freeman-line-height-md: 28px;
  --freeman-line-height-sm: 14px;

  --font-weight-medium: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-xbold: 800;

  /* || Breakpoints */
  --breakpoint-mobile-max: 767px;
  --breakpoint-tablet-min: 768px;
  --breakpoint-tablet-max: 1024px;
  --breakpoint-desktop-min: 1025px;

  /* Letter Spacing */
  --letter-spacing-md: 0;

}

/* body * {
  color: red !important;
} */

@media (max-width: 1024px) {
  :root {
    --font-size-sm: 2.4rem;
    --font-size-md: 3rem;
    --font-size-lg: 4.6rem;
    --font-size-xl: 62rem;
    --font-size-2xl: 10rem;
    --font-size-display: 16rem;

    --line-height-2xs: 18px;
    --line-height-xs: 22px;
    --line-height-sm: 30px;
    --line-height-md: 34px;
    --line-height-lg: 50px;
    --line-height-xl: 64px;
    --line-height-2xl: 100px;
    --line-height-display: 160px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-2xs: 1.4rem;
    --font-size-xs: 1.6rem;
    --font-size-sm: 2.2rem;
    --font-size-md: 2.8rem;
    --font-size-lg: 4rem;
    --font-size-xl: 48rem;
    --font-size-2xl: 8rem;
    --font-size-display: 10rem;

    --line-height-2xs: 18px;
    --line-height-xs: 20px;
    --line-height-sm: 26px;
    --line-height-md: 32px;
    --line-height-lg: 44px;
    --line-height-xl: 52px;
    --line-height-2xl: 80px;
    --line-height-display: 100px;

    --freeman-size-lg: 2.8rem;
    --freeman-size-md: 1.8rem;

    --freeman-line-height-lg: 34px;
  }
}