/* Color utilities */

    /* page background colors */
    .page-background-1 {background-color: var(--white-1);}
    .page-background-2 {background-color: var(--black-1);}
    .page-background-dark {background-color: var(--page-background-dark); padding-top: 48px;}

    /* foreground content colors */ 
    .foreground-content-neutral-primary {color: var(--grey-100);}
    .foreground-content-neutral-secondary {color: var(--grey-80);}
    .foreground-content-neutral-tertiary {color: var(--grey-75);}
    .foreground-content-neutral-quaternary {color: var(--grey-60);}

    /* stroke colors */ 
    .stroke-divider-default {border-color: var(--grey-10);}
  

/* Spacing utilities */
    /* Padding - all sides */
    .p-xxs { padding: var(--space-xxs); }
    .p-xs  { padding: var(--space-xs); }
    .p-sm  { padding: var(--space-sm); }
    .p-md  { padding: var(--space-md); }
    .p-lg  { padding: var(--space-lg); }
    .p-xl  { padding: var(--space-xl); }
    .p-2xl { padding: var(--space-2xl); }
    .p-3xl { padding: var(--space-3xl); }
    .p-4xl { padding: var(--space-4xl); }
    /* Padding - top */
    .pt-xxs { padding-top: var(--space-xxs); }
    .pt-xs  { padding-top: var(--space-xs); }
    .pt-sm  { padding-top: var(--space-sm); }
    .pt-md  { padding-top: var(--space-md); }
    .pt-lg  { padding-top: var(--space-lg); }
    .pt-xl  { padding-top: var(--space-xl); }
    .pt-2xl { padding-top: var(--space-2xl); }
    .pt-3xl { padding-top: var(--space-3xl); }
    .pt-4xl { padding-top: var(--space-4xl); }
    /* Padding - bottom */
    .pb-xxs { padding-bottom: var(--space-xxs); }
    .pb-xs  { padding-bottom: var(--space-xs); }
    .pb-sm  { padding-bottom: var(--space-sm); }
    .pb-md  { padding-bottom: var(--space-md); }
    .pb-lg  { padding-bottom: var(--space-lg); }
    .pb-xl  { padding-bottom: var(--space-xl); }
    .pb-2xl { padding-bottom: var(--space-2xl); }
    .pb-3xl { padding-bottom: var(--space-3xl); }
    .pb-4xl { padding-bottom: var(--space-4xl); }
    /* Padding - Left */
    .pl-xxs { padding-left: var(--space-xxs); }
    .pl-xs  { padding-left: var(--space-xs); }
    .pl-sm  { padding-left: var(--space-sm); }
    .pl-md  { padding-left: var(--space-md); }
    .pl-lg  { padding-left: var(--space-lg); }
    .pl-xl  { padding-left: var(--space-xl); }
    .pl-2xl { padding-left: var(--space-2xl); }
    .pl-3xl { padding-left: var(--space-3xl); }
    .pl-4xl { padding-left: var(--space-4xl); }
    /* Padding - right */
    .pr-xxs { padding-right: var(--space-xxs); }
    .pr-xs  { padding-right: var(--space-xs); }
    .pr-sm  { padding-right: var(--space-sm); }
    .pr-md  { padding-right: var(--space-md); }
    .pr-lg  { padding-right: var(--space-lg); }
    .pr-xl  { padding-right: var(--space-xl); }
    .pr-2xl { padding-right: var(--space-2xl); }
    .pr-3xl { padding-right: var(--space-3xl); }
    .pr-4xl { padding-right: var(--space-4xl); }
   /* Padding - axis */
    .px-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .px-xs  { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
    .px-sm  { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
    .px-md  { padding-left: var(--space-md);  padding-right: var(--space-md); }
    .px-lg  { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
    .px-xl  { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
    .px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
    .px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }

    .py-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .py-xs  { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
    .py-sm  { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
    .py-md  { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
    .py-lg  { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
    .py-xl  { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
    .py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
    .py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
    .py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
    /* Margin - all sides */
    .m-xxs { margin: var(--space-xxs); }
    .m-xs  { margin: var(--space-xs); }
    .m-sm  { margin: var(--space-sm); }
    .m-md  { margin: var(--space-md); }
    .m-lg  { margin: var(--space-lg); }
    .m-xl  { margin: var(--space-xl); }
    .m-2xl { margin: var(--space-2xl); }
    .m-3xl { margin: var(--space-3xl); }
    .m-4xl { margin: var(--space-4xl); }
    /* Margin - top */
    .mt-xxs { margin-top: var(--space-xxs); }
    .mt-xs  { margin-top: var(--space-xs); }
    .mt-sm  { margin-top: var(--space-sm); }
    .mt-md  { margin-top: var(--space-md); }
    .mt-lg  { margin-top: var(--space-lg); }
    .mt-xl  { margin-top: var(--space-xl); }
    .mt-2xl { margin-top: var(--space-2xl); }
    .mt-3xl { margin-top: var(--space-3xl); }
    .mt-4xl { margin-top: var(--space-4xl); }
    /* Margin - bottom */
    .mb-xxs { margin-bottom: var(--space-xxs); }
    .mb-xs  { margin-bottom: var(--space-xs); }
    .mb-sm  { margin-bottom: var(--space-sm); }
    .mb-md  { margin-bottom: var(--space-md); }
    .mb-lg  { margin-bottom: var(--space-lg); }
    .mb-xl  { margin-bottom: var(--space-xl); }
    .mb-2xl { margin-bottom: var(--space-2xl); }
    .mb-3xl { margin-bottom: var(--space-3xl); }
    .mb-4xl { margin-bottom: var(--space-4xl); }
    /* Margin - Left */
    .ml-xxs { margin-left: var(--space-xxs); }
    .ml-xs  { margin-left: var(--space-xs); }
    .ml-sm  { margin-left: var(--space-sm); }
    .ml-md  { margin-left: var(--space-md); }
    .ml-lg  { margin-left: var(--space-lg); }
    .ml-xl  { margin-left: var(--space-xl); }
    .ml-2xl { margin-left: var(--space-2xl); }
    .ml-3xl { margin-left: var(--space-3xl); }
    .ml-4xl { margin-left: var(--space-4xl); }
    /* Margin - right */
    .mr-xxs { margin-right: var(--space-xxs); }
    .mr-xs  { margin-right: var(--space-xs); }
    .mr-sm  { margin-right: var(--space-sm); }
    .mr-md  { margin-right: var(--space-md); }
    .mr-lg  { margin-right: var(--space-lg); }
    .mr-xl  { margin-right: var(--space-xl); }
    .mr-2xl { margin-right: var(--space-2xl); }
    .mr-3xl { margin-right: var(--space-3xl); }
    .mr-4xl { margin-right: var(--space-4xl); }
    /* Margin - axis */
    .mx-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .mx-xs  { margin-left: var(--space-xs);  margin-right: var(--space-xs); }
    .mx-sm  { margin-left: var(--space-sm);  margin-right: var(--space-sm); }
    .mx-md  { margin-left: var(--space-md);  margin-right: var(--space-md); }
    .mx-lg  { margin-left: var(--space-lg);  margin-right: var(--space-lg); }
    .mx-xl  { margin-left: var(--space-xl);  margin-right: var(--space-xl); }
    .mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
    .mx-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
    .mx-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); }

    .my-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .my-xs  { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
    .my-sm  { margin-top: var(--space-sm);  margin-bottom: var(--space-sm); }
    .my-md  { margin-top: var(--space-md);  margin-bottom: var(--space-md); }
    .my-lg  { margin-top: var(--space-lg);  margin-bottom: var(--space-lg); }
    .my-xl  { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
    .my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
    .my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }
    .my-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); }




/* Corner Radius Utilities */
    .card-corner {border-radius: var(--number-4) !important;}