/* ===================================
   UTILITIES — Spacing
   Usa i tokens definiti in tokens.css
   =================================== */

:root {
    /* opzionale, utile avere anche lo zero */
    --space-0: 0px;
    --space-1px: 1px;
    
    /* Spazi piccoli (quasi fissi) */
    --space-builder: clamp(2px,  1vw, 2px);
    --space-1:  clamp(4px,  1vw, 4px);
    --space-2:  clamp(8px,  1vw, 8px);
    --space-3:  clamp(12px, 1.5vw, 12px);
    --space-4:  clamp(16px, 2vw, 16px);
    
    /* Spazi medi (leggermente fluidi) */
    --space-5:  clamp(20px, 3vw, 24px);
    --space-6:  clamp(24px, 4vw, 32px);
    --space-8:  clamp(32px, 5vw, 48px);
    --space-10: clamp(40px, 6vw, 56px);
    --space-12: clamp(48px, 7vw, 64px);
    
    /* Spazi grandi (molto fluidi) */
    --space-16: clamp(64px,  8vw,  96px);
    --space-20: clamp(80px,  10vw, 120px);
    --space-24: clamp(96px,  12vw, 144px);
    --space-32: clamp(128px, 16vw, 192px);
    --space-40: clamp(160px, 20vw, 256px);
    --space-48: clamp(192px, 24vw, 320px);
    --space-56: clamp(224px, 28vw, 384px);
    --space-64: clamp(256px, 32vw, 448px);
    
    /* Alias comodi per le sezioni */
    --space-section-sm: clamp(24px, 5vw, 48px);
    --space-section-md: clamp(48px, 7vw, 96px);
    --space-section-lg: clamp(64px, 10vw, 128px);

    /* Badge / pill (es. section-badge-hero) */
    --padding-badge: 0.2rem 0.65rem 0.2rem 0.9rem;
}



/* 🔹 Padding generali */
.p-builder { padding: var(--space-builder); }
.p-1px { padding: var(--space-1px ); }
.p-1  { padding: var(--space-1); } 
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }
.p-40 { padding: var(--space-40); }
.p-48 { padding: var(--space-48); }
.p-56 { padding: var(--space-56); }
.p-64 { padding: var(--space-64); }

/* 🔹 Padding sezioni */
.p-section-sm{ padding-block: var(--space-section-sm); }
.p-section-md{ padding-block: var(--space-section-md); }
.p-section-lg{ padding-block: var(--space-section-lg); }

/* 🔹 Padding asse Y */
.py-builder { padding: var(--space-builder); }
.py-1  { padding-block: var(--space-1); }
.py-2  { padding-block: var(--space-2); }
.py-3  { padding-block: var(--space-3); }
.py-4  { padding-block: var(--space-4); }
.py-5  { padding-block: var(--space-5); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }
.py-24 { padding-block: var(--space-24); }
.py-32 { padding-block: var(--space-32); }
.py-40 { padding-block: var(--space-40); }
.py-48 { padding-block: var(--space-48); }
.py-56 { padding-block: var(--space-56); }
.py-64 { padding-block: var(--space-64); }

/* 🔹 Padding asse X */
.px-builder { padding: var(--space-builder); }
.px-1  { padding-inline: var(--space-1); }
.px-2  { padding-inline: var(--space-2); }
.px-3  { padding-inline: var(--space-3); }
.px-4  { padding-inline: var(--space-4); }
.px-5  { padding-inline: var(--space-5); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }
.px-10 { padding-inline: var(--space-10); }
.px-12 { padding-inline: var(--space-12); }
.px-16 { padding-inline: var(--space-16); }
.px-20 { padding-inline: var(--space-20); }
.px-24 { padding-inline: var(--space-24); }
.px-32 { padding-inline: var(--space-32); }
.px-40 { padding-inline: var(--space-40); }
.px-48 { padding-inline: var(--space-48); }
.px-56 { padding-inline: var(--space-56); }
.px-64 { padding-inline: var(--space-64); }

/* 🔹 Padding direzioni singole */

/* Top */
.pt-builder { padding: var(--space-builder); }
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pt-5  { padding-top: var(--space-5); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }
.pt-32 { padding-top: var(--space-32); }
.pt-40 { padding-top: var(--space-40); }
.pt-48 { padding-top: var(--space-48); }
.pt-56 { padding-top: var(--space-56); }
.pt-64 { padding-top: var(--space-64); }

/* Right */
.pr-builder { padding: var(--space-builder); }
.pr-1  { padding-right: var(--space-1); }
.pr-2  { padding-right: var(--space-2); }
.pr-3  { padding-right: var(--space-3); }
.pr-4  { padding-right: var(--space-4); }
.pr-5  { padding-right: var(--space-5); }
.pr-6  { padding-right: var(--space-6); }
.pr-8  { padding-right: var(--space-8); }
.pr-10 { padding-right: var(--space-10); }
.pr-12 { padding-right: var(--space-12); }
.pr-16 { padding-right: var(--space-16); }
.pr-20 { padding-right: var(--space-20); }
.pr-24 { padding-right: var(--space-24); }
.pr-32 { padding-right: var(--space-32); }
.pr-40 { padding-right: var(--space-40); }
.pr-48 { padding-right: var(--space-48); }
.pr-56 { padding-right: var(--space-56); }
.pr-64 { padding-right: var(--space-64); }

/* Bottom */
.pb-builder { padding: var(--space-builder); }
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-5  { padding-bottom: var(--space-5); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-32 { padding-bottom: var(--space-32); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-48 { padding-bottom: var(--space-48); }
.pb-56 { padding-bottom: var(--space-56); }
.pb-64 { padding-bottom: var(--space-64); }

/* Left */
.pl-builder { padding: var(--space-builder); }
.pl-1  { padding-left: var(--space-1); }
.pl-2  { padding-left: var(--space-2); }
.pl-3  { padding-left: var(--space-3); }
.pl-4  { padding-left: var(--space-4); }
.pl-5  { padding-left: var(--space-5); }
.pl-6  { padding-left: var(--space-6); }
.pl-8  { padding-left: var(--space-8); }
.pl-10 { padding-left: var(--space-10); }
.pl-12 { padding-left: var(--space-12); }
.pl-16 { padding-left: var(--space-16); }
.pl-20 { padding-left: var(--space-20); }
.pl-24 { padding-left: var(--space-24); }
.pl-32 { padding-left: var(--space-32); }
.pl-40 { padding-left: var(--space-40); }
.pl-48 { padding-left: var(--space-48); }
.pl-56 { padding-left: var(--space-56); }
.pl-64 { padding-left: var(--space-64); }


/* 🔹 Margin */
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-32 { margin: var(--space-32); }
.m-40 { margin: var(--space-40); }
.m-48 { margin: var(--space-48); }
.m-56 { margin: var(--space-56); }
.m-64 { margin: var(--space-64); }

/* 🔹 Margin asse Y */
.my-1  { margin-block: var(--space-1); }
.my-2  { margin-block: var(--space-2); }
.my-3  { margin-block: var(--space-3); }
.my-4  { margin-block: var(--space-4); }
.my-5  { margin-block: var(--space-5); }
.my-6  { margin-block: var(--space-6); }
.my-8  { margin-block: var(--space-8); }
.my-10 { margin-block: var(--space-10); }
.my-12 { margin-block: var(--space-12); }
.my-16 { margin-block: var(--space-16); }
.my-20 { margin-block: var(--space-20); }
.my-24 { margin-block: var(--space-24); }
.my-32 { margin-block: var(--space-32); }
.my-40 { margin-block: var(--space-40); }
.my-48 { margin-block: var(--space-48); }
.my-56 { margin-block: var(--space-56); }
.my-64 { margin-block: var(--space-64); }

/* 🔹 Margin asse X */
.mx-1  { margin-inline: var(--space-1); }
.mx-2  { margin-inline: var(--space-2); }
.mx-3  { margin-inline: var(--space-3); }
.mx-4  { margin-inline: var(--space-4); }
.mx-5  { margin-inline: var(--space-5); }
.mx-6  { margin-inline: var(--space-6); }
.mx-8  { margin-inline: var(--space-8); }
.mx-10 { margin-inline: var(--space-10); }
.mx-12 { margin-inline: var(--space-12); }
.mx-16 { margin-inline: var(--space-16); }
.mx-20 { margin-inline: var(--space-20); }
.mx-24 { margin-inline: var(--space-24); }
.mx-32 { margin-inline: var(--space-32); }
.mx-40 { margin-inline: var(--space-40); }
.mx-48 { margin-inline: var(--space-48); }
.mx-56 { margin-inline: var(--space-56); }
.mx-64 { margin-inline: var(--space-64); }

/* 🔹 Margin direzioni singole */

/* Top */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }
.mt-56 { margin-top: var(--space-56); }
.mt-64 { margin-top: var(--space-64); }

/* Right */
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-3  { margin-right: var(--space-3); }
.mr-4  { margin-right: var(--space-4); }
.mr-5  { margin-right: var(--space-5); }
.mr-6  { margin-right: var(--space-6); }
.mr-8  { margin-right: var(--space-8); }
.mr-10 { margin-right: var(--space-10); }
.mr-12 { margin-right: var(--space-12); }
.mr-16 { margin-right: var(--space-16); }
.mr-20 { margin-right: var(--space-20); }
.mr-24 { margin-right: var(--space-24); }
.mr-32 { margin-right: var(--space-32); }
.mr-40 { margin-right: var(--space-40); }
.mr-48 { margin-right: var(--space-48); }
.mr-56 { margin-right: var(--space-56); }
.mr-64 { margin-right: var(--space-64); }

/* Bottom */
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-56 { margin-bottom: var(--space-56); }
.mb-64 { margin-bottom: var(--space-64); }

/* Left */
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-5  { margin-left: var(--space-5); }
.ml-6  { margin-left: var(--space-6); }
.ml-8  { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }
.ml-16 { margin-left: var(--space-16); }
.ml-20 { margin-left: var(--space-20); }
.ml-24 { margin-left: var(--space-24); }
.ml-32 { margin-left: var(--space-32); }
.ml-40 { margin-left: var(--space-40); }
.ml-48 { margin-left: var(--space-48); }
.ml-56 { margin-left: var(--space-56); }
.ml-64 { margin-left: var(--space-64); }