@tailwind components;
@tailwind utilities;

@layer utilities {
    [x-cloak] {
        display: none !important;
    }

    .rounded-theme {
        border-radius: 18px;
    }

    .border-brd {
        border-color: var(--border);
    }

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

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

    .text-typ-tone {
        color: var(--text-soft);
    }

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

    .gap-0\.75 {
        gap: 0.1875rem;
    }

    .line-clamp-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}