Fluid Margin & Padding Helpers

See Grid and flex classes for layout. Containers (.container-*) set page width only and should not alter margins or padding. Use the spacing utilities below for consistent rhythm. Gaps are updated to --gap-* and .gap-*.

:root {

  /* ----------------------------------- PADDING & MARGINS -------------------- */
  --space-xxs: 0.222rem; /* 4px — only use when two items together sum to ≥ 8px */
  --space-xs:  0.444rem; /* 8px */ 
  --space-sm:  0.667rem; /* 12px */
  --space-md:  0.889rem; /* 16px */
  --space-lg:  1.333rem; /* 24px */
  --space-xl:  2.222rem; /* 40px */

  /* ----------------------------------- Fluid spacing tokens ---------------- */
  --space-xxs-fluid: clamp(0.222rem, 0.5vw, 0.333rem); /* ~4–6px */
  --space-xs-fluid:  clamp(0.444rem, 1vw, 0.556rem);   /* ~8–10px */
  --space-sm-fluid:  clamp(0.667rem, 2vw, 1.111rem);   /* ~12–20px */
  --space-md-fluid:  clamp(0.889rem, 3vw, 2.222rem);   /* ~16–40px */
  --space-lg-fluid:  clamp(1.333rem, 8vw, 4.444rem);   /* ~24–80px */
  --space-xl-fluid:  clamp(2.222rem, 10vw, 6.666rem);  /* ~40–120px */
  
  /* ----------------------------------- Jumbo (padding only) ---------------- */
  --space-jumbo-sm-fluid: clamp(1.333rem, 14vw, 14rem);
  --space-jumbo-md-fluid: clamp(2.222rem, 16vw, 16rem);
  --space-jumbo-lg-fluid: clamp(3.333rem, 25vw, 20rem);
  
  /* ----------------------------------- Gap tokens (UPDATED) ---------------- */
  --gap-xs: var(--space-xs-fluid);
  --gap-sm: var(--space-sm-fluid);
  --gap-md: var(--space-md-fluid);
  --gap-lg: var(--space-lg-fluid);
  --gap-xl: var(--space-xl-fluid);
}

/* ****************************************** SPACING *************************
Add space between sections with vertical spacers.
**************************************************************************** */

<div class="v-spacer-sm" aria-hidden="true" role="presentation"></div>

.v-spacer-xxs { height: var(--space-xxs-fluid); }
.v-spacer-xs  { height: var(--space-xs-fluid); }
.v-spacer-sm  { height: var(--space-sm-fluid); }
.v-spacer-md  { height: var(--space-md-fluid); }
.v-spacer-lg  { height: var(--space-lg-fluid); }
.v-spacer-xl  { height: var(--space-xl-fluid); }
  
------------------------------- Examples: padding and margin helpers

in = padding
out = margins
      
• .out-lg       (add large margin on all sides)
• .in-sm        (add small padding on all sides)
      
• .out-y-lg     (add large margin to top & bottom)
• .in-x-sm      (add small padding to left & right)
      
• .in-x-dwn-sm  (add small left/right padding to child elements)
• .out-dwn-lg   (add large margins to child elements)
      
-------------------------------------------------------------------------------- 
Note: Padding utilities do not auto-clear existing padding. Use .in-stop to cancel.
--------------------------------------------------------------------------------  

Class extensions
    
dwn  = cascade to child elements
dwn2 = cascade to grandchildren (skip a level)

• in-Ax-dwn-*   add padding to child elements
• out-Ax-dwn-*  add margin(s) to child elements
    
* = size options
Use size to define the space: xxs, xs, sm, md, lg, xl
(Use xxs only when adjacent items together total ≥ 8px)

Ax = axis options
y = top & bottom 
x = left & right 
l = left
r = right
t = top
b = bottom

-- extended size options — jumbo (padding only)
in-jumbo-Ax-*
 * = jumbo sizes: sm, md, lg
Example: .in-jumbo-y-sm  (add small jumbo padding to top and bottom)

Note — there are no jumbo margin classes.

--------------------------
To remove inherited padding from a child use:
class="in-stop"

Or override with a different .in-* utility on that element directly.
-------------------------- 

General guidance
- Use .v-spacer-* to create space between sections.
- Prefer padding (in-*) for internal spacing; use margins (out-*) to separate blocks.
- hr elements can have margin classes; padding is not recommended:
  <hr class="out-y-lg" aria-hidden="true" role="presentation">
- As an alternative spacer:
  <div class="v-spacer-lg" aria-hidden="true" role="presentation"></div>
- Standard line breaks <br> are for inline content only.