@layer utilities {
    /****************************************************************
    * Spacing Variables
    *****************************************************************/
    :root {
        /****************************************************************
        * 1rem = 16px unless OS overrides
        *****************************************************************/
        --spaceing-xxs: 0.0625rem; /* 1px */
        --spaceing-xs: 0.1875rem;  /* 3px */
        --spaceing-sm: 0.375rem;    /* 6px */
        --spaceing: 0.625rem;      /* 10px */
        --spaceing-md: 1rem;        /* 16px */
        --spaceing-lg: 1.25rem;    /* 20px */
        --spaceing-xl: 2.5rem;     /* 40px */
        --spaceing-xxl: 4rem;      /* 64px */

        --rounded-xxs: var(--spaceing-xxs);
        --rounded-xs: var(--spaceing-xs);
        --rounded-sm: var(--spaceing-sm);
        --rounded: var(--spaceing);
        --rounded-md: var(--spaceing-md);
        --rounded-lg: var(--spaceing-lg);
        --rounded-xl: var(--spaceing-xl);
        --rounded-xxl: var(--spaceing-xxl);
        --rounded-full: 10000px;

        --border-width: 1px;
        --border-style: solid;

        --elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
        --elevation-2: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
        --elevation-3: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
        --elevation-4: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
        --elevation-5: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
        --stripe-background:linear-gradient(-45deg, var(--stripe-color,var(--border-color-light)) 7.14%, var(--stripe-bg-color,transparent) 7.14%, var(--stripe-bg-color,transparent) 50%, var(--stripe-color,var(--border-color-light)) 50%, var(--stripe-color,var(--border-color-light)) 57.14%, var(--stripe-bg-color,transparent) 57.14%, var(--stripe-bg-color,transparent) 100%);

        --dot-color: var(--border-color);
        --dotted-background: radial-gradient(var(--dot-color) 0.5px, transparent 0.5px);

        --horizontal-line-color: var(--border-color);
        --vertical-line-color: var(--border-color);
        --route-background:  linear-gradient(var(--horizontal-line-color) 1px, transparent 1px), linear-gradient(to right, var(--vertical-line-color) 1px, transparent 1px);

        --vertical-line-background:  repeating-linear-gradient(0deg, var(--vertical-line-color), var(--vertical-line-color) 1px, transparent 1px, transparent);
        --horizontal-line-background:  repeating-linear-gradient(90deg, var(--horizontal-line-color), var(--horizontal-line-color) 1px, transparent 1px, transparent);

        --cross-color: var(--border-color);
        --cross-background: radial-gradient(circle, transparent 20%, var(--cross-color) 20%, #e5e5f7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--cross-color) 20%, var(--cross-color) 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#444cf7 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #444cf7 2px, var(--cross-color) 2px) -1px 0;
        background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;

     }

    /****************************************************************
    * Layout
    *****************************************************************/
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
    .hidden { display: none !important; }
    .visible { visibility: visible; }

    @media (max-width: 600px){
        .mobile\:hidden { display: none !important; }
    }


    /****************************************************************
    * Flex
    *****************************************************************/
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-center { display: flex; align-items: center; justify-content: center; }
    .flex-wrap { flex-wrap: wrap; }
    .inline-flex { display: inline-flex; }

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

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

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

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

    .self-start { align-self: start; }
    .self-end { align-self: end; }
    .self-center { align-self: center; }

    .to-end { margin-left:auto; }

    .gap-1     { gap: 1px; }
    .gap-xxs { gap: var(--spaceing-xxs); }
    .gap-xs  { gap: var(--spaceing-xs);  }
    .gap-sm  { gap: var(--spaceing-sm); }
    .gap     { gap: var(--spaceing); }
    .gap-md  { gap: var(--spaceing-md); }
    .gap-lg  { gap: var(--spaceing-lg); }
    .gap-xl  { gap: var(--spaceing-xl); }
    .gap-xxl { gap: var(--spaceing-xxl); }

    /****************************************************************
    * Grid
    *****************************************************************/
    .grid { display: grid; }
    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
    .grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

    @media (max-width: 600px) {
        .grid.mobile\:cols-1 { grid-template-columns:1fr !important; }
        .grid.mobile\:cols-2 { grid-template-columns:repeat(2, 1fr) !important; }
    }

    .col-span-1 {grid-column: span 1 / span 1;}
    .col-span-2 {grid-column: span 2 / span 2;}
    .col-span-3 {grid-column: span 3 / span 3;}

    .grid-cols-auto-s {grid-template-columns: repeat(auto-fit, minmax(var(--spaceing-xxl), 1fr));}
    .grid-cols-auto-md {grid-template-columns: repeat(auto-fit, minmax(calc(2*var(--spaceing-xxl)), 1fr));}
    .grid-cols-auto-lg {grid-template-columns: repeat(auto-fit, minmax(calc(4*var(--spaceing-xxl)), 1fr));}
    .grid-cols-auto-xl {grid-template-columns: repeat(auto-fit, minmax(calc(6*var(--spaceing-xxl)), 1fr));}

    /****************************************************************
    * Position
    *****************************************************************/
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .top-0    { top: 0; }
    .bottom-0 { bottom: 0; }
    .left-0   { left: 0; }
    .right-0  { right: 0; }

    .z-0 { z-index: 0; }
    .z-10 { z-index: 10; }
    .z-20 { z-index: 20; }
    .z-30 { z-index: 30; }

    .rotate-0 { transform: rotate(0deg); }
    .rotate-90 { transform: rotate(90deg); }
    .rotate-180 { transform: rotate(180deg); }
    .rotate-270 { transform: rotate(270deg); }


    /****************************************************************
    * Margin
    *****************************************************************/

    .m-xxs { margin: var(--spaceing-xxs); }
    .m-xs  { margin: var(--spaceing-xs);  }
    .m-sm   { margin: var(--spaceing-sm); }
    .m     { margin: var(--spaceing); }
    .m-md  { margin: var(--spaceing-md); }
    .m-lg  { margin: var(--spaceing-lg); }
    .m-xl  { margin: var(--spaceing-xl); }
    .m-xxl { margin: var(--spaceing-xxl); }

    .my-xxs { margin-bottom:var(--spaceing-xxs); margin-top: var(--spaceing-xxs) }
    .my-xs  { margin-bottom:var(--spaceing-xs);  margin-top: var(--spaceing-xs)  }
    .my-sm  { margin-bottom:var(--spaceing-sm);   margin-top: var(--spaceing-sm)  }
    .my     { margin-bottom:var(--spaceing) ;    margin-top: var(--spaceing)    }
    .my-md  { margin-bottom:var(--spaceing-md);   margin-top: var(--spaceing-md)  }
    .my-lg  { margin-bottom:var(--spaceing-lg);  margin-top: var(--spaceing-lg) }
    .my-xl  { margin-bottom:var(--spaceing-xl);  margin-top: var(--spaceing-xl) }
    .my-xxl { margin-bottom:var(--spaceing-xxl); margin-top: var(--spaceing-xxl)}

    .mx-xxs { margin-left: var(--spaceing-xxs); margin-right: var(--spaceing-xxs); }
    .mx-xs  { margin-left: var(--spaceing-xs);  margin-right: var(--spaceing-xs);  }
    .mx-sm  { margin-left: var(--spaceing-sm);   margin-right: var(--spaceing-sm);   }
    .mx     { margin-left: var(--spaceing);     margin-right: var(--spaceing);     }
    .mx-md  { margin-left: var(--spaceing-md);   margin-right: var(--spaceing-md);   }
    .mx-lg  { margin-left: var(--spaceing-lg);  margin-right: var(--spaceing-lg);  }
    .mx-xl  { margin-left: var(--spaceing-xl);  margin-right: var(--spaceing-xl);  }
    .mx-xxl { margin-left: var(--spaceing-xxl); margin-right: var(--spaceing-xxl); }

    .mt-xxs { margin-top: var(--spaceing-xxs); }
    .mt-xs  { margin-top: var(--spaceing-xs);  }
    .mt-sm  { margin-top: var(--spaceing-sm);   }
    .mt     { margin-top: var(--spaceing);     }
    .mt-md  { margin-top: var(--spaceing-md);   }
    .mt-lg  { margin-top: var(--spaceing-lg);  }
    .mt-xl  { margin-top: var(--spaceing-xl);  }
    .mt-xxl { margin-top: var(--spaceing-xxl); }

    .mb-xxs { margin-bottom: var(--spaceing-xxs); }
    .mb-xs  { margin-bottom: var(--spaceing-xs);  }
    .mb-sm  { margin-bottom: var(--spaceing-sm);   }
    .mb     { margin-bottom: var(--spaceing);     }
    .mb-md  { margin-bottom: var(--spaceing-md);   }
    .mb-lg  { margin-bottom: var(--spaceing-lg);  }
    .mb-xl  { margin-bottom: var(--spaceing-xl);  }
    .mb-xxl { margin-bottom: var(--spaceing-xxl); }

    .ml-xxs { margin-left: var(--spaceing-xxs); }
    .ml-xs  { margin-left: var(--spaceing-xs);  }
    .ml-sm  { margin-left: var(--spaceing-sm);   }
    .ml     { margin-left: var(--spaceing);     }
    .ml-md  { margin-left: var(--spaceing-md);   }
    .ml-lg  { margin-left: var(--spaceing-lg);  }
    .ml-xl  { margin-left: var(--spaceing-xl);  }
    .ml-xxl { margin-left: var(--spaceing-xxl); }

    .mr-xxs { margin-right: var(--spaceing-xxs); }
    .mr-xs  { margin-right: var(--spaceing-xs);  }
    .mr-sm  { margin-right: var(--spaceing-sm);   }
    .mr     { margin-right: var(--spaceing);     }
    .mr-md  { margin-right: var(--spaceing-md);   }
    .mr-lg  { margin-right: var(--spaceing-lg);  }
    .mr-xl  { margin-right: var(--spaceing-xl);  }
    .mr-xxl { margin-right: var(--spaceing-xxl); }

    .mt-auto { margin-top: auto; }
    .mb-auto { margin-bottom: auto; }
    .ml-auto { margin-left: auto; }
    .mr-auto { margin-right: auto; }

    /****************************************************************
    * Padding
    *****************************************************************/

    .p-xxs { padding: var(--spaceing-xxs); }
    .p-xs  { padding: var(--spaceing-xs);  }
    .p-sm  { padding: var(--spaceing-sm);   }
    .p     { padding: var(--spaceing);     }
    .p-md  { padding: var(--spaceing-md);   }
    .p-lg  { padding: var(--spaceing-lg);  }
    .p-xl  { padding: var(--spaceing-xl);  }
    .p-xxl { padding: var(--spaceing-xxl); }

    .py-xxs { padding-top: var(--spaceing-xxs);        padding-bottom: var(--spaceing-xxs); }
    .py-xs  { padding-top: var(--spaceing-xs);         padding-bottom: var(--spaceing-xs);  }
    .py-sm  { padding-top: var(--spaceing-sm);          padding-bottom: var(--spaceing-sm);   }
    .py     { padding-top: var(--spaceing);            padding-bottom: var(--spaceing);     }
    .py-md  { padding-top: var(--spaceing-md);         padding-bottom: var(--spaceing-md);   }
    .py-lg  { padding-top: var(--spaceing-lg);         padding-bottom: var(--spaceing-lg);  }
    .py-xl  { padding-top: var(--spaceing-xl);         padding-bottom: var(--spaceing-xl);  }
    .py-xxl { padding-top: var(--spaceing-xxl);        padding-bottom: var(--spaceing-xxl); }
    .py-indented {padding-top: var(--document-indent); padding-bottom: var(--document-indent)}

    .px-xxs { padding-left: var(--spaceing-xxs);        padding-right: var(--spaceing-xxs); }
    .px-xs  { padding-left: var(--spaceing-xs);         padding-right: var(--spaceing-xs);  }
    .px-sm  { padding-left: var(--spaceing-sm);          padding-right: var(--spaceing-sm);   }
    .px     { padding-left: var(--spaceing);            padding-right: var(--spaceing);     }
    .px-md  { padding-left: var(--spaceing-md);         padding-right: var(--spaceing-md);   }
    .px-lg  { padding-left: var(--spaceing-lg);         padding-right: var(--spaceing-lg);  }
    .px-xl  { padding-left: var(--spaceing-xl);         padding-right: var(--spaceing-xl);  }
    .px-xxl { padding-left: var(--spaceing-xxl);        padding-right: var(--spaceing-xxl); }
    .px-indented {padding-left: var(--document-indent); padding-right: var(--document-indent)}


    .pt-xxs { padding-top: var(--spaceing-xxs); }
    .pt-xs  { padding-top: var(--spaceing-xs);  }
    .pt-sm  { padding-top: var(--spaceing-sm);   }
    .pt     { padding-top: var(--spaceing);     }
    .pt-md  { padding-top: var(--spaceing-md);   }
    .pt-lg  { padding-top: var(--spaceing-lg);  }
    .pt-xl  { padding-top: var(--spaceing-xl);  }
    .pt-xxl { padding-top: var(--spaceing-xxl); }

    .pb-xxs { padding-bottom: var(--spaceing-xxs); }
    .pb-xs  { padding-bottom: var(--spaceing-xs);  }
    .pb-sm  { padding-bottom: var(--spaceing-sm);   }
    .pb     { padding-bottom: var(--spaceing);     }
    .pb-md  { padding-bottom: var(--spaceing-md);   }
    .pb-lg  { padding-bottom: var(--spaceing-lg);  }
    .pb-xl  { padding-bottom: var(--spaceing-xl);  }
    .pb-xxl { padding-bottom: var(--spaceing-xxl); }

    .pl-xxs { padding-left: var(--spaceing-xxs); }
    .pl-xs  { padding-left: var(--spaceing-xs);  }
    .pl-sm  { padding-left: var(--spaceing-sm);   }
    .pl     { padding-left: var(--spaceing);     }
    .pl-md  { padding-left: var(--spaceing-md);   }
    .pl-lg  { padding-left: var(--spaceing-lg);  }
    .pl-xl  { padding-left: var(--spaceing-xl);  }
    .pl-xxl { padding-left: var(--spaceing-xxl); }

    .pr-xxs { padding-right: var(--spaceing-xxs); }
    .pr-xs  { padding-right: var(--spaceing-xs);  }
    .pr-sm  { padding-right: var(--spaceing-sm);   }
    .pr     { padding-right: var(--spaceing);     }
    .pr-md  { padding-right: var(--spaceing-md);   }
    .pr-lg  { padding-right: var(--spaceing-lg);  }
    .pr-xl  { padding-right: var(--spaceing-xl);  }
    .pr-xxl { padding-right: var(--spaceing-xxl); }


    hr.spacer-xxl { border: none; height: calc(var(--spaceing-xxl) * 2); }
    hr.spacer-xl  { border: none; height: calc(var(--spaceing-xl) * 2);  }
    hr.spacer-lg  { border: none; height: calc(var(--spaceing-lg) * 2);  }
    hr.spacer-md  { border: none; height: calc(var(--spaceing-md) * 2);   }
    hr.spacer     { border: none; height: calc(var(--spaceing) * 2);     }
    hr.spacer-sm  { border: none; height: calc(var(--spaceing-sm) * 2);   }
    hr.spacer-xs  { border: none; height: calc(var(--spaceing-xs) * 2);  }
    hr.spacer-xxs { border: none; height: calc(var(--spaceing-xxs) * 2); }

    .w-full { width: 100%; }
    .w-16 { width: 16px; }
    .w-18 { width: 18px; }
    .w-20 { width: 20px; }
    .w-24 { width: 24px; }
    .w-32 { width: 32px; }
    .w-36 { width: 36px; }
    .w-40 { width: 40px; }
    .w-42 { height: 42px; }
    .w-48 { width: 48px; }
    .w-56 { width: 56px; }
    .w-64 { width: 64px; }
    .w-72 { width: 72px; }
    .w-80 { width: 80px; }
    .w-96 { width: 96px; }
    .w-128 { width: 128px; }
    .w-200 { width: 200px; }
    .w-300 { width: 300px; }
    .w-400 { width: 400px; }
    .w-500 { width: 500px; }
    .w-600 { width: 600px; }
    .w-700 { width: 700px; }
    .w-800 { width: 800px; }
    .w-900 { width: 900px; }
    .w-1000 { width: 1000px; }
    .w-1200 { width: 1200px; }
    .w-1400 { width: 1400px; }
    .w-1600 { width: 1600px; }
    .w-video { width: 1920px; }

    .h-full { height: 100%; }
    .h-16 { height: 16px; }
    .h-18 { height: 18px; }
    .h-20 { height: 20px; }
    .h-24 { height: 24px; }
    .h-32 { height: 32px; }
    .h-36 { height: 36px; }
    .h-40 { height: 40px; }
    .h-42 { height: 42px; }
    .h-48 { height: 48px; }
    .h-56 { height: 56px; }
    .h-64 { height: 64px; }
    .h-72 { height: 72px; }
    .h-80 { height: 80px; }
    .h-96 { height: 96px; }
    .h-128 { height: 128px; }
    .h-200 { height: 200px; }
    .h-300 { height: 300px; }
    .h-400 { height: 400px; }
    .h-500 { height: 500px; }
    .h-600 { height: 600px; }
    .h-700 { height: 700px; }
    .h-800 { height: 800px; }

    .vh-50 { min-height: 50vh; }
    .vh-60 { min-height: 60vh; }
    .vh-70 { min-height: 70vh; }
    .vh-80 { min-height: 80vh; }
    .vh-90 { min-height: 90vh; }
    .vh-full { min-height: 100vh; }


    /****************************************************************
    * Border
    *****************************************************************/

    .rounded-xxs { border-radius: var(--rounded-xxs); }
    .rounded-xs { border-radius: var(--rounded-xs); }
    .rounded-s { border-radius: var(--rounded-s); }
    .rounded    { border-radius: var(--rounded); }
    .rounded-md { border-radius: var(--rounded-md); }
    .rounded-lg { border-radius: var(--rounded-lg); }
    .rounded-xl { border-radius: var(--rounded-xl); }
    .rounded-xl { border-radius: var(--rounded-xxl); }
    .rounded-full { border-radius: var(--rounded-full);}


    .border { border-width:var(--border-width,1px); border-style:var(--border-style,solid); border-color: var(--border-color,#DDD); }
    .border-0 { border: none; }
    .border-t { border-top-width: var(--border-width,1px); border-top-style: var(--border-style,solid); border-top-color: var(--border-color,#DDD); }
    .border-b { border-bottom-width: var(--border-width,1px); border-bottom-style: var(--border-style,solid); border-bottom-color: var(--border-color,#DDD); }
    .border-l { border-left-width: var(--border-width,1px); border-left-style: var(--border-style,solid); border-left-color: var(--border-color,#DDD); }
    .border-r { border-right-width: var(--border-width,1px); border-right-style: var(--border-style,solid); border-right-color: var(--border-color,#DDD); }

    .b-dashed { border-style: dashed; }
    .border-light {--border-color: var(--border-color-light)}

    .aspect-1 { aspect-ratio: 1; }
    .aspect-video { aspect-ratio: 16 / 9; }

    .overflow-hidden { overflow: hidden; }
    .overflow-scroll { overflow: scroll; }
    .overflow-auto { overflow: auto; }
    .overflow-x-hidden { overflow-x: hidden; }
    .overflow-x-scroll { overflow-x: scroll; }

    .elevation-1 { box-shadow: var(--elevation-1); }
    .elevation-2 { box-shadow: var(--elevation-2); }
    .elevation-3 { box-shadow: var(--elevation-3); }
    .elevation-4 { box-shadow: var(--elevation-4); }
    .elevation-5 { box-shadow: var(--elevation-5); }

    @media (prefers-color-scheme: dark) {
        .dark\:invert {
            /* raster fallback: tweak values if needed to match the blue exactly */
            filter: invert(1) sepia(1) saturate(150%) hue-rotate(150deg) brightness(0.6) contrast(0.9);
        }
    }
}