/* Xcojo Utilities — requires tokens.css loaded first */
.xcojo-flex { display: flex; }
.xcojo-flex-col { display: flex; flex-direction: column; }
.xcojo-items-center { align-items: center; }
.xcojo-justify-between { justify-content: space-between; }
.xcojo-justify-center { justify-content: center; }
.xcojo-flex-wrap { flex-wrap: wrap; }

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

.xcojo-mt-1 { margin-top: var(--xcojo-space-1); }
.xcojo-mt-2 { margin-top: var(--xcojo-space-2); }
.xcojo-mt-3 { margin-top: var(--xcojo-space-3); }
.xcojo-mt-4 { margin-top: var(--xcojo-space-4); }
.xcojo-mb-1 { margin-bottom: var(--xcojo-space-1); }
.xcojo-mb-2 { margin-bottom: var(--xcojo-space-2); }
.xcojo-mb-3 { margin-bottom: var(--xcojo-space-3); }
.xcojo-mb-4 { margin-bottom: var(--xcojo-space-4); }

.xcojo-text-center { text-align: center; }
.xcojo-text-muted { color: var(--xcojo-subtext); }
.xcojo-rounded-sm { border-radius: var(--xcojo-radius-sm); }
.xcojo-rounded-md { border-radius: var(--xcojo-radius-md); }
.xcojo-rounded-lg { border-radius: var(--xcojo-radius-lg); }
.xcojo-hidden { display: none; }

@media (max-width: 600px) {
    .xcojo-hide-mobile { display: none; }
}
@media (min-width: 601px) {
    .xcojo-hide-desktop { display: none; }
}