@layer utilities {
    .font-xxxx-small {
        font-size: var(--font-size-xxxx-small);
    }
    .font-xxx-small {
        font-size: var(--font-size-xxx-small);
    }
    .font-xx-small {
        font-size: var(--font-size-xx-small);
    }
    .font-x-small {
        font-size: var(--font-size-x-small);
    }
    .font-small {
        font-size: var(--font-size-small);
    }
    .font-medium {
        font-size: var(--font-size-medium);
    }
    .font-large {
        font-size: var(--font-size-large);
    }
    .font-x-large {
        font-size: var(--font-size-x-large);
    }
    .font-xx-large {
        font-size: var(--font-size-xx-large);
    }
    .font-xxx-large {
        font-size: var(--font-size-xxx-large);
    }
    .font-xxxx-large {
        font-size: var(--font-size-xxxx-large);
    }

    .font-bold {
        font-weight: var(--font-weight-bolder);
    }


    .space-neutral {
        gap: var(--space-neutral);
    }
    .space-xxx-small {
        gap: var(--space-xxx-small);
    }
    .space-xx-small {
        gap: var(--space-xx-small);
    }
    .space-x-small {
        gap: var(--space-x-small);
    }
    .space-small {
        gap: var(--space-small);
    }
    .space-medium {
        gap: var(--space-medium);
    }
    .space-large {
        gap: var(--space-large);
    }
    .space-x-large {
        gap: var(--space-x-large);
    }
    .space-xx-large {
        gap: var(--space-xx-large);
    }
    .space-xxx-large {
        gap: var(--space-xxx-large);
    }


    .top-neutral {
        margin-top: var(--space-neutral);
    }
    .top-xxx-small {
        margin-top: var(--space-xxx-small);
    }
    .top-xx-small {
        margin-top: var(--space-xx-small);
    }
    .top-x-small {
        margin-top: var(--space-x-small);
    }
    .top-small {
        margin-top: var(--space-small);
    }
    .top-medium {
        margin-top: var(--space-medium);
    }
    .top-large {
        margin-top: var(--space-large);
    }
    .top-x-large {
        margin-top: var(--space-x-large);
    }
    .top-xx-large {
        margin-top: var(--space-xx-large);
    }
    .top-xxx-large {
        margin-top: var(--space-xxx-large);
    }

    .bottom-neutral {
        margin-bottom: var(--space-neutral);
    }
    .bottom-small {
        margin-bottom: var(--space-small);
    }

    .color-error {
        color: var(--color-error);
    }

    *[hidden] {
        display: none;
    }

    .grow {
        flex-grow: 1;
    }

    .nowrap {
        /* white-space: nowrap; */
    }

    .text-gradient {
        background-clip: text;
        color: transparent;
        background-image: linear-gradient(to left, #651b98, #ae51a1);
    }
    .text-error {
        color: var(--color-error);
    }
    .text-center {
        text-align: center;
    }
    .text-subtle {
        font-size: var(--font-size-xx-small);
        color: var(--color-fg-light);
    }

    .position-unset {
        position: unset;
    }

    .w-fit {
        max-width: fit-content;
    }

    .mx-auto {
        margin-inline: auto;
    }

    .margin-inline {
        margin-inline: auto;
    }

    .sr-only {
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
    }
}