@layer components {

        /* Text utilities */
    .fw-bold {
        font-weight: var(--font-weight-bold);
    }

    .u-text-primary {
        color: var(--color-text);
    }

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

    .u-text-inverse {
        color: var(--color-text-inverse);
    }

    .u-text-interactive {
        color: var(--color-link);
        transition: color 0.2s ease;
    }

    .u-text-interactive:hover,
    .u-text-interactive:focus-visible {
        color: var(--color-link-hover);
    }

    /* Layout utilities */
    .u-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-12);
    }

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

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

    .fs-h3 {
        font-size: var(--text-lg);
    }

    /* Miscellaneous utilities */
    .color {
        background-color: var(--color-badge-platform-empty-bg);
    }

    .width {
        width: 100%;
    }

    .container {
        --max-width: 80rem;
        --padding: 1rem;
        width: auto;
        max-width: var(--max-width);
        margin-inline: var(--padding);
    }

    @media (min-width: 82rem) {
        .container {
            margin-inline: auto;
        }
    }

    .url {
        cursor: pointer;
    }

    .dropdown-loggedin .logout button {
        color: var(--color-ui-contrast);
    }

    .expand-toggle {
        cursor: pointer;
    }

}