@layer utilities {
    /* Text */
    .txt-xx-small { font-size: var(--text-xx-small); }
    .txt-x-small { font-size: var(--text-x-small); }
    .txt-small { font-size: var(--text-small); }
    .txt-normal { font-size: var(--text-normal); }
    .txt-medium { font-size: var(--text-medium); }
    .txt-large { font-size: var(--text-large); }
    .txt-x-large { font-size: var(--text-x-large); }
    .txt-xx-large { font-size: var(--text-xx-large); }

    .txt-align-center { text-align: center; }
    .txt-align-start { text-align: start; }
    .txt-align-end { text-align: end; }

    .font-weight-light { font-weight: var(--font-weight-light); }
    .font-weight-normal { font-weight: var(--font-weight-normal); }
    .font-weight-medium { font-weight: var(--font-weight-medium); } /* New */
    .font-weight-semibold { font-weight: var(--font-weight-semibold); }
    .font-weight-bold { font-weight: var(--font-weight-bold); }
    .font-weight-black { font-weight: var(--font-weight-black); }
    .text-muted { color: var(--color-muted); }

    /* Text Links */
    .text-link-none {
        color: inherit;
        text-decoration: none;
    }
    .text-link-none:where(:hover, :focus-visible) {
        text-decoration: underline;
    }

    .text-link-muted {
        color: var(--color-muted);
        text-decoration: none;
    }
    .text-link-muted:where(:hover, :focus-visible) {
        color: var(--color-ink);
    }

    /* Flexbox and Grid */
    .flex { display: flex; }
    .flex-inline { display: inline-flex; }
    .flex-column { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }

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

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

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

    .vertical-align-middle { vertical-align: middle; }

    .flex-1 { flex: 1; }
    .flex-item-grow { flex-grow: 1; }
    .flex-item-shrink { flex-shrink: 1; }
    .flex-item-no-shrink { flex-shrink: 0; }
    .flex-item-justify-start { margin-inline-end: auto; }
    .flex-item-justify-end { margin-inline-start: auto; }

    .gap-1 { gap: var(--space-1); }
    .gap-2 { gap: var(--space-2); }
    .gap-3 { gap: var(--space-3); }
    .gap-4 { gap: var(--space-4); }
    .gap-none {
        gap: 0;
    }

    /* Sizing */
    .full-width { inline-size: 100%; }
    .min-width { min-inline-size: 0; }
    .half-width { inline-size: 50%; }
    .max-width { max-inline-size: 100%; }
    .min-content { inline-size: min-content; }
    .fit-content { inline-size: fit-content; }

    /* Overflow */
    .overflow-x { overflow-x: auto; }
    .overflow-y { overflow-y: auto; }
    .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

    .overflow-line-clamp {
        -webkit-line-clamp: var(--lines, 2);
        line-clamp: var(--lines, 2);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
    }

    /* Mouse pointer */
    .non-clickable {
        cursor: default;
        pointer-events: none;
    }

    .cursor-pointer { cursor: pointer; }

    /* Spacing */
    /* Margin */
    .m-0 { margin: 0; }
    .m-1 { margin: var(--space-1); }
    .m-2 { margin: var(--space-2); }
    .m-3 { margin: var(--space-3); }
    .m-4 { margin: var(--space-4); }

    .mx-auto { margin-inline: auto; }
    /* left + right (logical inline) */
    .mx-1 { margin-inline: var(--space-1); }
    .mx-2 { margin-inline: var(--space-2); }
    .mx-3 { margin-inline: var(--space-3); }
    .mx-4 { margin-inline: var(--space-4); }

    /* top + bottom (logical block) */
    .my-1 { margin-block: var(--space-1); }
    .my-2 { margin-block: var(--space-2); }
    .my-3 { margin-block: var(--space-3); }
    .my-4 { margin-block: var(--space-4); }

    .mt-1 { margin-block-start: var(--space-1); }
    .mt-2 { margin-block-start: var(--space-2); }
    .mt-3 { margin-block-start: var(--space-3); }
    .mt-4 { margin-block-start: var(--space-4); }

    .mb-1 { margin-block-end: var(--space-1); }
    .mb-2 { margin-block-end: var(--space-2); }
    .mb-3 { margin-block-end: var(--space-3); }
    .mb-4 { margin-block-end: var(--space-4); }

    /* Padding */
    .p-0 { padding: 0; }
    .p-1 { padding: var(--space-1); }
    .p-2 { padding: var(--space-2); }
    .p-3 { padding: var(--space-3); }
    .p-4 { padding: var(--space-4); }

    /* left + right (logical inline) */
    .px-1 { padding-inline: var(--space-1); }
    .px-2 { padding-inline: var(--space-2); }
    .px-3 { padding-inline: var(--space-3); }
    .px-4 { padding-inline: var(--space-4); }

    /* top + bottom (logical block) */
    .py-1 { padding-block: var(--space-1); }
    .py-2 { padding-block: var(--space-2); }
    .py-3 { padding-block: var(--space-3); }
    .py-4 { padding-block: var(--space-4); }

    /* Position */
    .position-relative { position: relative; }
    .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }

    /* Fills */
    .fill { background-color: var(--color-canvas); }
    .fill-black { background-color: var(--color-ink); }
    .fill-white { background-color: var(--color-ink-inverted); }
    .fill-shade { background-color: var(--color-ink-lightest); }
    .fill-selected { background-color: var(--color-selected); }
    .fill-transparent { background-color: transparent; }

    /* Borders */
    .border { border: 1px solid var(--color-border); }
    .border-top { border-block-start: 1px solid var(--color-border); }
    .border-bottom { border-block-end: 1px solid var(--color-border); }
    .border-left { border-inline-start: 1px solid var(--color-border); }
    .border-right { border-inline-end: 1px solid var(--color-border); }
    .borderless { border: 0; }

    /* Radius + shadow */
    .rounded { border-radius: var(--radius-md); }
    .shadow-none { box-shadow: var(--shadow-none); }
    .shadow-sm { box-shadow: var(--shadow-sm); }
    .shadow-md { box-shadow: var(--shadow-md); }
    .shadow-lg { box-shadow: var(--shadow-lg); }
    .shadow-inset-sm { box-shadow: var(--shadow-inset-sm); }

    /* Lists */
    .list-none {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Accessibility */
    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Hide scrollbars */
    .hide-scrollbar {
        -ms-overflow-style: none; /* Edge */
        scrollbar-width: none; /* FF */

        /* Chrome/Safari/Opera */
        &::-webkit-scrollbar {
            display: none;
        }
    }
}