/* ============================================================
   TECH SILVA DESIGN SYSTEM — utilities.css (DS-02)
   Utilities de baixo nível (só as realmente úteis).
   ============================================================ */

/* container centralizado */
.ts-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--ts-space-4); }

/* acessibilidade: esconde visualmente, mantém p/ leitores de tela */
.ts-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* stack: empilha verticalmente com espaçamento */
.ts-stack { display: flex; flex-direction: column; gap: var(--ts-space-4); }
.ts-stack--tight { gap: var(--ts-space-2); }
.ts-stack--loose { gap: var(--ts-space-6); }

/* cluster: itens inline que quebram linha */
.ts-cluster { display: flex; flex-wrap: wrap; gap: var(--ts-space-3); align-items: center; }

/* grid simples responsivo */
.ts-grid { display: grid; gap: var(--ts-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* texto */
.ts-text-muted { color: var(--ts-color-text-muted); }
.ts-text-sm { font-size: var(--ts-text-small); }
.ts-text-caption { font-size: var(--ts-text-caption); }

/* divider */
.ts-divider { border: 0; border-top: 1px solid var(--ts-color-border); margin: var(--ts-space-4) 0; }

/* helpers responsivos */
.ts-hide-sm { display: none; }
@media (min-width: 640px) {
  .ts-hide-sm { display: initial; }
  .ts-hide-md { display: none; }
}
@media (min-width: 1024px) {
  .ts-hide-md { display: initial; }
}
.ts-full { width: 100%; }
.ts-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); }