@layer utilities;

@layer utilities {
    .text-primary {
        color: var(--color-primary);
    }

    .text-secondary {
        color: var(--color-text-secondary);
    }

    .text-center {
        text-align: center;
    }

    .text-2xl {
        font-size: var(--text-2xl);
    }

    .text-4xl {
        font-size: var(--text-4xl);
    }

    .text-xl {
        font-size: var(--text-xl);
    }

    .block {
        display: block;
    }

    .font-bold {
        font-weight: 700;
    }

    .text-balance {
        text-wrap: balance;
    }

    .bg-primary {
        background-color: var(--color-primary);
    }

    .bg-surface {
        background-color: var(--color-surface);
    }

    .h-screen-svh {
        height: 100svh;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .overflow-hidden {
        overflow: hidden;
    }
}