Espaciado — FDS

Espaciado semántico: siete niveles derivados del mismo knob fluido, nombrados por uso en lugar de por tamaño.

Tokens semánticos

Token	Factor	Uso típico
`--spacing-inner`	0.5×	Padding interno muy ajustado
`--spacing-content`	0.75×	Gaps dentro de un bloque
`--spacing-stack`	1×	Apilado vertical estándar
`--spacing-block`	1×	Separación entre bloques
`--spacing-columns`	1.5×	Gaps entre columnas
`--spacing-section`	3×	Padding vertical de secciones
`--spacing-hero`	4.5×	Heroes y bloques de impacto

Todos son clamp() entre viewport mínimo (410 px) y máximo (1280 px).

Por qué semántico y no numérico

Spacing numérico (space-4, space-8) obliga a elegir el tamaño correcto cada vez. Spacing semántico te dice qué función cumple:

<!-- Semántico: clara intención -->
<section class="py-[var(--spacing-section)]">
  <div class="space-y-[var(--spacing-block)]">
    <article class="p-[var(--spacing-inner)]">...</article>
  </div>
</section>

<!-- Numérico: tienes que decidir cada vez -->
<section class="py-24">
  <div class="space-y-12">
    <article class="p-4">...</article>
  </div>
</section>

Si decides que las secciones deben ser más aireadas, cambias --spacing-section y todo el sitio se ajusta. Con spacing numérico, tienes que buscar y reemplazar.

Configurar la escala fluida

Knobs base:

--ft-space-min: unidad base en viewport mínimo (por defecto 0.5rem).
--ft-space-max: unidad base en viewport máximo (por defecto 1rem).

Derivados automáticos (uno por token):

--spacing-inner: calc(var(--ft-space) * 0.5)
--spacing-content: calc(var(--ft-space) * 0.75)
--spacing-stack: calc(var(--ft-space) * 1)
--spacing-block: calc(var(--ft-space) * 1)
--spacing-columns: calc(var(--ft-space) * 1.5)
--spacing-section: calc(var(--ft-space) * 3)
--spacing-hero: calc(var(--ft-space) * 4.5)

Uso con Tailwind

Las utilities de Tailwind aceptan las variables:

<section class="py-[var(--spacing-section)] px-[var(--spacing-block)]">
  <div class="flex flex-col gap-[var(--spacing-content)]">
    ...
  </div>
</section>

O mejor aún, FDS puede exponerlas como spacing tokens nativos de Tailwind si lo configuras en @theme.

Layouts pre-hechos

FDS aplica spacing semántico directamente a layouts clave:

<section> → padding-y: var(--spacing-section) + gap entre bloques hijos.
.card → padding: var(--spacing-block).

Ver Componentes para el detalle.

Ajusta el factor, no el valor absoluto

Si un bloque necesita más o menos spacing que otro del mismo nivel semántico, probablemente pide un token distinto. Antes de overridear con un valor absoluto, pregúntate qué función cumple y elige el token adecuado.

Stacking entre secciones

Secciones consecutivas con fondo propio (.has-background) gestionan automáticamente el spacing para evitar padding doble. Esto vive en layouts/section.css y está activo por defecto.