/* ==============================================
   SHARED LAYOUT UTILITIES
   Compose layouts with utility classes instead of
   re-declaring the same flex/gap/spacing rules in
   every component file.

   Usage in HTML:
     <div class="flex-col gap-md">  → column + 16px gap
     <div class="flex-center">      → centered content
     <div class="flex-between">     → space-between header row
     <div class="flex-row gap-sm">  → row + 8px gap

   Stacking is additive — combine with component
   classes as needed:
     <div class="flex-col gap-md my-component">
   ============================================== */

/* ---- direction ---- */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; }

/* ---- alignment ---- */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: flex-start; justify-content: space-between; }

/* ---- gaps (paired with .flex-col or .flex-row) ---- */
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* ---- full-width helper ---- */
.w-full { width: 100%; }