/* ==========================================================================
   UTILITIES CSS — Classes utilitárias de apoio
   ========================================================================== */

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

.text-xs   { font-size: var(--text-xs) !important; }
.text-sm   { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg) !important; }
.text-xl   { font-size: var(--text-xl) !important; }

.text-inverse { color: var(--color-text-inverse) !important; }
.text-muted   { color: var(--color-text-muted) !important; }
.text-accent  { color: var(--color-accent) !important; }
.text-primary { color: var(--color-primary) !important; }

.font-display  { font-family: var(--font-display) !important; }
.font-bold     { font-weight: var(--weight-bold) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-medium   { font-weight: var(--weight-medium) !important; }

.uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.line-relaxed { line-height: var(--leading-relaxed) !important; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Flex helpers ───────────────────────────────────────────────────────── */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Espaçamentos ───────────────────────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mx-auto { margin-inline: auto; }

/* ── Bordas e raios ─────────────────────────────────────────────────────── */
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Backgrounds ────────────────────────────────────────────────────────── */
.bg-dark    { background: var(--color-dark); }
.bg-primary { background: var(--color-primary); }
.bg-accent  { background: var(--color-accent); }
.bg-light   { background: var(--color-bg); }

/* ── Posicionamento ─────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* ── Overflow ───────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Largura ────────────────────────────────────────────────────────────── */
.w-full { width: 100%; }
.max-w-prose { max-width: 65ch; }
.max-w-xl    { max-width: 680px; margin-inline: auto; }

/* ── Aspect ratio ───────────────────────────────────────────────────────── */
.aspect-video  { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }

/* ── Separador visual ───────────────────────────────────────────────────── */
.divider {
  width: 48px;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin: var(--space-4) auto;
}
.divider--left { margin-inline: 0; }

/* ── Highlight de texto ─────────────────────────────────────────────────── */
.highlight {
  background: linear-gradient(transparent 60%, var(--color-accent-ghost) 60%);
  padding-inline: 2px;
}