/* ══════════════════════════════════════════════
   utilities.css — v3.1
   Saulo B_ Design System
   Classes utilitárias para ajustes pontuais.
   Depende de: tokens.css
══════════════════════════════════════════════ */

/* ── Espaçamento — margin top ── */
.mt-xs       { margin-top: var(--gap-xs); }
.mt-sm       { margin-top: var(--gap-sm); }
.mt-sm-plus  { margin-top: var(--gap-sm-plus); }
.mt-md       { margin-top: var(--gap-md); }
.mt-lg       { margin-top: var(--gap-lg); }
.mt-md-plus  { margin-top: var(--gap-md-plus); }
.mt-xl       { margin-top: var(--gap-xl); }
.mt-2xl      { margin-top: var(--gap-2xl); }
.mt-3xl      { margin-top: var(--gap-3xl); }

/* ── Espaçamento — margin bottom ── */
.mb-xs       { margin-bottom: var(--gap-xs); }
.mb-sm       { margin-bottom: var(--gap-sm); }
.mb-sm-plus  { margin-bottom: var(--gap-sm-plus); }
.mb-md       { margin-bottom: var(--gap-md); }
.mb-lg       { margin-bottom: var(--gap-lg); }
.mb-md-plus  { margin-bottom: var(--gap-md-plus); }
.mb-xl       { margin-bottom: var(--gap-xl); }
.mb-2xl      { margin-bottom: var(--gap-2xl); }
.mb-3xl      { margin-bottom: var(--gap-3xl); }

/* ── Texto — alinhamento ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Texto — cor ── */
.t-default   { color: var(--text-default); }
.t-secondary { color: var(--text-secondary); }
.t-subtle    { color: var(--text-subtle); }
.t-blue      { color: var(--blue); }
.t-white     { color: var(--white); }

/* ── Texto — peso ── */
.fw-400 { font-weight: var(--weight-400); }
.fw-500 { font-weight: var(--weight-500); }
.fw-600 { font-weight: var(--weight-600); }
.fw-700 { font-weight: var(--weight-700); }

/* ── Display ── */
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-block  { display: block; }
.d-inline { display: inline-flex; }
.d-none   { display: none; }

/* ── Flex helpers ── */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

/* ── Gap ── */
.gap-xs       { gap: var(--gap-xs); }
.gap-sm       { gap: var(--gap-sm); }
.gap-sm-plus  { gap: var(--gap-sm-plus); }
.gap-md       { gap: var(--gap-md); }
.gap-lg       { gap: var(--gap-lg); }
.gap-md-plus  { gap: var(--gap-md-plus); }
.gap-xl       { gap: var(--gap-xl); }
.gap-2xl      { gap: var(--gap-2xl); }

/* ── Bordas ── */
.r-sm   { border-radius: var(--r-sm); }
.r-md   { border-radius: var(--r-md); }
.r-lg   { border-radius: var(--r-lg); }
.r-xl   { border-radius: var(--r-xl); }
.r-2xl  { border-radius: var(--r-2xl); }
.r-full { border-radius: var(--r-full); }

/* ── Backgrounds ── */
.bg-white     { background: var(--white); }
.bg-base      { background: var(--surface-base); }
.bg-raised    { background: var(--surface-raised); }
.bg-black     { background: var(--black); }
.bg-blue      { background: var(--blue); }
.bg-blue-ghost{ background: var(--blue-ghost); }