/* Minimal utility classes — for one-off adjustments the component classes
   don't cover.  NOT a replacement for Tailwind; keep this list small. */

/* ── Text ──────────────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-muted  { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold   { font-weight: var(--weight-bold); }
.font-mono   { font-family: var(--font-mono); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Display / flex ────────────────────────────────────── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }
.gap-1       { gap: var(--space-1); }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }

/* ── Spacing ───────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-inline: var(--space-4); }
.py-2 { padding-block: var(--space-2); }

/* ── Width ─────────────────────────────────────────────── */
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-content { max-width: var(--content-max); }

/* ── Visibility ────────────────────────────────────────── */
.hidden { display: none; }

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block  { display: block; }
  .sm\:flex   { display: flex; }
  .sm\:inline { display: inline; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }
  .md\:inline { display: inline; }
  .md\:flex-row { flex-direction: row; }
  .md\:gap-6 { gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block  { display: block; }
  .lg\:flex   { display: flex; }
}