/* Layout (Atlassian Stack / Inline): o espaço entre elementos vem dos tokens, nunca de
   style="margin…". <c-pilha espaco="200"> empilha; <c-linha espaco="100"> alinha em linha. */

.ds-pilha { display: flex; flex-direction: column; gap: var(--espaco, var(--espaco-100)); }
.ds-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--alinhar, center);
  justify-content: var(--distribuir, flex-start);
  gap: var(--espaco, var(--espaco-100));
}
.ds-espaco-050 { --espaco: var(--espaco-050); }
.ds-espaco-100 { --espaco: var(--espaco-100); }
.ds-espaco-150 { --espaco: var(--espaco-150); }
.ds-espaco-200 { --espaco: var(--espaco-200); }
.ds-espaco-300 { --espaco: var(--espaco-300); }
.ds-espaco-400 { --espaco: var(--espaco-400); }
.ds-alinhar-inicio { --alinhar: flex-start; }
.ds-alinhar-fim { --alinhar: flex-end; }
.ds-alinhar-base { --alinhar: baseline; }
.ds-distribuir-entre { --distribuir: space-between; }
.ds-distribuir-fim { --distribuir: flex-end; }
.ds-grade { display: grid; gap: var(--espaco, var(--espaco-200)); grid-template-columns: repeat(auto-fit, minmax(var(--coluna-minima, 14rem), 1fr)); }
.ds-texto-suave { color: var(--cor-texto-suave); }
.ds-texto-pequeno { font: var(--fonte-texto-p); }