/*
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 */

/* 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 */