/**
 * FLOW PRIMITIVE
 * Based on Every Layout's Stack
 * Creates vertical rhythm with consistent spacing between stacked elements
 *
 * Features:
 * - Flexbox-based vertical layout
 * - Consistent spacing using the "lobotomized owl" selector (* + *)
 * - No redundant margins on first/last elements
 * - Supports nested flows with different spacing
 * - Can split content with auto margins
 *
 * Usage:
 * .flow - Basic flow with default spacing
 * .flow[data-flow="tight"] - Compact spacing
 * .flow[data-flow="loose"] - Generous spacing
 */

.flow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flow > * {
  margin-block: 0;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space, 1.5rem));
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Spacing configurations
   ======================================== */

/* Tight spacing - for compact layouts */
.flow[data-flow="tight"] {
  --flow-space: var(--s-1);
}

/* Default spacing - balanced */
.flow[data-flow="default"] {
  --flow-space: var(--s0);
}

/* Loose spacing - for spacious layouts */
.flow[data-flow="loose"] {
  --flow-space: var(--s2);
}