/*
FLUID SPACING SYSTEM (No CSS Variables)
Based on 1rem = 13px

Golden ratio minimums (×1.618): 0.2rem → 0.324rem → 0.524rem → 0.848rem → 1.372rem

How the calculation works:
We want spacing to scale smoothly from 320px to 1280px viewport width.
The clamp() middle value uses: offset + vw-coefficient

To find these values:
1. Calculate the difference: max-px - min-px
2. Calculate vw coefficient: difference ÷ 960px (since 1280px - 320px = 960px)
3. Calculate offset: min-px - (difference × 0.333)
   (The 0.333 comes from 320px ÷ 960px, ensuring the line passes through both points)

Example for xs: 
- Difference: 9.75px - 2.6px = 7.15px
- VW coefficient: 7.15px ÷ 960px = 0.74vw  
- Offset: 2.6px - (7.15px × 0.333) = 0.22px
- Result: clamp(0.2rem, 0.22px + 0.74vw, 0.75rem)
*/

/* Padding classes */
.p-xxs {
  padding: clamp(1px, -1px + 0.625vw, 2px); /* 1px below 480px, 2px above 480px */
} 
.p-xs {
  padding: clamp(0.2rem, 0.22px + 0.744vw, 0.75rem); /* 2.6px → 9.75px */
} 
.p-sm {
  padding: clamp(0.324rem, 0.21px + 1.253vw, 1.25rem); /* 4.21px → 16.25px */
} 
.p-md {
  padding: clamp(0.524rem, 0.38px + 2.002vw, 2rem); /* 6.81px → 26px */
} 
.p-lg {
  padding: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
} 
.p-xl {
  padding: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
} 
.ps-xl {
  padding-left: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
  padding-right: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
  padding-top: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
  padding-bottom: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
}

/* Margin classes */
.m-xxs {
  margin: clamp(1px, -1px + 0.625vw, 2px); /* 1px below 480px, 2px above 480px */
} 
.m-xs {
  margin: clamp(0.2rem, 0.22px + 0.744vw, 0.75rem); /* 2.6px → 9.75px */
} 
.m-sm {
  margin: clamp(0.324rem, 0.21px + 1.253vw, 1.25rem); /* 4.21px → 16.25px */
} 
.m-md {
  margin: clamp(0.524rem, 0.38px + 2.002vw, 2rem); /* 6.81px → 26px */
} 
.m-lg {
  margin: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
} 
.m-xl {
  margin: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
} 
.ms-xl {
  margin-left: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
  margin-right: clamp(0.88rem, -10.75px + 6.933vw, 6rem); /* 11.44px → 78px */
  margin-top: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
  margin-bottom: clamp(0.77rem, -1.81px + 3.697vw, 3.5rem); /* 10.01px → 45.5px */
}