/* =====================================
   LAYOUT PRIMITIVES
   ===================================== */

/* Vertical stack */
.stack {
    display: flex;
    flex-direction: column;
  }

/* Stack spacing modifiers */
.stack--xs > * + * {
    margin-top: var(--space-xs);
  }
  
  .stack--sm > * + * {
    margin-top: var(--space-sm);
  }
  
  .stack--md > * + * {
    margin-top: var(--space-md);
  }
  
  .stack--lg > * + * {
    margin-top: var(--space-lg);
  }
    
  /* Horizontal grouping */
.inline {
    display: flex;
    align-items: center;
  }

  .inline--xs > * + * {
    margin-left: var(--space-xs);
  }
  
  .inline--sm > * + * {
    margin-left: var(--space-sm);
  }
  
  .inline--md > * + * {
    margin-left: var(--space-md);
  }
  
  .inline--lg > * + * {
    margin-left: var(--space-lg);
  }

  /* Alignment modifiers */
.align-start {
    align-items: flex-start;
  }
  
  .align-center {
    align-items: center;
  }
  
  .align-end {
    align-items: flex-end;
  }
  
  .justify-between {
    justify-content: space-between;
  }

  /* Width control */
.full {
    width: 100%;
  }
  
  .auto {
    width: auto;
  }