/*****************************************************
* CSS Custom Properties (Variables)
* Shared design tokens for use across components.
******************************************************/
:root {
    /* Spacing scale (Tailwind-compatible) */
    --spacing-0: 0;
    --spacing-px: 1px;
    --spacing-0-25: 0.0625rem;
    --spacing-0-5: 0.125rem;
    --spacing-1: 0.25rem;
    --spacing-1-5: 0.375rem;
    --spacing-2: 0.5rem;
    --spacing-2-5: 0.625rem;
    --spacing-3: 0.75rem;
    --spacing-3-5: 0.875rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-14: 3.5rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-28: 7rem;
    --spacing-32: 8rem;
    --spacing-36: 9rem;
    --spacing-40: 10rem;
    --spacing-44: 11rem;
    --spacing-48: 12rem;
    --spacing-52: 13rem;
    --spacing-56: 14rem;
    --spacing-60: 15rem;
    --spacing-64: 16rem;
    --spacing-72: 18rem;
    --spacing-80: 20rem;
    --spacing-96: 24rem;

    /* Container scale (for min-w and max-w breakpoints) */
    --container-3xs: var(--spacing-64);    /* 16rem = 256px */
    --container-2xs: var(--spacing-72);    /* 18rem = 288px */
    --container-xs: var(--spacing-80);     /* 20rem = 320px */
    --container-sm: var(--spacing-96);     /* 24rem = 384px */
    --container-md: 28rem;                 /* 448px */
    --container-lg: 32rem;                 /* 512px */
    --container-xl: 36rem;                 /* 576px */
    --container-2xl: 42rem;                /* 672px */
    --container-3xl: 48rem;                /* 768px */
    --container-4xl: 56rem;                /* 896px */
    --container-5xl: 64rem;                /* 1024px */
    --container-6xl: 72rem;                /* 1152px */
    --container-7xl: 80rem;                /* 1280px */

    /* Font size scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;

    /* Max-width tokens */
    --max-w-popover: 300px;

    /* Table toolbar */
    --toolbar-mb: var(--spacing-3);

    /* Hierarchy child background step (per level) */
    --child-bg-step: 3%;
}

/*****************************************************
* Max-Width Popover Utility
******************************************************/
.mw-300 {
    max-width: var(--max-w-popover) !important;
}

/*****************************************************
* Semantic Table Column Width Utilities
******************************************************/
/* actions */
.col-w-xs {
    width: var(--spacing-12);
}

/* status */
.col-w-sm {
    width: var(--spacing-28);
}

/* short id */
.col-w-md {
    width: var(--spacing-40);
}

/* timestamps */
.col-w-lg {
    width: var(--spacing-44);
}

/* long id or short id with copy button*/
.col-w-xl {
    width: var(--spacing-48);
}

/* name */
.col-w-2xl {
    width: var(--spacing-60);
}

/* first column of table (checkbox/expandable icon in the first column)  */
.table-col-first-xs th:first-child,
.table-col-first-xs td:first-child {
    width: var(--spacing-12);
    max-width: var(--spacing-12);
}

/*****************************************************
* Tailwind-like Width Utilities
* Reference: https://tailwindcss.com/docs/width
******************************************************/
.w-0 { width: 0; }
.w-px { width: var(--spacing-px); }
.w-0\.5 { width: var(--spacing-0-5); }
.w-1 { width: var(--spacing-1); }
.w-1\.5 { width: var(--spacing-1-5); }
.w-2 { width: var(--spacing-2); }
.w-2\.5 { width: var(--spacing-2-5); }
.w-3 { width: var(--spacing-3); }
.w-3\.5 { width: var(--spacing-3-5); }
.w-4 { width: var(--spacing-4); }
.w-5 { width: var(--spacing-5); }
.w-6 { width: var(--spacing-6); }
.w-7 { width: var(--spacing-7); }
.w-8 { width: var(--spacing-8); }
.w-9 { width: var(--spacing-9); }
.w-10 { width: var(--spacing-10); }
.w-11 { width: var(--spacing-11); }
.w-12 { width: var(--spacing-12); }
.w-14 { width: var(--spacing-14); }
.w-16 { width: var(--spacing-16); }
.w-20 { width: var(--spacing-20); }
.w-24 { width: var(--spacing-24); }
.w-28 { width: var(--spacing-28); }
.w-32 { width: var(--spacing-32); }
.w-36 { width: var(--spacing-36); }
.w-40 { width: var(--spacing-40); }
.w-44 { width: var(--spacing-44); }
.w-48 { width: var(--spacing-48); }
.w-52 { width: var(--spacing-52); }
.w-56 { width: var(--spacing-56); }
.w-60 { width: var(--spacing-60); }
.w-64 { width: var(--spacing-64); }
.w-72 { width: var(--spacing-72); }
.w-80 { width: var(--spacing-80); }
.w-96 { width: var(--spacing-96); }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-2\/4 { width: 50%; }
.w-3\/4 { width: 75%; }

/*****************************************************
* Tailwind-like Min-Width Utilities
* Reference: https://tailwindcss.com/docs/min-width
******************************************************/
/* Fixed values */
.min-w-0 { min-width: 0; }
.min-w-px { min-width: var(--spacing-px); }
.min-w-full { min-width: 100%; }
.min-w-screen { min-width: 100vw; }

/* Spacing scale */
.min-w-1 { min-width: var(--spacing-1); }
.min-w-2 { min-width: var(--spacing-2); }
.min-w-3 { min-width: var(--spacing-3); }
.min-w-4 { min-width: var(--spacing-4); }
.min-w-5 { min-width: var(--spacing-5); }
.min-w-6 { min-width: var(--spacing-6); }
.min-w-7 { min-width: var(--spacing-7); }
.min-w-8 { min-width: var(--spacing-8); }
.min-w-9 { min-width: var(--spacing-9); }
.min-w-10 { min-width: var(--spacing-10); }
.min-w-11 { min-width: var(--spacing-11); }
.min-w-12 { min-width: var(--spacing-12); }
.min-w-14 { min-width: var(--spacing-14); }
.min-w-16 { min-width: var(--spacing-16); }
.min-w-20 { min-width: var(--spacing-20); }
.min-w-24 { min-width: var(--spacing-24); }
.min-w-28 { min-width: var(--spacing-28); }
.min-w-32 { min-width: var(--spacing-32); }
.min-w-36 { min-width: var(--spacing-36); }
.min-w-40 { min-width: var(--spacing-40); }
.min-w-44 { min-width: var(--spacing-44); }
.min-w-48 { min-width: var(--spacing-48); }
.min-w-52 { min-width: var(--spacing-52); }
.min-w-56 { min-width: var(--spacing-56); }
.min-w-60 { min-width: var(--spacing-60); }
.min-w-64 { min-width: var(--spacing-64); }
.min-w-72 { min-width: var(--spacing-72); }
.min-w-80 { min-width: var(--spacing-80); }
.min-w-96 { min-width: var(--spacing-96); }

/* Container scale */
.min-w-3xs { min-width: var(--container-3xs); }   /* 256px */
.min-w-2xs { min-width: var(--container-2xs); }   /* 288px */
.min-w-xs { min-width: var(--container-xs); }    /* 320px */
.min-w-sm { min-width: var(--container-sm); }    /* 384px */
.min-w-md { min-width: var(--container-md); }    /* 448px */
.min-w-lg { min-width: var(--container-lg); }    /* 512px */
.min-w-xl { min-width: var(--container-xl); }    /* 576px */
.min-w-2xl { min-width: var(--container-2xl); }   /* 672px */
.min-w-3xl { min-width: var(--container-3xl); }   /* 768px */
.min-w-4xl { min-width: var(--container-4xl); }   /* 896px */
.min-w-5xl { min-width: var(--container-5xl); }   /* 1024px */
.min-w-6xl { min-width: var(--container-6xl); }   /* 1152px */
.min-w-7xl { min-width: var(--container-7xl); }   /* 1280px */

/* Fractions */
.min-w-1\/2 { min-width: 50%; }
.min-w-1\/3 { min-width: 33.333333%; }
.min-w-2\/3 { min-width: 66.666667%; }
.min-w-1\/4 { min-width: 25%; }
.min-w-2\/4 { min-width: 50%; }
.min-w-3\/4 { min-width: 75%; }
.min-w-1\/5 { min-width: 20%; }
.min-w-2\/5 { min-width: 40%; }
.min-w-3\/5 { min-width: 60%; }
.min-w-4\/5 { min-width: 80%; }

/* Fit content */
.min-w-fit { min-width: fit-content; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }

/*****************************************************
* Tailwind-like Max-Width Utilities
* Reference: https://tailwindcss.com/docs/max-width
******************************************************/
/* Fixed values */
.max-w-0 { max-width: 0; }
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }

/* Container scale */
.max-w-3xs { max-width: var(--container-3xs); }   /* 256px */
.max-w-2xs { max-width: var(--container-2xs); }   /* 288px */
.max-w-xs { max-width: var(--container-xs); }    /* 320px */
.max-w-sm { max-width: var(--container-sm); }    /* 384px */
.max-w-md { max-width: var(--container-md); }    /* 448px */
.max-w-lg { max-width: var(--container-lg); }    /* 512px */
.max-w-xl { max-width: var(--container-xl); }    /* 576px */
.max-w-2xl { max-width: var(--container-2xl); }   /* 672px */
.max-w-3xl { max-width: var(--container-3xl); }   /* 768px */
.max-w-4xl { max-width: var(--container-4xl); }   /* 896px */
.max-w-5xl { max-width: var(--container-5xl); }   /* 1024px */
.max-w-6xl { max-width: var(--container-6xl); }   /* 1152px */
.max-w-7xl { max-width: var(--container-7xl); }   /* 1280px */

/* Screen breakpoint sizes */
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1536px; }

/* Prose (optimal reading width) */
.max-w-prose { max-width: 65ch; }

/* Fit content */
.max-w-fit { max-width: fit-content; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }

/* Fractions */
.max-w-1\/2 { max-width: 50%; }
.max-w-1\/3 { max-width: 33.333333%; }
.max-w-2\/3 { max-width: 66.666667%; }
.max-w-1\/4 { max-width: 25%; }
.max-w-2\/4 { max-width: 50%; }
.max-w-3\/4 { max-width: 75%; }
.max-w-1\/5 { max-width: 20%; }
.max-w-2\/5 { max-width: 40%; }
.max-w-3\/5 { max-width: 60%; }
.max-w-4\/5 { max-width: 80%; }
.max-w-9\/10 { max-width: 90%; }

/*****************************************************
* Tailwind-like Height Utilities
* Reference: https://tailwindcss.com/docs/height
******************************************************/
.h-0 { height: 0; }
.h-px { height: var(--spacing-px); }
.h-0\.5 { height: var(--spacing-0-5); }
.h-1 { height: var(--spacing-1); }
.h-1\.5 { height: var(--spacing-1-5); }
.h-2 { height: var(--spacing-2); }
.h-2\.5 { height: var(--spacing-2-5); }
.h-3 { height: var(--spacing-3); }
.h-3\.5 { height: var(--spacing-3-5); }
.h-4 { height: var(--spacing-4); }
.h-5 { height: var(--spacing-5); }
.h-6 { height: var(--spacing-6); }
.h-7 { height: var(--spacing-7); }
.h-8 { height: var(--spacing-8); }
.h-9 { height: var(--spacing-9); }
.h-10 { height: var(--spacing-10); }
.h-11 { height: var(--spacing-11); }
.h-12 { height: var(--spacing-12); }
.h-14 { height: var(--spacing-14); }
.h-16 { height: var(--spacing-16); }
.h-20 { height: var(--spacing-20); }
.h-24 { height: var(--spacing-24); }
.h-28 { height: var(--spacing-28); }
.h-32 { height: var(--spacing-32); }
.h-36 { height: var(--spacing-36); }
.h-40 { height: var(--spacing-40); }
.h-44 { height: var(--spacing-44); }
.h-48 { height: var(--spacing-48); }
.h-52 { height: var(--spacing-52); }
.h-56 { height: var(--spacing-56); }
.h-60 { height: var(--spacing-60); }
.h-64 { height: var(--spacing-64); }
.h-72 { height: var(--spacing-72); }
.h-80 { height: var(--spacing-80); }
.h-96 { height: var(--spacing-96); }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-2\/4 { height: 50%; }
.h-3\/4 { height: 75%; }

/*****************************************************
* Tailwind-like Min-Height Utilities
* Reference: https://tailwindcss.com/docs/min-height
******************************************************/
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/*****************************************************
* Tailwind-like Max-Height Utilities
* Reference: https://tailwindcss.com/docs/max-height
******************************************************/
.max-h-0 { max-height: 0; }
.max-h-none { max-height: none; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/*****************************************************
* Tailwind-like Whitespace Utilities
* Reference: https://tailwindcss.com/docs/whitespace
******************************************************/
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-break-spaces { white-space: break-spaces; }

/*****************************************************
* Tailwind-like Text Overflow Utilities
* Reference: https://tailwindcss.com/docs/text-overflow
******************************************************/
.truncate { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.text-ellipsis { text-overflow: ellipsis; }
.text-clip { text-overflow: clip; }

/*****************************************************
* Tailwind-like Text Align Utilities
* Reference: https://tailwindcss.com/docs/text-align
******************************************************/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/*****************************************************
* Tailwind-like Font Size Utilities
* Reference: https://tailwindcss.com/docs/font-size
******************************************************/
.text-xs { font-size: var(--text-xs); line-height: var(--spacing-4); }
.text-sm { font-size: var(--text-sm); line-height: var(--spacing-5); }
.text-base { font-size: var(--text-base); line-height: var(--spacing-6); }
.text-lg { font-size: var(--text-lg); line-height: var(--spacing-7); }
.text-xl { font-size: var(--text-xl); line-height: var(--spacing-7); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--spacing-8); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--spacing-9); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--spacing-10); }
.text-5xl { font-size: var(--text-5xl); line-height: 1; }
.text-6xl { font-size: var(--text-6xl); line-height: 1; }
.text-7xl { font-size: var(--text-7xl); line-height: 1; }
.text-8xl { font-size: var(--text-8xl); line-height: 1; }
.text-9xl { font-size: var(--text-9xl); line-height: 1; }

/*****************************************************
* Tailwind-like Overflow Utilities
* Reference: https://tailwindcss.com/docs/overflow
******************************************************/
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-clip { overflow: clip; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-clip { overflow-x: clip; }
.overflow-y-clip { overflow-y: clip; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-visible { overflow-y: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

/*****************************************************
* Tailwind-like Gap Utilities
* Reference: https://tailwindcss.com/docs/gap
******************************************************/
.gap-0 { gap: 0; }
.gap-px { gap: var(--spacing-px); }
.gap-0\.5 { gap: var(--spacing-0-5); }
.gap-1 { gap: var(--spacing-1); }
.gap-1\.5 { gap: var(--spacing-1-5); }
.gap-2 { gap: var(--spacing-2); }
.gap-2\.5 { gap: var(--spacing-2-5); }
.gap-3 { gap: var(--spacing-3); }
.gap-3\.5 { gap: var(--spacing-3-5); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-7 { gap: var(--spacing-7); }
.gap-8 { gap: var(--spacing-8); }
.gap-9 { gap: var(--spacing-9); }
.gap-10 { gap: var(--spacing-10); }
.gap-11 { gap: var(--spacing-11); }
.gap-12 { gap: var(--spacing-12); }
.gap-14 { gap: var(--spacing-14); }
.gap-16 { gap: var(--spacing-16); }
.gap-20 { gap: var(--spacing-20); }
.gap-24 { gap: var(--spacing-24); }
.gap-28 { gap: var(--spacing-28); }
.gap-32 { gap: var(--spacing-32); }
.gap-36 { gap: var(--spacing-36); }
.gap-40 { gap: var(--spacing-40); }
.gap-44 { gap: var(--spacing-44); }
.gap-48 { gap: var(--spacing-48); }
.gap-52 { gap: var(--spacing-52); }
.gap-56 { gap: var(--spacing-56); }
.gap-60 { gap: var(--spacing-60); }
.gap-64 { gap: var(--spacing-64); }
.gap-72 { gap: var(--spacing-72); }
.gap-80 { gap: var(--spacing-80); }
.gap-96 { gap: var(--spacing-96); }

/*****************************************************
* Tailwind-like Margin Utilities
* Reference: https://tailwindcss.com/docs/margin
******************************************************/
/* All sides */
.m-0 { margin: 0; }
.m-px { margin: var(--spacing-px); }
.m-0\.5 { margin: var(--spacing-0-5); }
.m-1 { margin: var(--spacing-1); }
.m-1\.5 { margin: var(--spacing-1-5); }
.m-2 { margin: var(--spacing-2); }
.m-2\.5 { margin: var(--spacing-2-5); }
.m-3 { margin: var(--spacing-3); }
.m-3\.5 { margin: var(--spacing-3-5); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-7 { margin: var(--spacing-7); }
.m-8 { margin: var(--spacing-8); }
.m-9 { margin: var(--spacing-9); }
.m-10 { margin: var(--spacing-10); }
.m-11 { margin: var(--spacing-11); }
.m-12 { margin: var(--spacing-12); }
.m-14 { margin: var(--spacing-14); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-28 { margin: var(--spacing-28); }
.m-32 { margin: var(--spacing-32); }
.m-36 { margin: var(--spacing-36); }
.m-40 { margin: var(--spacing-40); }
.m-44 { margin: var(--spacing-44); }
.m-48 { margin: var(--spacing-48); }
.m-52 { margin: var(--spacing-52); }
.m-56 { margin: var(--spacing-56); }
.m-60 { margin: var(--spacing-60); }
.m-64 { margin: var(--spacing-64); }
.m-72 { margin: var(--spacing-72); }
.m-80 { margin: var(--spacing-80); }
.m-96 { margin: var(--spacing-96); }
.m-auto { margin: auto; }

/* Horizontal margins (left and right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-px { margin-left: var(--spacing-px); margin-right: var(--spacing-px); }
.mx-0\.5 { margin-left: var(--spacing-0-5); margin-right: var(--spacing-0-5); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-1\.5 { margin-left: var(--spacing-1-5); margin-right: var(--spacing-1-5); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-2\.5 { margin-left: var(--spacing-2-5); margin-right: var(--spacing-2-5); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-3\.5 { margin-left: var(--spacing-3-5); margin-right: var(--spacing-3-5); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-7 { margin-left: var(--spacing-7); margin-right: var(--spacing-7); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.mx-9 { margin-left: var(--spacing-9); margin-right: var(--spacing-9); }
.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
.mx-11 { margin-left: var(--spacing-11); margin-right: var(--spacing-11); }
.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
.mx-14 { margin-left: var(--spacing-14); margin-right: var(--spacing-14); }
.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.mx-20 { margin-left: var(--spacing-20); margin-right: var(--spacing-20); }
.mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }
.mx-28 { margin-left: var(--spacing-28); margin-right: var(--spacing-28); }
.mx-32 { margin-left: var(--spacing-32); margin-right: var(--spacing-32); }
.mx-36 { margin-left: var(--spacing-36); margin-right: var(--spacing-36); }
.mx-40 { margin-left: var(--spacing-40); margin-right: var(--spacing-40); }
.mx-44 { margin-left: var(--spacing-44); margin-right: var(--spacing-44); }
.mx-48 { margin-left: var(--spacing-48); margin-right: var(--spacing-48); }
.mx-52 { margin-left: var(--spacing-52); margin-right: var(--spacing-52); }
.mx-56 { margin-left: var(--spacing-56); margin-right: var(--spacing-56); }
.mx-60 { margin-left: var(--spacing-60); margin-right: var(--spacing-60); }
.mx-64 { margin-left: var(--spacing-64); margin-right: var(--spacing-64); }
.mx-72 { margin-left: var(--spacing-72); margin-right: var(--spacing-72); }
.mx-80 { margin-left: var(--spacing-80); margin-right: var(--spacing-80); }
.mx-96 { margin-left: var(--spacing-96); margin-right: var(--spacing-96); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical margins (top and bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-px { margin-top: var(--spacing-px); margin-bottom: var(--spacing-px); }
.my-0\.5 { margin-top: var(--spacing-0-5); margin-bottom: var(--spacing-0-5); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-1\.5 { margin-top: var(--spacing-1-5); margin-bottom: var(--spacing-1-5); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-2\.5 { margin-top: var(--spacing-2-5); margin-bottom: var(--spacing-2-5); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-3\.5 { margin-top: var(--spacing-3-5); margin-bottom: var(--spacing-3-5); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-7 { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-9 { margin-top: var(--spacing-9); margin-bottom: var(--spacing-9); }
.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
.my-11 { margin-top: var(--spacing-11); margin-bottom: var(--spacing-11); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.my-14 { margin-top: var(--spacing-14); margin-bottom: var(--spacing-14); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }
.my-28 { margin-top: var(--spacing-28); margin-bottom: var(--spacing-28); }
.my-32 { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }
.my-36 { margin-top: var(--spacing-36); margin-bottom: var(--spacing-36); }
.my-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
.my-44 { margin-top: var(--spacing-44); margin-bottom: var(--spacing-44); }
.my-48 { margin-top: var(--spacing-48); margin-bottom: var(--spacing-48); }
.my-52 { margin-top: var(--spacing-52); margin-bottom: var(--spacing-52); }
.my-56 { margin-top: var(--spacing-56); margin-bottom: var(--spacing-56); }
.my-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
.my-64 { margin-top: var(--spacing-64); margin-bottom: var(--spacing-64); }
.my-72 { margin-top: var(--spacing-72); margin-bottom: var(--spacing-72); }
.my-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.my-96 { margin-top: var(--spacing-96); margin-bottom: var(--spacing-96); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Top margin */
.mt-0 { margin-top: 0; }
.mt-px { margin-top: var(--spacing-px); }
.mt-0\.5 { margin-top: var(--spacing-0-5); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-1\.5 { margin-top: var(--spacing-1-5); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-2\.5 { margin-top: var(--spacing-2-5); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-3\.5 { margin-top: var(--spacing-3-5); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-7 { margin-top: var(--spacing-7); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-9 { margin-top: var(--spacing-9); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-11 { margin-top: var(--spacing-11); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-14 { margin-top: var(--spacing-14); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-28 { margin-top: var(--spacing-28); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-36 { margin-top: var(--spacing-36); }
.mt-40 { margin-top: var(--spacing-40); }
.mt-44 { margin-top: var(--spacing-44); }
.mt-48 { margin-top: var(--spacing-48); }
.mt-52 { margin-top: var(--spacing-52); }
.mt-56 { margin-top: var(--spacing-56); }
.mt-60 { margin-top: var(--spacing-60); }
.mt-64 { margin-top: var(--spacing-64); }
.mt-72 { margin-top: var(--spacing-72); }
.mt-80 { margin-top: var(--spacing-80); }
.mt-96 { margin-top: var(--spacing-96); }
.mt-auto { margin-top: auto; }

/* Right margin */
.mr-0 { margin-right: 0; }
.mr-px { margin-right: var(--spacing-px); }
.mr-0\.5 { margin-right: var(--spacing-0-5); }
.mr-1 { margin-right: var(--spacing-1); }
.mr-1\.5 { margin-right: var(--spacing-1-5); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-2\.5 { margin-right: var(--spacing-2-5); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-3\.5 { margin-right: var(--spacing-3-5); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-5 { margin-right: var(--spacing-5); }
.mr-6 { margin-right: var(--spacing-6); }
.mr-7 { margin-right: var(--spacing-7); }
.mr-8 { margin-right: var(--spacing-8); }
.mr-9 { margin-right: var(--spacing-9); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-11 { margin-right: var(--spacing-11); }
.mr-12 { margin-right: var(--spacing-12); }
.mr-14 { margin-right: var(--spacing-14); }
.mr-16 { margin-right: var(--spacing-16); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-24 { margin-right: var(--spacing-24); }
.mr-28 { margin-right: var(--spacing-28); }
.mr-32 { margin-right: var(--spacing-32); }
.mr-36 { margin-right: var(--spacing-36); }
.mr-40 { margin-right: var(--spacing-40); }
.mr-44 { margin-right: var(--spacing-44); }
.mr-48 { margin-right: var(--spacing-48); }
.mr-52 { margin-right: var(--spacing-52); }
.mr-56 { margin-right: var(--spacing-56); }
.mr-60 { margin-right: var(--spacing-60); }
.mr-64 { margin-right: var(--spacing-64); }
.mr-72 { margin-right: var(--spacing-72); }
.mr-80 { margin-right: var(--spacing-80); }
.mr-96 { margin-right: var(--spacing-96); }
.mr-auto { margin-right: auto; }

/* Bottom margin */
.mb-0 { margin-bottom: 0; }
.mb-px { margin-bottom: var(--spacing-px); }
.mb-0\.5 { margin-bottom: var(--spacing-0-5); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-1\.5 { margin-bottom: var(--spacing-1-5); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-2\.5 { margin-bottom: var(--spacing-2-5); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-3\.5 { margin-bottom: var(--spacing-3-5); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-7 { margin-bottom: var(--spacing-7); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-9 { margin-bottom: var(--spacing-9); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-11 { margin-bottom: var(--spacing-11); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-14 { margin-bottom: var(--spacing-14); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-28 { margin-bottom: var(--spacing-28); }
.mb-32 { margin-bottom: var(--spacing-32); }
.mb-36 { margin-bottom: var(--spacing-36); }
.mb-40 { margin-bottom: var(--spacing-40); }
.mb-44 { margin-bottom: var(--spacing-44); }
.mb-48 { margin-bottom: var(--spacing-48); }
.mb-52 { margin-bottom: var(--spacing-52); }
.mb-56 { margin-bottom: var(--spacing-56); }
.mb-60 { margin-bottom: var(--spacing-60); }
.mb-64 { margin-bottom: var(--spacing-64); }
.mb-72 { margin-bottom: var(--spacing-72); }
.mb-80 { margin-bottom: var(--spacing-80); }
.mb-96 { margin-bottom: var(--spacing-96); }
.mb-auto { margin-bottom: auto; }

/* Left margin */
.ml-0 { margin-left: 0; }
.ml-px { margin-left: var(--spacing-px); }
.ml-0\.5 { margin-left: var(--spacing-0-5); }
.ml-1 { margin-left: var(--spacing-1); }
.ml-1\.5 { margin-left: var(--spacing-1-5); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-2\.5 { margin-left: var(--spacing-2-5); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-3\.5 { margin-left: var(--spacing-3-5); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-5 { margin-left: var(--spacing-5); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-7 { margin-left: var(--spacing-7); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-9 { margin-left: var(--spacing-9); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-11 { margin-left: var(--spacing-11); }
.ml-12 { margin-left: var(--spacing-12); }
.ml-14 { margin-left: var(--spacing-14); }
.ml-16 { margin-left: var(--spacing-16); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-24 { margin-left: var(--spacing-24); }
.ml-28 { margin-left: var(--spacing-28); }
.ml-32 { margin-left: var(--spacing-32); }
.ml-36 { margin-left: var(--spacing-36); }
.ml-40 { margin-left: var(--spacing-40); }
.ml-44 { margin-left: var(--spacing-44); }
.ml-48 { margin-left: var(--spacing-48); }
.ml-52 { margin-left: var(--spacing-52); }
.ml-56 { margin-left: var(--spacing-56); }
.ml-60 { margin-left: var(--spacing-60); }
.ml-64 { margin-left: var(--spacing-64); }
.ml-72 { margin-left: var(--spacing-72); }
.ml-80 { margin-left: var(--spacing-80); }
.ml-96 { margin-left: var(--spacing-96); }
.ml-auto { margin-left: auto; }

/* Inline-start margin (logical property) */
.ms-0 { margin-inline-start: 0; }
.ms-px { margin-inline-start: var(--spacing-px); }
.ms-0\.5 { margin-inline-start: var(--spacing-0-5); }
.ms-1 { margin-inline-start: var(--spacing-1); }
.ms-1\.5 { margin-inline-start: var(--spacing-1-5); }
.ms-2 { margin-inline-start: var(--spacing-2); }
.ms-2\.5 { margin-inline-start: var(--spacing-2-5); }
.ms-3 { margin-inline-start: var(--spacing-3); }
.ms-3\.5 { margin-inline-start: var(--spacing-3-5); }
.ms-4 { margin-inline-start: var(--spacing-4); }
.ms-5 { margin-inline-start: var(--spacing-5); }
.ms-6 { margin-inline-start: var(--spacing-6); }
.ms-7 { margin-inline-start: var(--spacing-7); }
.ms-8 { margin-inline-start: var(--spacing-8); }
.ms-9 { margin-inline-start: var(--spacing-9); }
.ms-10 { margin-inline-start: var(--spacing-10); }
.ms-11 { margin-inline-start: var(--spacing-11); }
.ms-12 { margin-inline-start: var(--spacing-12); }
.ms-14 { margin-inline-start: var(--spacing-14); }
.ms-16 { margin-inline-start: var(--spacing-16); }
.ms-20 { margin-inline-start: var(--spacing-20); }
.ms-24 { margin-inline-start: var(--spacing-24); }
.ms-28 { margin-inline-start: var(--spacing-28); }
.ms-32 { margin-inline-start: var(--spacing-32); }
.ms-36 { margin-inline-start: var(--spacing-36); }
.ms-40 { margin-inline-start: var(--spacing-40); }
.ms-44 { margin-inline-start: var(--spacing-44); }
.ms-48 { margin-inline-start: var(--spacing-48); }
.ms-52 { margin-inline-start: var(--spacing-52); }
.ms-56 { margin-inline-start: var(--spacing-56); }
.ms-60 { margin-inline-start: var(--spacing-60); }
.ms-64 { margin-inline-start: var(--spacing-64); }
.ms-72 { margin-inline-start: var(--spacing-72); }
.ms-80 { margin-inline-start: var(--spacing-80); }
.ms-96 { margin-inline-start: var(--spacing-96); }
.ms-auto { margin-inline-start: auto; }

/* Inline-end margin (logical property) */
.me-0 { margin-inline-end: 0; }
.me-px { margin-inline-end: var(--spacing-px); }
.me-0\.5 { margin-inline-end: var(--spacing-0-5); }
.me-1 { margin-inline-end: var(--spacing-1); }
.me-1\.5 { margin-inline-end: var(--spacing-1-5); }
.me-2 { margin-inline-end: var(--spacing-2); }
.me-2\.5 { margin-inline-end: var(--spacing-2-5); }
.me-3 { margin-inline-end: var(--spacing-3); }
.me-3\.5 { margin-inline-end: var(--spacing-3-5); }
.me-4 { margin-inline-end: var(--spacing-4); }
.me-5 { margin-inline-end: var(--spacing-5); }
.me-6 { margin-inline-end: var(--spacing-6); }
.me-7 { margin-inline-end: var(--spacing-7); }
.me-8 { margin-inline-end: var(--spacing-8); }
.me-9 { margin-inline-end: var(--spacing-9); }
.me-10 { margin-inline-end: var(--spacing-10); }
.me-11 { margin-inline-end: var(--spacing-11); }
.me-12 { margin-inline-end: var(--spacing-12); }
.me-14 { margin-inline-end: var(--spacing-14); }
.me-16 { margin-inline-end: var(--spacing-16); }
.me-20 { margin-inline-end: var(--spacing-20); }
.me-24 { margin-inline-end: var(--spacing-24); }
.me-28 { margin-inline-end: var(--spacing-28); }
.me-32 { margin-inline-end: var(--spacing-32); }
.me-36 { margin-inline-end: var(--spacing-36); }
.me-40 { margin-inline-end: var(--spacing-40); }
.me-44 { margin-inline-end: var(--spacing-44); }
.me-48 { margin-inline-end: var(--spacing-48); }
.me-52 { margin-inline-end: var(--spacing-52); }
.me-56 { margin-inline-end: var(--spacing-56); }
.me-60 { margin-inline-end: var(--spacing-60); }
.me-64 { margin-inline-end: var(--spacing-64); }
.me-72 { margin-inline-end: var(--spacing-72); }
.me-80 { margin-inline-end: var(--spacing-80); }
.me-96 { margin-inline-end: var(--spacing-96); }
.me-auto { margin-inline-end: auto; }

/* Negative margins - All sides */
.-m-px { margin: -1px; }
.-m-0\.5 { margin: calc(var(--spacing-0-5) * -1); }
.-m-1 { margin: calc(var(--spacing-1) * -1); }
.-m-1\.5 { margin: calc(var(--spacing-1-5) * -1); }
.-m-2 { margin: calc(var(--spacing-2) * -1); }
.-m-2\.5 { margin: calc(var(--spacing-2-5) * -1); }
.-m-3 { margin: calc(var(--spacing-3) * -1); }
.-m-3\.5 { margin: calc(var(--spacing-3-5) * -1); }
.-m-4 { margin: calc(var(--spacing-4) * -1); }
.-m-5 { margin: calc(var(--spacing-5) * -1); }
.-m-6 { margin: calc(var(--spacing-6) * -1); }
.-m-7 { margin: calc(var(--spacing-7) * -1); }
.-m-8 { margin: calc(var(--spacing-8) * -1); }
.-m-9 { margin: calc(var(--spacing-9) * -1); }
.-m-10 { margin: calc(var(--spacing-10) * -1); }
.-m-11 { margin: calc(var(--spacing-11) * -1); }
.-m-12 { margin: calc(var(--spacing-12) * -1); }
.-m-14 { margin: calc(var(--spacing-14) * -1); }
.-m-16 { margin: calc(var(--spacing-16) * -1); }
.-m-20 { margin: calc(var(--spacing-20) * -1); }
.-m-24 { margin: calc(var(--spacing-24) * -1); }
.-m-28 { margin: calc(var(--spacing-28) * -1); }
.-m-32 { margin: calc(var(--spacing-32) * -1); }
.-m-36 { margin: calc(var(--spacing-36) * -1); }
.-m-40 { margin: calc(var(--spacing-40) * -1); }
.-m-44 { margin: calc(var(--spacing-44) * -1); }
.-m-48 { margin: calc(var(--spacing-48) * -1); }
.-m-52 { margin: calc(var(--spacing-52) * -1); }
.-m-56 { margin: calc(var(--spacing-56) * -1); }
.-m-60 { margin: calc(var(--spacing-60) * -1); }
.-m-64 { margin: calc(var(--spacing-64) * -1); }
.-m-72 { margin: calc(var(--spacing-72) * -1); }
.-m-80 { margin: calc(var(--spacing-80) * -1); }
.-m-96 { margin: calc(var(--spacing-96) * -1); }

/* Negative margins - Horizontal */
.-mx-px { margin-left: -1px; margin-right: -1px; }
.-mx-0\.5 { margin-left: calc(var(--spacing-0-5) * -1); margin-right: calc(var(--spacing-0-5) * -1); }
.-mx-1 { margin-left: calc(var(--spacing-1) * -1); margin-right: calc(var(--spacing-1) * -1); }
.-mx-1\.5 { margin-left: calc(var(--spacing-1-5) * -1); margin-right: calc(var(--spacing-1-5) * -1); }
.-mx-2 { margin-left: calc(var(--spacing-2) * -1); margin-right: calc(var(--spacing-2) * -1); }
.-mx-2\.5 { margin-left: calc(var(--spacing-2-5) * -1); margin-right: calc(var(--spacing-2-5) * -1); }
.-mx-3 { margin-left: calc(var(--spacing-3) * -1); margin-right: calc(var(--spacing-3) * -1); }
.-mx-3\.5 { margin-left: calc(var(--spacing-3-5) * -1); margin-right: calc(var(--spacing-3-5) * -1); }
.-mx-4 { margin-left: calc(var(--spacing-4) * -1); margin-right: calc(var(--spacing-4) * -1); }
.-mx-5 { margin-left: calc(var(--spacing-5) * -1); margin-right: calc(var(--spacing-5) * -1); }
.-mx-6 { margin-left: calc(var(--spacing-6) * -1); margin-right: calc(var(--spacing-6) * -1); }
.-mx-7 { margin-left: calc(var(--spacing-7) * -1); margin-right: calc(var(--spacing-7) * -1); }
.-mx-8 { margin-left: calc(var(--spacing-8) * -1); margin-right: calc(var(--spacing-8) * -1); }
.-mx-9 { margin-left: calc(var(--spacing-9) * -1); margin-right: calc(var(--spacing-9) * -1); }
.-mx-10 { margin-left: calc(var(--spacing-10) * -1); margin-right: calc(var(--spacing-10) * -1); }
.-mx-11 { margin-left: calc(var(--spacing-11) * -1); margin-right: calc(var(--spacing-11) * -1); }
.-mx-12 { margin-left: calc(var(--spacing-12) * -1); margin-right: calc(var(--spacing-12) * -1); }
.-mx-14 { margin-left: calc(var(--spacing-14) * -1); margin-right: calc(var(--spacing-14) * -1); }
.-mx-16 { margin-left: calc(var(--spacing-16) * -1); margin-right: calc(var(--spacing-16) * -1); }
.-mx-20 { margin-left: calc(var(--spacing-20) * -1); margin-right: calc(var(--spacing-20) * -1); }
.-mx-24 { margin-left: calc(var(--spacing-24) * -1); margin-right: calc(var(--spacing-24) * -1); }
.-mx-28 { margin-left: calc(var(--spacing-28) * -1); margin-right: calc(var(--spacing-28) * -1); }
.-mx-32 { margin-left: calc(var(--spacing-32) * -1); margin-right: calc(var(--spacing-32) * -1); }
.-mx-36 { margin-left: calc(var(--spacing-36) * -1); margin-right: calc(var(--spacing-36) * -1); }
.-mx-40 { margin-left: calc(var(--spacing-40) * -1); margin-right: calc(var(--spacing-40) * -1); }
.-mx-44 { margin-left: calc(var(--spacing-44) * -1); margin-right: calc(var(--spacing-44) * -1); }
.-mx-48 { margin-left: calc(var(--spacing-48) * -1); margin-right: calc(var(--spacing-48) * -1); }
.-mx-52 { margin-left: calc(var(--spacing-52) * -1); margin-right: calc(var(--spacing-52) * -1); }
.-mx-56 { margin-left: calc(var(--spacing-56) * -1); margin-right: calc(var(--spacing-56) * -1); }
.-mx-60 { margin-left: calc(var(--spacing-60) * -1); margin-right: calc(var(--spacing-60) * -1); }
.-mx-64 { margin-left: calc(var(--spacing-64) * -1); margin-right: calc(var(--spacing-64) * -1); }
.-mx-72 { margin-left: calc(var(--spacing-72) * -1); margin-right: calc(var(--spacing-72) * -1); }
.-mx-80 { margin-left: calc(var(--spacing-80) * -1); margin-right: calc(var(--spacing-80) * -1); }
.-mx-96 { margin-left: calc(var(--spacing-96) * -1); margin-right: calc(var(--spacing-96) * -1); }

/* Negative margins - Vertical */
.-my-px { margin-top: -1px; margin-bottom: -1px; }
.-my-0\.5 { margin-top: calc(var(--spacing-0-5) * -1); margin-bottom: calc(var(--spacing-0-5) * -1); }
.-my-1 { margin-top: calc(var(--spacing-1) * -1); margin-bottom: calc(var(--spacing-1) * -1); }
.-my-1\.5 { margin-top: calc(var(--spacing-1-5) * -1); margin-bottom: calc(var(--spacing-1-5) * -1); }
.-my-2 { margin-top: calc(var(--spacing-2) * -1); margin-bottom: calc(var(--spacing-2) * -1); }
.-my-2\.5 { margin-top: calc(var(--spacing-2-5) * -1); margin-bottom: calc(var(--spacing-2-5) * -1); }
.-my-3 { margin-top: calc(var(--spacing-3) * -1); margin-bottom: calc(var(--spacing-3) * -1); }
.-my-3\.5 { margin-top: calc(var(--spacing-3-5) * -1); margin-bottom: calc(var(--spacing-3-5) * -1); }
.-my-4 { margin-top: calc(var(--spacing-4) * -1); margin-bottom: calc(var(--spacing-4) * -1); }
.-my-5 { margin-top: calc(var(--spacing-5) * -1); margin-bottom: calc(var(--spacing-5) * -1); }
.-my-6 { margin-top: calc(var(--spacing-6) * -1); margin-bottom: calc(var(--spacing-6) * -1); }
.-my-7 { margin-top: calc(var(--spacing-7) * -1); margin-bottom: calc(var(--spacing-7) * -1); }
.-my-8 { margin-top: calc(var(--spacing-8) * -1); margin-bottom: calc(var(--spacing-8) * -1); }
.-my-9 { margin-top: calc(var(--spacing-9) * -1); margin-bottom: calc(var(--spacing-9) * -1); }
.-my-10 { margin-top: calc(var(--spacing-10) * -1); margin-bottom: calc(var(--spacing-10) * -1); }
.-my-11 { margin-top: calc(var(--spacing-11) * -1); margin-bottom: calc(var(--spacing-11) * -1); }
.-my-12 { margin-top: calc(var(--spacing-12) * -1); margin-bottom: calc(var(--spacing-12) * -1); }
.-my-14 { margin-top: calc(var(--spacing-14) * -1); margin-bottom: calc(var(--spacing-14) * -1); }
.-my-16 { margin-top: calc(var(--spacing-16) * -1); margin-bottom: calc(var(--spacing-16) * -1); }
.-my-20 { margin-top: calc(var(--spacing-20) * -1); margin-bottom: calc(var(--spacing-20) * -1); }
.-my-24 { margin-top: calc(var(--spacing-24) * -1); margin-bottom: calc(var(--spacing-24) * -1); }
.-my-28 { margin-top: calc(var(--spacing-28) * -1); margin-bottom: calc(var(--spacing-28) * -1); }
.-my-32 { margin-top: calc(var(--spacing-32) * -1); margin-bottom: calc(var(--spacing-32) * -1); }
.-my-36 { margin-top: calc(var(--spacing-36) * -1); margin-bottom: calc(var(--spacing-36) * -1); }
.-my-40 { margin-top: calc(var(--spacing-40) * -1); margin-bottom: calc(var(--spacing-40) * -1); }
.-my-44 { margin-top: calc(var(--spacing-44) * -1); margin-bottom: calc(var(--spacing-44) * -1); }
.-my-48 { margin-top: calc(var(--spacing-48) * -1); margin-bottom: calc(var(--spacing-48) * -1); }
.-my-52 { margin-top: calc(var(--spacing-52) * -1); margin-bottom: calc(var(--spacing-52) * -1); }
.-my-56 { margin-top: calc(var(--spacing-56) * -1); margin-bottom: calc(var(--spacing-56) * -1); }
.-my-60 { margin-top: calc(var(--spacing-60) * -1); margin-bottom: calc(var(--spacing-60) * -1); }
.-my-64 { margin-top: calc(var(--spacing-64) * -1); margin-bottom: calc(var(--spacing-64) * -1); }
.-my-72 { margin-top: calc(var(--spacing-72) * -1); margin-bottom: calc(var(--spacing-72) * -1); }
.-my-80 { margin-top: calc(var(--spacing-80) * -1); margin-bottom: calc(var(--spacing-80) * -1); }
.-my-96 { margin-top: calc(var(--spacing-96) * -1); margin-bottom: calc(var(--spacing-96) * -1); }

/* Negative margins - Top */
.-mt-px { margin-top: -1px; }
.-mt-0\.5 { margin-top: calc(var(--spacing-0-5) * -1); }
.-mt-1 { margin-top: calc(var(--spacing-1) * -1); }
.-mt-1\.5 { margin-top: calc(var(--spacing-1-5) * -1); }
.-mt-2 { margin-top: calc(var(--spacing-2) * -1); }
.-mt-2\.5 { margin-top: calc(var(--spacing-2-5) * -1); }
.-mt-3 { margin-top: calc(var(--spacing-3) * -1); }
.-mt-3\.5 { margin-top: calc(var(--spacing-3-5) * -1); }
.-mt-4 { margin-top: calc(var(--spacing-4) * -1); }
.-mt-5 { margin-top: calc(var(--spacing-5) * -1); }
.-mt-6 { margin-top: calc(var(--spacing-6) * -1); }
.-mt-7 { margin-top: calc(var(--spacing-7) * -1); }
.-mt-8 { margin-top: calc(var(--spacing-8) * -1); }
.-mt-9 { margin-top: calc(var(--spacing-9) * -1); }
.-mt-10 { margin-top: calc(var(--spacing-10) * -1); }
.-mt-11 { margin-top: calc(var(--spacing-11) * -1); }
.-mt-12 { margin-top: calc(var(--spacing-12) * -1); }
.-mt-14 { margin-top: calc(var(--spacing-14) * -1); }
.-mt-16 { margin-top: calc(var(--spacing-16) * -1); }
.-mt-20 { margin-top: calc(var(--spacing-20) * -1); }
.-mt-24 { margin-top: calc(var(--spacing-24) * -1); }
.-mt-28 { margin-top: calc(var(--spacing-28) * -1); }
.-mt-32 { margin-top: calc(var(--spacing-32) * -1); }
.-mt-36 { margin-top: calc(var(--spacing-36) * -1); }
.-mt-40 { margin-top: calc(var(--spacing-40) * -1); }
.-mt-44 { margin-top: calc(var(--spacing-44) * -1); }
.-mt-48 { margin-top: calc(var(--spacing-48) * -1); }
.-mt-52 { margin-top: calc(var(--spacing-52) * -1); }
.-mt-56 { margin-top: calc(var(--spacing-56) * -1); }
.-mt-60 { margin-top: calc(var(--spacing-60) * -1); }
.-mt-64 { margin-top: calc(var(--spacing-64) * -1); }
.-mt-72 { margin-top: calc(var(--spacing-72) * -1); }
.-mt-80 { margin-top: calc(var(--spacing-80) * -1); }
.-mt-96 { margin-top: calc(var(--spacing-96) * -1); }

/* Negative margins - Right */
.-mr-px { margin-right: -1px; }
.-mr-0\.5 { margin-right: calc(var(--spacing-0-5) * -1); }
.-mr-1 { margin-right: calc(var(--spacing-1) * -1); }
.-mr-1\.5 { margin-right: calc(var(--spacing-1-5) * -1); }
.-mr-2 { margin-right: calc(var(--spacing-2) * -1); }
.-mr-2\.5 { margin-right: calc(var(--spacing-2-5) * -1); }
.-mr-3 { margin-right: calc(var(--spacing-3) * -1); }
.-mr-3\.5 { margin-right: calc(var(--spacing-3-5) * -1); }
.-mr-4 { margin-right: calc(var(--spacing-4) * -1); }
.-mr-5 { margin-right: calc(var(--spacing-5) * -1); }
.-mr-6 { margin-right: calc(var(--spacing-6) * -1); }
.-mr-7 { margin-right: calc(var(--spacing-7) * -1); }
.-mr-8 { margin-right: calc(var(--spacing-8) * -1); }
.-mr-9 { margin-right: calc(var(--spacing-9) * -1); }
.-mr-10 { margin-right: calc(var(--spacing-10) * -1); }
.-mr-11 { margin-right: calc(var(--spacing-11) * -1); }
.-mr-12 { margin-right: calc(var(--spacing-12) * -1); }
.-mr-14 { margin-right: calc(var(--spacing-14) * -1); }
.-mr-16 { margin-right: calc(var(--spacing-16) * -1); }
.-mr-20 { margin-right: calc(var(--spacing-20) * -1); }
.-mr-24 { margin-right: calc(var(--spacing-24) * -1); }
.-mr-28 { margin-right: calc(var(--spacing-28) * -1); }
.-mr-32 { margin-right: calc(var(--spacing-32) * -1); }
.-mr-36 { margin-right: calc(var(--spacing-36) * -1); }
.-mr-40 { margin-right: calc(var(--spacing-40) * -1); }
.-mr-44 { margin-right: calc(var(--spacing-44) * -1); }
.-mr-48 { margin-right: calc(var(--spacing-48) * -1); }
.-mr-52 { margin-right: calc(var(--spacing-52) * -1); }
.-mr-56 { margin-right: calc(var(--spacing-56) * -1); }
.-mr-60 { margin-right: calc(var(--spacing-60) * -1); }
.-mr-64 { margin-right: calc(var(--spacing-64) * -1); }
.-mr-72 { margin-right: calc(var(--spacing-72) * -1); }
.-mr-80 { margin-right: calc(var(--spacing-80) * -1); }
.-mr-96 { margin-right: calc(var(--spacing-96) * -1); }

/* Negative margins - Bottom */
.-mb-px { margin-bottom: -1px; }
.-mb-0\.5 { margin-bottom: calc(var(--spacing-0-5) * -1); }
.-mb-1 { margin-bottom: calc(var(--spacing-1) * -1); }
.-mb-1\.5 { margin-bottom: calc(var(--spacing-1-5) * -1); }
.-mb-2 { margin-bottom: calc(var(--spacing-2) * -1); }
.-mb-2\.5 { margin-bottom: calc(var(--spacing-2-5) * -1); }
.-mb-3 { margin-bottom: calc(var(--spacing-3) * -1); }
.-mb-3\.5 { margin-bottom: calc(var(--spacing-3-5) * -1); }
.-mb-4 { margin-bottom: calc(var(--spacing-4) * -1); }
.-mb-5 { margin-bottom: calc(var(--spacing-5) * -1); }
.-mb-6 { margin-bottom: calc(var(--spacing-6) * -1); }
.-mb-7 { margin-bottom: calc(var(--spacing-7) * -1); }
.-mb-8 { margin-bottom: calc(var(--spacing-8) * -1); }
.-mb-9 { margin-bottom: calc(var(--spacing-9) * -1); }
.-mb-10 { margin-bottom: calc(var(--spacing-10) * -1); }
.-mb-11 { margin-bottom: calc(var(--spacing-11) * -1); }
.-mb-12 { margin-bottom: calc(var(--spacing-12) * -1); }
.-mb-14 { margin-bottom: calc(var(--spacing-14) * -1); }
.-mb-16 { margin-bottom: calc(var(--spacing-16) * -1); }
.-mb-20 { margin-bottom: calc(var(--spacing-20) * -1); }
.-mb-24 { margin-bottom: calc(var(--spacing-24) * -1); }
.-mb-28 { margin-bottom: calc(var(--spacing-28) * -1); }
.-mb-32 { margin-bottom: calc(var(--spacing-32) * -1); }
.-mb-36 { margin-bottom: calc(var(--spacing-36) * -1); }
.-mb-40 { margin-bottom: calc(var(--spacing-40) * -1); }
.-mb-44 { margin-bottom: calc(var(--spacing-44) * -1); }
.-mb-48 { margin-bottom: calc(var(--spacing-48) * -1); }
.-mb-52 { margin-bottom: calc(var(--spacing-52) * -1); }
.-mb-56 { margin-bottom: calc(var(--spacing-56) * -1); }
.-mb-60 { margin-bottom: calc(var(--spacing-60) * -1); }
.-mb-64 { margin-bottom: calc(var(--spacing-64) * -1); }
.-mb-72 { margin-bottom: calc(var(--spacing-72) * -1); }
.-mb-80 { margin-bottom: calc(var(--spacing-80) * -1); }
.-mb-96 { margin-bottom: calc(var(--spacing-96) * -1); }

/* Negative margins - Left */
.-ml-px { margin-left: -1px; }
.-ml-0\.5 { margin-left: calc(var(--spacing-0-5) * -1); }
.-ml-1 { margin-left: calc(var(--spacing-1) * -1); }
.-ml-1\.5 { margin-left: calc(var(--spacing-1-5) * -1); }
.-ml-2 { margin-left: calc(var(--spacing-2) * -1); }
.-ml-2\.5 { margin-left: calc(var(--spacing-2-5) * -1); }
.-ml-3 { margin-left: calc(var(--spacing-3) * -1); }
.-ml-3\.5 { margin-left: calc(var(--spacing-3-5) * -1); }
.-ml-4 { margin-left: calc(var(--spacing-4) * -1); }
.-ml-5 { margin-left: calc(var(--spacing-5) * -1); }
.-ml-6 { margin-left: calc(var(--spacing-6) * -1); }
.-ml-7 { margin-left: calc(var(--spacing-7) * -1); }
.-ml-8 { margin-left: calc(var(--spacing-8) * -1); }
.-ml-9 { margin-left: calc(var(--spacing-9) * -1); }
.-ml-10 { margin-left: calc(var(--spacing-10) * -1); }
.-ml-11 { margin-left: calc(var(--spacing-11) * -1); }
.-ml-12 { margin-left: calc(var(--spacing-12) * -1); }
.-ml-14 { margin-left: calc(var(--spacing-14) * -1); }
.-ml-16 { margin-left: calc(var(--spacing-16) * -1); }
.-ml-20 { margin-left: calc(var(--spacing-20) * -1); }
.-ml-24 { margin-left: calc(var(--spacing-24) * -1); }
.-ml-28 { margin-left: calc(var(--spacing-28) * -1); }
.-ml-32 { margin-left: calc(var(--spacing-32) * -1); }
.-ml-36 { margin-left: calc(var(--spacing-36) * -1); }
.-ml-40 { margin-left: calc(var(--spacing-40) * -1); }
.-ml-44 { margin-left: calc(var(--spacing-44) * -1); }
.-ml-48 { margin-left: calc(var(--spacing-48) * -1); }
.-ml-52 { margin-left: calc(var(--spacing-52) * -1); }
.-ml-56 { margin-left: calc(var(--spacing-56) * -1); }
.-ml-60 { margin-left: calc(var(--spacing-60) * -1); }
.-ml-64 { margin-left: calc(var(--spacing-64) * -1); }
.-ml-72 { margin-left: calc(var(--spacing-72) * -1); }
.-ml-80 { margin-left: calc(var(--spacing-80) * -1); }
.-ml-96 { margin-left: calc(var(--spacing-96) * -1); }

/* Negative margins - Inline-start */
.-ms-px { margin-inline-start: -1px; }
.-ms-0\.5 { margin-inline-start: calc(var(--spacing-0-5) * -1); }
.-ms-1 { margin-inline-start: calc(var(--spacing-1) * -1); }
.-ms-1\.5 { margin-inline-start: calc(var(--spacing-1-5) * -1); }
.-ms-2 { margin-inline-start: calc(var(--spacing-2) * -1); }
.-ms-2\.5 { margin-inline-start: calc(var(--spacing-2-5) * -1); }
.-ms-3 { margin-inline-start: calc(var(--spacing-3) * -1); }
.-ms-3\.5 { margin-inline-start: calc(var(--spacing-3-5) * -1); }
.-ms-4 { margin-inline-start: calc(var(--spacing-4) * -1); }
.-ms-5 { margin-inline-start: calc(var(--spacing-5) * -1); }
.-ms-6 { margin-inline-start: calc(var(--spacing-6) * -1); }
.-ms-7 { margin-inline-start: calc(var(--spacing-7) * -1); }
.-ms-8 { margin-inline-start: calc(var(--spacing-8) * -1); }
.-ms-9 { margin-inline-start: calc(var(--spacing-9) * -1); }
.-ms-10 { margin-inline-start: calc(var(--spacing-10) * -1); }
.-ms-11 { margin-inline-start: calc(var(--spacing-11) * -1); }
.-ms-12 { margin-inline-start: calc(var(--spacing-12) * -1); }
.-ms-14 { margin-inline-start: calc(var(--spacing-14) * -1); }
.-ms-16 { margin-inline-start: calc(var(--spacing-16) * -1); }
.-ms-20 { margin-inline-start: calc(var(--spacing-20) * -1); }
.-ms-24 { margin-inline-start: calc(var(--spacing-24) * -1); }
.-ms-28 { margin-inline-start: calc(var(--spacing-28) * -1); }
.-ms-32 { margin-inline-start: calc(var(--spacing-32) * -1); }
.-ms-36 { margin-inline-start: calc(var(--spacing-36) * -1); }
.-ms-40 { margin-inline-start: calc(var(--spacing-40) * -1); }
.-ms-44 { margin-inline-start: calc(var(--spacing-44) * -1); }
.-ms-48 { margin-inline-start: calc(var(--spacing-48) * -1); }
.-ms-52 { margin-inline-start: calc(var(--spacing-52) * -1); }
.-ms-56 { margin-inline-start: calc(var(--spacing-56) * -1); }
.-ms-60 { margin-inline-start: calc(var(--spacing-60) * -1); }
.-ms-64 { margin-inline-start: calc(var(--spacing-64) * -1); }
.-ms-72 { margin-inline-start: calc(var(--spacing-72) * -1); }
.-ms-80 { margin-inline-start: calc(var(--spacing-80) * -1); }
.-ms-96 { margin-inline-start: calc(var(--spacing-96) * -1); }

/* Negative margins - Inline-end */
.-me-px { margin-inline-end: -1px; }
.-me-0\.5 { margin-inline-end: calc(var(--spacing-0-5) * -1); }
.-me-1 { margin-inline-end: calc(var(--spacing-1) * -1); }
.-me-1\.5 { margin-inline-end: calc(var(--spacing-1-5) * -1); }
.-me-2 { margin-inline-end: calc(var(--spacing-2) * -1); }
.-me-2\.5 { margin-inline-end: calc(var(--spacing-2-5) * -1); }
.-me-3 { margin-inline-end: calc(var(--spacing-3) * -1); }
.-me-3\.5 { margin-inline-end: calc(var(--spacing-3-5) * -1); }
.-me-4 { margin-inline-end: calc(var(--spacing-4) * -1); }
.-me-5 { margin-inline-end: calc(var(--spacing-5) * -1); }
.-me-6 { margin-inline-end: calc(var(--spacing-6) * -1); }
.-me-7 { margin-inline-end: calc(var(--spacing-7) * -1); }
.-me-8 { margin-inline-end: calc(var(--spacing-8) * -1); }
.-me-9 { margin-inline-end: calc(var(--spacing-9) * -1); }
.-me-10 { margin-inline-end: calc(var(--spacing-10) * -1); }
.-me-11 { margin-inline-end: calc(var(--spacing-11) * -1); }
.-me-12 { margin-inline-end: calc(var(--spacing-12) * -1); }
.-me-14 { margin-inline-end: calc(var(--spacing-14) * -1); }
.-me-16 { margin-inline-end: calc(var(--spacing-16) * -1); }
.-me-20 { margin-inline-end: calc(var(--spacing-20) * -1); }
.-me-24 { margin-inline-end: calc(var(--spacing-24) * -1); }
.-me-28 { margin-inline-end: calc(var(--spacing-28) * -1); }
.-me-32 { margin-inline-end: calc(var(--spacing-32) * -1); }
.-me-36 { margin-inline-end: calc(var(--spacing-36) * -1); }
.-me-40 { margin-inline-end: calc(var(--spacing-40) * -1); }
.-me-44 { margin-inline-end: calc(var(--spacing-44) * -1); }
.-me-48 { margin-inline-end: calc(var(--spacing-48) * -1); }
.-me-52 { margin-inline-end: calc(var(--spacing-52) * -1); }
.-me-56 { margin-inline-end: calc(var(--spacing-56) * -1); }
.-me-60 { margin-inline-end: calc(var(--spacing-60) * -1); }
.-me-64 { margin-inline-end: calc(var(--spacing-64) * -1); }
.-me-72 { margin-inline-end: calc(var(--spacing-72) * -1); }
.-me-80 { margin-inline-end: calc(var(--spacing-80) * -1); }
.-me-96 { margin-inline-end: calc(var(--spacing-96) * -1); }

/*****************************************************
* Tailwind-like Position Utilities
* Reference: https://tailwindcss.com/docs/position
******************************************************/
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/*****************************************************
* Tailwind-like Inset / Placement Utilities
* Reference: https://tailwindcss.com/docs/top-right-bottom-left
******************************************************/
.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.left-3 { left: var(--spacing-3); }
.left-3\.5 { left: var(--spacing-3-5); }
.left-4 { left: var(--spacing-4); }
.inset-0 { inset: 0; }

/*****************************************************
* Tailwind-like Z-Index Utilities
* Reference: https://tailwindcss.com/docs/z-index
******************************************************/
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/*****************************************************
* Tailwind-like Transform Utilities
* Reference: https://tailwindcss.com/docs/translate
******************************************************/
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-x-1\/2 { transform: translateX(-50%); }

/*****************************************************
* Tailwind-like Pointer Events Utilities
* Reference: https://tailwindcss.com/docs/pointer-events
******************************************************/
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/*****************************************************
* Tailwind-like Display Utilities
* Reference: https://tailwindcss.com/docs/display
******************************************************/
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.contents { display: contents; }

/*****************************************************
* Tailwind-like Justify Content Utilities
* Reference: https://tailwindcss.com/docs/justify-content
******************************************************/
.justify-center { justify-content: center; }