/* Custom utilities layer (highest priority) */
@layer tailwind {
    /* Padding Classes using existing spacing variables */

    /* All Padding */
    .p-0{ padding:0;}
    .p-3xs { padding: var(--space-3xs); }
    .p-2xs { padding: var(--space-2xs); }
    .p-xs { padding: var(--space-xs); }
    .p-s { padding: var(--space-s); }
    .p-m { padding: var(--space-m); }
    .p-l { padding: var(--space-l); }
    .p-xl { padding: var(--space-xl); }
    .p-2xl { padding: var(--space-2xl); }
    .p-3xl { padding: var(--space-3xl); }
    .p-4xl { padding: var(--space-4xl); }
    .p-5xl { padding: var(--space-5xl); }

    /* Padding Top */
    .pt-0{ padding-top:0;}
    .pt-3xs { padding-top: var(--space-3xs); }
    .pt-2xs { padding-top: var(--space-2xs); }
    .pt-xs { padding-top: var(--space-xs); }
    .pt-s { padding-top: var(--space-s); }
    .pt-m { padding-top: var(--space-m); }
    .pt-l { padding-top: var(--space-l); }
    .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); }
    .pt-5xl { padding-top: var(--space-5xl); }

    /* Padding Right */
    .pr-0{ padding-right:0;}
    .pr-3xs { padding-right: var(--space-3xs); }
    .pr-2xs { padding-right: var(--space-2xs); }
    .pr-xs { padding-right: var(--space-xs); }
    .pr-s { padding-right: var(--space-s); }
    .pr-m { padding-right: var(--space-m); }
    .pr-l { padding-right: var(--space-l); }
    .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); }
    .pr-5xl { padding-right: var(--space-5xl); }

    /* Padding Bottom */
    .pb-0{ padding-bottom:0;}
    .pb-3xs { padding-bottom: var(--space-3xs); }
    .pb-2xs { padding-bottom: var(--space-2xs); }
    .pb-xs { padding-bottom: var(--space-xs); }
    .pb-s { padding-bottom: var(--space-s); }
    .pb-m { padding-bottom: var(--space-m); }
    .pb-l { padding-bottom: var(--space-l); }
    .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); }
    .pb-5xl { padding-bottom: var(--space-5xl); }

    /* Padding Left */
    .pl-0{ padding-left:0;}
    .pl-3xs { padding-left: var(--space-3xs); }
    .pl-2xs { padding-left: var(--space-2xs); }
    .pl-xs { padding-left: var(--space-xs); }
    .pl-s { padding-left: var(--space-s); }
    .pl-m { padding-left: var(--space-m); }
    .pl-l { padding-left: var(--space-l); }
    .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); }
    .pl-5xl { padding-left: var(--space-5xl); }

    /* Padding X (horizontal) */
    .px-0{ padding-left:0; padding-right:0;}
    .px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
    .px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
    .px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
    .px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
    .px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
    .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); }
    .px-5xl { padding-left: var(--space-5xl); padding-right: var(--space-5xl); }

    /* Padding Y (vertical) */
    .py-0{ padding-top:0; padding-bottom:0;}
    .py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
    .py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
    .py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
    .py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
    .py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
    .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); }
    .py-5xl { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }

    /* Gap Classes */
    .gap-1 { gap: 1rem; }
    .gap-2 { gap: 2rem; }
    .gap-3 { gap: 3rem; }
    .gap-4xs { gap: var(--space-4xs); }
    .gap-3xs { gap: var(--space-3xs); }
    .gap-2xs { gap: var(--space-2xs); }
    .gap-xs { gap: var(--space-xs); }
    .gap-s { gap: var(--space-s); }
    .gap-m { gap: var(--space-m); }
    .gap-l { gap: var(--space-l); }
    .gap-xl { gap: var(--space-xl); }
    .gap-2xl { gap: var(--space-2xl); }
    .gap-3xl { gap: var(--space-3xl); }
    .gap-4xl { gap: var(--space-4xl); }
    .gap-5xl { gap: var(--space-5xl); }

    /* Gap X (column gap) */
    .gap-x-1 { column-gap: 1rem; }
    .gap-x-2 { column-gap: 2rem; }
    .gap-x-3 { column-gap: 3rem; }
    .gap-x-3xs { column-gap: var(--space-3xs); }
    .gap-x-2xs { column-gap: var(--space-2xs); }
    .gap-x-xs { column-gap: var(--space-xs); }
    .gap-x-s { column-gap: var(--space-s); }
    .gap-x-m { column-gap: var(--space-m); }
    .gap-x-l { column-gap: var(--space-l); }
    .gap-x-xl { column-gap: var(--space-xl); }
    .gap-x-2xl { column-gap: var(--space-2xl); }
    .gap-x-3xl { column-gap: var(--space-3xl); }
    .gap-x-4xl { column-gap: var(--space-4xl); }
    .gap-x-5xl { column-gap: var(--space-5xl); }

    /* Gap Y (row gap) */
    .gap-y-1 { row-gap: 1rem; }
    .gap-y-2 { row-gap: 2rem; }
    .gap-y-3 { row-gap: 3rem; }
    .gap-y-3xs { row-gap: var(--space-3xs); }
    .gap-y-2xs { row-gap: var(--space-2xs); }
    .gap-y-xs { row-gap: var(--space-xs); }
    .gap-y-s { row-gap: var(--space-s); }
    .gap-y-m { row-gap: var(--space-m); }
    .gap-y-l { row-gap: var(--space-l); }
    .gap-y-xl { row-gap: var(--space-xl); }
    .gap-y-2xl { row-gap: var(--space-2xl); }
    .gap-y-3xl { row-gap: var(--space-3xl); }
    .gap-y-4xl { row-gap: var(--space-4xl); }
    .gap-y-5xl { row-gap: var(--space-5xl); }

    /* Flex Utilities */
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .hidden { display: none; }

    .flex-row { flex-direction: row; }
    .flex-row-reverse { flex-direction: row-reverse; }
    .flex-col { flex-direction: column; }
    .flex-col-reverse { flex-direction: column-reverse; }

    .flex-wrap { flex-wrap: wrap; }
    .flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .flex-nowrap { flex-wrap: nowrap; }

    .flex-1 { flex: 1 1 0%; }
    .flex-auto { flex: 1 1 auto; }
    .flex-initial { flex: 0 1 auto; }
    .flex-none { flex: none; }

    .grow { flex-grow: 1; }
    .grow-0 { flex-grow: 0; }
    .shrink { flex-shrink: 1; }
    .shrink-0 { flex-shrink: 0; }

    .justify-start { justify-content: flex-start; }
    .justify-end { justify-content: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-around { justify-content: space-around; }
    .justify-evenly { justify-content: space-evenly; }

    .items-start { align-items: flex-start; }
    .items-end { align-items: flex-end; }
    .items-center { align-items: center; }
    .items-baseline { align-items: baseline; }
    .items-stretch { align-items: stretch; }

    .content-start { align-content: flex-start; }
    .content-end { align-content: flex-end; }
    .content-center { align-content: center; }
    .content-between { align-content: space-between; }
    .content-around { align-content: space-around; }
    .content-evenly { align-content: space-evenly; }

    /* Grid Utilities */
    .grid { display: grid; }
    .inline-grid { display: inline-grid; }

    .grid-cols-xs { grid-template-columns: var(--grid-xs); }
    .grid-cols-s { grid-template-columns: var(--grid-s); }
    .grid-cols-m { grid-template-columns: var(--grid-m); }
    .grid-cols-l { grid-template-columns: var(--grid-l); }
    .grid-cols-xl { grid-template-columns: var(--grid-xl); }
    .grid-cols-2xl { grid-template-columns: var(--grid-2xl); }
    .grid-cols-3xl { grid-template-columns: var(--grid-3xl); }

    /* Text Alignment */
    .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; }

    /* Text Transform */
    .uppercase { text-transform: uppercase; }
    .lowercase { text-transform: lowercase; }
    .capitalize, .capitalise { text-transform: capitalize; }
    .no-underline { text-decoration-line: none; }
    .underline    { text-decoration-line: underline; }
    .overline     { text-decoration-line: overline; }
    .line-through { text-decoration-line: line-through; }
    .normal-case { text-transform: none; }

    /* Font Size Classes */
    .fs--1{font-size: var(--fs--1);}
    .fs-1{ font-size: var(--fs-1); }
    .fs-2{ font-size: var(--fs-2); }
    .fs-3{ font-size: var(--fs-3); }
    .fs-4{ font-size: var(--fs-4); }
    .fs-5{ font-size: var(--fs-5); }
    .fs-6{ font-size: var(--fs-6); }

    /* Font Weight */
    .fw-200{ font-weight: 200; }
    .fw-300{ font-weight: 300; }
    .fw-400{ font-weight: 400; }
    .fw-500{ font-weight: 500; }
    .fw-600{ font-weight: 600; }
    .fw-700{ font-weight: 700; }
    .fw-800{ font-weight: 800; }
    .italic{ font-style: italic; }

    /* Line Height */
    .lh-1 { line-height: 1; }
    .lh-1\.2 { line-height: 1.2; }
    .lh-1\.6 { line-height: 1.6; }

    /* Max Width */
    .max-w-3 { max-width: 3rem; }
    .max-w-4 { max-width: 4rem; }
    .max-w-5 { max-width: 5rem; }
    .max-w-6 { max-width: 6rem; }
    .max-w-7 { max-width: 7rem; }
    .max-w-8 { max-width: 8rem; }
    .max-w-9 { max-width: 9rem; }
    .max-w-10 { max-width: 10rem; }
    .max-w-15 { max-width: 15rem; }
    .max-w-20 { max-width: 20rem; }
    .max-w-25 { max-width: 25rem; }
    .max-w-30 { max-width: 30rem; }
    .max-w-35 { max-width: 35rem; }
    .max-w-40 { max-width: 40rem; }
    .max-w-45 { max-width: 45rem; }
    .max-w-50 { max-width: 50rem; }
    .max-w-55 { max-width: 55rem; }
    .max-w-60 { max-width: 60rem; }
    .max-w-65 { max-width: 65rem; }
    .max-w-70 { max-width: 70rem; }
    .max-w-75 { max-width: 75rem; }
    .max-w-80 { max-width: 80rem; }
    .max-w-85 { max-width: 85rem; }
    .max-w-90 { max-width: 90rem; }
    .max-w-95 { max-width: 95rem; }
    .max-w-100 { max-width: 100rem; }
    .max-w-none { max-width: none; }
    .max-w-full { max-width: 100%; }
    .max-w-screen { max-width: 100vw; }

    /* Min Height */
    .min-h-3 { min-height: 3rem; }
    .min-h-4 { min-height: 4rem; }
    .min-h-5 { min-height: 5rem; }
    .min-h-6 { min-height: 6rem; }
    .min-h-7 { min-height: 7rem; }
    .min-h-8 { min-height: 8rem; }
    .min-h-9 { min-height: 9rem; }
    .min-h-10 { min-height: 10rem; }
    .min-h-15 { min-height: 15rem; }
    .min-h-20 { min-height: 20rem; }
    .min-h-25 { min-height: 25rem; }
    .min-h-30 { min-height: 30rem; }
    .min-h-35 { min-height: 35rem; }
    .min-h-40 { min-height: 40rem; }
    .min-h-45 { min-height: 45rem; }
    .min-h-50 { min-height: 50rem; }
    .min-h-55 { min-height: 55rem; }
    .min-h-60 { min-height: 60rem; }
    .min-h-65 { min-height: 65rem; }
    .min-h-70 { min-height: 70rem; }
    .min-h-75 { min-height: 75rem; }
    .min-h-80 { min-height: 80rem; }
    .min-h-85 { min-height: 85rem; }
    .min-h-90 { min-height: 90rem; }
    .min-h-95 { min-height: 95rem; }
    .min-h-100 { min-height: 100rem; }
    .min-h-screen { min-height: 100vh; }
    .min-h-75vh { min-height: 75vh; }
    .min-h-50vh { min-height: 50vh; }
    .min-h-25vh { min-height: 25vh; }
    .min-h-full { min-height: 100%; }
    .h-full { height: 100%; }

    /* Width */
    .w-auto { width: auto; }
    .w-full { width: 100%; }

    /* Position */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .static { position: static; }
    .sticky { position: sticky; }

    .top-3xs { top: var(--space-3xs); }
    .top-2xs { top: var(--space-2xs); }
    .top-xs { top: var(--space-xs); }
    .top-s { top: var(--space-s); }
    .top-m { top: var(--space-m); }
    .top-l { top: var(--space-l); }
    .top-xl { top: var(--space-xl); }
    .top-2xl { top: var(--space-2xl); }
    .top-3xl { top: var(--space-3xl); }
    .top-4xl { top: var(--space-4xl); }
    .top-5xl { top: var(--space-5xl); }

    /* Overflow */
    .overflow-hidden { overflow: hidden; }
    .overflow-visible { overflow: visible; }
    .overflow-scroll { overflow: scroll; }

    /* Desktop breakpoint */
    @media (min-width: 992px) {

        /* Display */
        .lg\:block { display: block; }
        .lg\:inline-block { display: inline-block; }
        .lg\:inline { display: inline; }
        .lg\:flex { display: flex; }
        .lg\:inline-flex { display: inline-flex; }
        .lg\:grid { display: grid; }
        .lg\:inline-grid { display: inline-grid; }
        .lg\:hidden { display: none; }

        /* Flex */
        .lg\:flex-row { flex-direction: row; }
        .lg\:flex-row-reverse { flex-direction: row-reverse; }
        .lg\:flex-col { flex-direction: column; }
        .lg\:flex-col-reverse { flex-direction: column-reverse; }
        .lg\:flex-wrap { flex-wrap: wrap; }
        .lg\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
        .lg\:flex-nowrap { flex-wrap: nowrap; }
        .lg\:flex-1 { flex: 1 1 0%; }
        .lg\:flex-auto { flex: 1 1 auto; }
        .lg\:flex-initial { flex: 0 1 auto; }
        .lg\:flex-none { flex: none; }
        .lg\:grow { flex-grow: 1; }
        .lg\:grow-0 { flex-grow: 0; }
        .lg\:shrink { flex-shrink: 1; }
        .lg\:shrink-0 { flex-shrink: 0; }
        .lg\:justify-start { justify-content: flex-start; }
        .lg\:justify-end { justify-content: flex-end; }
        .lg\:justify-center { justify-content: center; }
        .lg\:justify-between { justify-content: space-between; }
        .lg\:justify-around { justify-content: space-around; }
        .lg\:justify-evenly { justify-content: space-evenly; }
        .lg\:items-start { align-items: flex-start; }
        .lg\:items-end { align-items: flex-end; }
        .lg\:items-center { align-items: center; }
        .lg\:items-baseline { align-items: baseline; }
        .lg\:items-stretch { align-items: stretch; }
        .lg\:content-start { align-content: flex-start; }
        .lg\:content-end { align-content: flex-end; }
        .lg\:content-center { align-content: center; }
        .lg\:content-between { align-content: space-between; }
        .lg\:content-around { align-content: space-around; }
        .lg\:content-evenly { align-content: space-evenly; }

        /* Grid */
        .lg\:grid-cols-xs { grid-template-columns: var(--grid-xs); }
        .lg\:grid-cols-s { grid-template-columns: var(--grid-s); }
        .lg\:grid-cols-m { grid-template-columns: var(--grid-m); }
        .lg\:grid-cols-l { grid-template-columns: var(--grid-l); }
        .lg\:grid-cols-xl { grid-template-columns: var(--grid-xl); }
        .lg\:grid-cols-2xl { grid-template-columns: var(--grid-2xl); }
        .lg\:grid-cols-3xl { grid-template-columns: var(--grid-3xl); }

        /* Padding */
        .lg\:p-0 { padding: 0; }
        .lg\:p-3xs { padding: var(--space-3xs); }
        .lg\:p-2xs { padding: var(--space-2xs); }
        .lg\:p-xs { padding: var(--space-xs); }
        .lg\:p-s { padding: var(--space-s); }
        .lg\:p-m { padding: var(--space-m); }
        .lg\:p-l { padding: var(--space-l); }
        .lg\:p-xl { padding: var(--space-xl); }
        .lg\:p-2xl { padding: var(--space-2xl); }
        .lg\:p-3xl { padding: var(--space-3xl); }
        .lg\:p-4xl { padding: var(--space-4xl); }
        .lg\:p-5xl { padding: var(--space-5xl); }

        .lg\:pt-0 { padding-top: 0; }
        .lg\:pt-3xs { padding-top: var(--space-3xs); }
        .lg\:pt-2xs { padding-top: var(--space-2xs); }
        .lg\:pt-xs { padding-top: var(--space-xs); }
        .lg\:pt-s { padding-top: var(--space-s); }
        .lg\:pt-m { padding-top: var(--space-m); }
        .lg\:pt-l { padding-top: var(--space-l); }
        .lg\:pt-xl { padding-top: var(--space-xl); }
        .lg\:pt-2xl { padding-top: var(--space-2xl); }
        .lg\:pt-3xl { padding-top: var(--space-3xl); }
        .lg\:pt-4xl { padding-top: var(--space-4xl); }
        .lg\:pt-5xl { padding-top: var(--space-5xl); }

        .lg\:pr-0 { padding-right: 0; }
        .lg\:pr-3xs { padding-right: var(--space-3xs); }
        .lg\:pr-2xs { padding-right: var(--space-2xs); }
        .lg\:pr-xs { padding-right: var(--space-xs); }
        .lg\:pr-s { padding-right: var(--space-s); }
        .lg\:pr-m { padding-right: var(--space-m); }
        .lg\:pr-l { padding-right: var(--space-l); }
        .lg\:pr-xl { padding-right: var(--space-xl); }
        .lg\:pr-2xl { padding-right: var(--space-2xl); }
        .lg\:pr-3xl { padding-right: var(--space-3xl); }
        .lg\:pr-4xl { padding-right: var(--space-4xl); }
        .lg\:pr-5xl { padding-right: var(--space-5xl); }

        .lg\:pb-0 { padding-bottom: 0; }
        .lg\:pb-3xs { padding-bottom: var(--space-3xs); }
        .lg\:pb-2xs { padding-bottom: var(--space-2xs); }
        .lg\:pb-xs { padding-bottom: var(--space-xs); }
        .lg\:pb-s { padding-bottom: var(--space-s); }
        .lg\:pb-m { padding-bottom: var(--space-m); }
        .lg\:pb-l { padding-bottom: var(--space-l); }
        .lg\:pb-xl { padding-bottom: var(--space-xl); }
        .lg\:pb-2xl { padding-bottom: var(--space-2xl); }
        .lg\:pb-3xl { padding-bottom: var(--space-3xl); }
        .lg\:pb-4xl { padding-bottom: var(--space-4xl); }
        .lg\:pb-5xl { padding-bottom: var(--space-5xl); }

        .lg\:pl-0 { padding-left: 0; }
        .lg\:pl-3xs { padding-left: var(--space-3xs); }
        .lg\:pl-2xs { padding-left: var(--space-2xs); }
        .lg\:pl-xs { padding-left: var(--space-xs); }
        .lg\:pl-s { padding-left: var(--space-s); }
        .lg\:pl-m { padding-left: var(--space-m); }
        .lg\:pl-l { padding-left: var(--space-l); }
        .lg\:pl-xl { padding-left: var(--space-xl); }
        .lg\:pl-2xl { padding-left: var(--space-2xl); }
        .lg\:pl-3xl { padding-left: var(--space-3xl); }
        .lg\:pl-4xl { padding-left: var(--space-4xl); }
        .lg\:pl-5xl { padding-left: var(--space-5xl); }

        .lg\:px-0 { padding-left: 0; padding-right: 0; }
        .lg\:px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
        .lg\:px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
        .lg\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
        .lg\:px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
        .lg\:px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
        .lg\:px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
        .lg\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
        .lg\:px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
        .lg\:px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
        .lg\:px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }
        .lg\:px-5xl { padding-left: var(--space-5xl); padding-right: var(--space-5xl); }

        .lg\:py-0 { padding-top: 0; padding-bottom: 0; }
        .lg\:py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
        .lg\:py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
        .lg\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
        .lg\:py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
        .lg\:py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
        .lg\:py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
        .lg\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
        .lg\:py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
        .lg\:py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
        .lg\:py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
        .lg\:py-5xl { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }

        /* Section Padding */
        .lg\:px-section { padding-left: var(--px-section); padding-right: var(--px-section); }
        .lg\:py-section { padding-bottom: var(--py-section); padding-top: var(--py-section); }
        .lg\:p-section {
            padding-left: var(--px-section);
            padding-right: var(--px-section);
            padding-bottom: var(--py-section);
            padding-top: var(--py-section);
        }

        /* Gap */
        .lg\:gap-1 { gap: 1rem; }
        .lg\:gap-2 { gap: 2rem; }
        .lg\:gap-3 { gap: 3rem; }
        .lg\:gap-3xs { gap: var(--space-3xs); }
        .lg\:gap-2xs { gap: var(--space-2xs); }
        .lg\:gap-xs { gap: var(--space-xs); }
        .lg\:gap-s { gap: var(--space-s); }
        .lg\:gap-m { gap: var(--space-m); }
        .lg\:gap-l { gap: var(--space-l); }
        .lg\:gap-xl { gap: var(--space-xl); }
        .lg\:gap-2xl { gap: var(--space-2xl); }
        .lg\:gap-3xl { gap: var(--space-3xl); }
        .lg\:gap-4xl { gap: var(--space-4xl); }
        .lg\:gap-5xl { gap: var(--space-5xl); }

        .lg\:gap-x-1 { column-gap: 1rem; }
        .lg\:gap-x-2 { column-gap: 2rem; }
        .lg\:gap-x-3 { column-gap: 3rem; }
        .lg\:gap-x-3xs { column-gap: var(--space-3xs); }
        .lg\:gap-x-2xs { column-gap: var(--space-2xs); }
        .lg\:gap-x-xs { column-gap: var(--space-xs); }
        .lg\:gap-x-s { column-gap: var(--space-s); }
        .lg\:gap-x-m { column-gap: var(--space-m); }
        .lg\:gap-x-l { column-gap: var(--space-l); }
        .lg\:gap-x-xl { column-gap: var(--space-xl); }
        .lg\:gap-x-2xl { column-gap: var(--space-2xl); }
        .lg\:gap-x-3xl { column-gap: var(--space-3xl); }
        .lg\:gap-x-4xl { column-gap: var(--space-4xl); }
        .lg\:gap-x-5xl { column-gap: var(--space-5xl); }

        .lg\:gap-y-1 { row-gap: 1rem; }
        .lg\:gap-y-2 { row-gap: 2rem; }
        .lg\:gap-y-3 { row-gap: 3rem; }
        .lg\:gap-y-3xs { row-gap: var(--space-3xs); }
        .lg\:gap-y-2xs { row-gap: var(--space-2xs); }
        .lg\:gap-y-xs { row-gap: var(--space-xs); }
        .lg\:gap-y-s { row-gap: var(--space-s); }
        .lg\:gap-y-m { row-gap: var(--space-m); }
        .lg\:gap-y-l { row-gap: var(--space-l); }
        .lg\:gap-y-xl { row-gap: var(--space-xl); }
        .lg\:gap-y-2xl { row-gap: var(--space-2xl); }
        .lg\:gap-y-3xl { row-gap: var(--space-3xl); }
        .lg\:gap-y-4xl { row-gap: var(--space-4xl); }
        .lg\:gap-y-5xl { row-gap: var(--space-5xl); }

        /* Text Alignment */
        .lg\:text-left { text-align: left; }
        .lg\:text-center { text-align: center; }
        .lg\:text-right { text-align: right; }
        .lg\:text-justify { text-align: justify; }
        .lg\:text-start { text-align: start; }
        .lg\:text-end { text-align: end; }

        /* Text Transform */
        .lg\:uppercase { text-transform: uppercase; }
        .lg\:lowercase { text-transform: lowercase; }
        .lg\:capitalize { text-transform: capitalize; }
        .lg\:no-underline { text-decoration-line: none; }
        .lg\:underline { text-decoration-line: underline; }
        .lg\:overline { text-decoration-line: overline; }
        .lg\:line-through { text-decoration-line: line-through; }
        .lg\:normal-case { text-transform: none; }

        /* Font Size */
        .lg\:fs--1 { font-size: var(--fs--1); }
        .lg\:fs-1 { font-size: var(--fs-1); }
        .lg\:fs-2 { font-size: var(--fs-2); }
        .lg\:fs-3 { font-size: var(--fs-3); }
        .lg\:fs-4 { font-size: var(--fs-4); }
        .lg\:fs-5 { font-size: var(--fs-5); }
        .lg\:fs-6 { font-size: var(--fs-6); }

        /* Font Weight */
        .lg\:fw-200 { font-weight: 200; }
        .lg\:fw-300 { font-weight: 300; }
        .lg\:fw-400 { font-weight: 400; }
        .lg\:fw-500 { font-weight: 500; }
        .lg\:fw-600 { font-weight: 600; }
        .lg\:fw-700 { font-weight: 700; }
        .lg\:fw-800 { font-weight: 800; }
        .lg\:italic { font-style: italic; }

        /* Line Height */
        .lg\:lh-1 { line-height: 1; }
        .lg\:lh-1\.2 { line-height: 1.2; }
        .lg\:lh-1\.6 { line-height: 1.6; }

        /* Max Width */
        .lg\:max-w-3 { max-width: 3rem; }
        .lg\:max-w-4 { max-width: 4rem; }
        .lg\:max-w-5 { max-width: 5rem; }
        .lg\:max-w-6 { max-width: 6rem; }
        .lg\:max-w-7 { max-width: 7rem; }
        .lg\:max-w-8 { max-width: 8rem; }
        .lg\:max-w-9 { max-width: 9rem; }
        .lg\:max-w-10 { max-width: 10rem; }
        .lg\:max-w-15 { max-width: 15rem; }
        .lg\:max-w-20 { max-width: 20rem; }
        .lg\:max-w-25 { max-width: 25rem; }
        .lg\:max-w-30 { max-width: 30rem; }
        .lg\:max-w-35 { max-width: 35rem; }
        .lg\:max-w-40 { max-width: 40rem; }
        .lg\:max-w-45 { max-width: 45rem; }
        .lg\:max-w-50 { max-width: 50rem; }
        .lg\:max-w-55 { max-width: 55rem; }
        .lg\:max-w-60 { max-width: 60rem; }
        .lg\:max-w-65 { max-width: 65rem; }
        .lg\:max-w-70 { max-width: 70rem; }
        .lg\:max-w-75 { max-width: 75rem; }
        .lg\:max-w-80 { max-width: 80rem; }
        .lg\:max-w-85 { max-width: 85rem; }
        .lg\:max-w-90 { max-width: 90rem; }
        .lg\:max-w-95 { max-width: 95rem; }
        .lg\:max-w-100 { max-width: 100rem; }
        .lg\:max-w-none { max-width: none; }
        .lg\:max-w-full { max-width: 100%; }
        .lg\:max-w-screen { max-width: 100vw; }


        /* Height */
        /* Min Height */
        .lg\:min-h-3 { min-height: 3rem; }
        .lg\:min-h-4 { min-height: 4rem; }
        .lg\:min-h-5 { min-height: 5rem; }
        .lg\:min-h-6 { min-height: 6rem; }
        .lg\:min-h-7 { min-height: 7rem; }
        .lg\:min-h-8 { min-height: 8rem; }
        .lg\:min-h-9 { min-height: 9rem; }
        .lg\:min-h-10 { min-height: 10rem; }
        .lg\:min-h-15 { min-height: 15rem; }
        .lg\:min-h-20 { min-height: 20rem; }
        .lg\:min-h-25 { min-height: 25rem; }
        .lg\:min-h-30 { min-height: 30rem; }
        .lg\:min-h-35 { min-height: 35rem; }
        .lg\:min-h-40 { min-height: 40rem; }
        .lg\:min-h-45 { min-height: 45rem; }
        .lg\:min-h-50 { min-height: 50rem; }
        .lg\:min-h-55 { min-height: 55rem; }
        .lg\:min-h-60 { min-height: 60rem; }
        .lg\:min-h-65 { min-height: 65rem; }
        .lg\:min-h-70 { min-height: 70rem; }
        .lg\:min-h-75 { min-height: 75rem; }
        .lg\:min-h-80 { min-height: 80rem; }
        .lg\:min-h-85 { min-height: 85rem; }
        .lg\:min-h-90 { min-height: 90rem; }
        .lg\:min-h-95 { min-height: 95rem; }
        .lg\:min-h-100 { min-height: 100rem; }
        .lg\:min-h-screen { min-height: 100vh; }
        .lg\:min-h-75vh { min-height: 75vh; }
        .lg\:min-h-50vh { min-height: 50vh; }
        .lg\:min-h-25vh { min-height: 25vh; }
        .lg\:min-h-full { min-height: 100%; }
        .lg\:h-full { height: 100%; }

        /* Width */
        .lg\:w-auto { width: auto; }
        .lg\:w-full { width: 100%; }

        /* Position */
        .lg\:relative { position: relative; }
        .lg\:absolute { position: absolute; }
        .lg\:fixed { position: fixed; }
        .lg\:static { position: static; }
        .lg\:sticky { position: sticky; }
        /* top alignment */
        .lg\:top-3xs { top: var(--space-3xs); }
        .lg\:top-2xs { top: var(--space-2xs); }
        .lg\:top-xs { top: var(--space-xs); }
        .lg\:top-s { top: var(--space-s); }
        .lg\:top-m { top: var(--space-m); }
        .lg\:top-l { top: var(--space-l); }
        .lg\:top-xl { top: var(--space-xl); }
        .lg\:top-2xl { top: var(--space-2xl); }
        .lg\:top-3xl { top: var(--space-3xl); }
        .lg\:top-4xl { top: var(--space-4xl); }
        .lg\:top-5xl { top: var(--space-5xl); }

        /* Overflow */
        .lg\:overflow-hidden { overflow: hidden; }
        .lg\:overflow-visible { overflow: visible; }
        .lg\:overflow-scroll { overflow: scroll; }

    }

    /* Max Height */
    .max-h-screen { max-height: 100vh; }
    .max-h-90     { max-height: 90vh; }

    /* Gap */
    .gap-0   { gap: 0; }
    .gap-4xs { gap: var(--space-4xs); }
    .gap-3xs { gap: var(--space-3xs); }
    .gap-2xs { gap: var(--space-2xs); }
    .gap-xs  { gap: var(--space-xs); }
    .gap-s   { gap: var(--space-s); }
    .gap-m   { gap: var(--space-m); }
    .gap-l   { gap: var(--space-l); }
    .gap-xl  { gap: var(--space-xl); }
    .gap-2xl { gap: var(--space-2xl); }
    .gap-3xl { gap: var(--space-3xl); }

    /* Border Radius */
    .rounded-1  { border-radius: .1em; }
    .rounded-2  { border-radius: .2em; }
    .rounded-3  { border-radius: .3em; }
    .rounded-4  { border-radius: .4em; }
    .rounded-5  { border-radius: .5em; }
    .rounded-6  { border-radius: .6em; }
    .rounded-7  { border-radius: .7em; }
    .rounded-8  { border-radius: .8em; }
    .rounded-9  { border-radius: .9em; }
    .rounded-10 { border-radius: 1em; }
    .rounded-full { border-radius: 9999px; }

}