/**
 * Fluent CSS Framework
 * Author: Toine Pel - TP Media Group
 * Version: 2.3.0
 * 
 * Een compleet fluent CSS systeem met responsieve variabelen
 * voor gap, margin, padding, border-radius en typography utilities.
 */

/* ========================================
   CSS VARIABELEN - Responsive Spacing Scale
   ======================================== */

:root {
    /* Gap Variabelen */
    --gap-0: 0;
    --gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);    /* 4px → 8px */
    --gap-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem);     /* 8px → 12px */
    --gap-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);        /* 12px → 16px */
    --gap-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);        /* 20px → 20px */
    --gap-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);      /* 20px → 40px */
    --gap-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);    /* 20px → 60px */
    --gap-xxl: clamp(1.25rem, calc(11.36vw + -1.59rem), 7.5rem);  /* 20px → 120px */
    --gap-xxxl: clamp(2.5rem, calc(18.18vw + -3.18rem), 12.5rem); /* 40px → 200px */

    /* Spacing Variabelen (voor margin en padding) */
    --space-0: 0;
    --space-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);    /* 4px → 8px */
    --space-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem);     /* 8px → 12px */
    --space-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);        /* 12px → 16px */
    --space-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);        /* 20px → 20px */
    --space-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);      /* 20px → 40px */
    --space-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);    /* 20px → 60px */
    --space-xxl: clamp(1.25rem, calc(11.36vw + -1.59rem), 7.5rem);  /* 20px → 120px */
    --space-xxxl: clamp(2.5rem, calc(18.18vw + -3.18rem), 12.5rem); /* 40px → 200px */

    /* Border Radius Variabelen */
    --radius-0: 0;
    --radius-s: 0.25rem;   /* 4px */
    --radius-m: 0.5rem;    /* 8px */
    --radius-l: 0.75rem;   /* 12px */
    --radius-xl: 1rem;     /* 16px */
    --radius-xxl: 1.5rem;  /* 24px */
    --radius-full: 9999px; /* Volledig rond */

    /* Typography Variabelen - Fluid Text Sizes */
    --text-xs: clamp(0.75rem, calc(0.68vw + 0.59rem), 0.875rem);    /* 12px → 14px */
    --text-s: clamp(0.875rem, calc(0.57vw + 0.73rem), 1rem);        /* 14px → 16px */
    --text-m: clamp(1rem, calc(0.57vw + 0.86rem), 1.125rem);        /* 16px → 18px (body) */
    --text-l: clamp(1.125rem, calc(1.14vw + 0.86rem), 1.5rem);      /* 18px → 24px */
    --text-xl: clamp(1.5rem, calc(2.27vw + 0.93rem), 2rem);         /* 24px → 32px */
    --text-xxl: clamp(2rem, calc(2.27vw + 1.43rem), 2.5rem);        /* 32px → 40px */

    /* Heading Variabelen - Fluid Heading Sizes */
    --h4: clamp(1.25rem, calc(2.5vw + 0.625rem), 1.8rem);           /* 20px → 28.8px */
    --h3: clamp(1.5rem, calc(4.09vw + 0.59rem), 2.4rem);            /* 24px → 38.4px */
    --h2: clamp(1.875rem, calc(2.39vw + 1.32rem), 2.4rem);          /* 30px → 38.4px */
    --h1: clamp(2.5rem, calc(6.82vw + 0.91rem), 4rem);              /* 40px → 64px */
}

/* Typography - Apply to body for base size */
body {
    font-size: var(--text-m);
}


/* ========================================
   GAP UTILITIES
   ======================================== */

.gap-0 {
    gap: var(--gap-0);
}
.gap-0 .e-con-inner {
    gap: var(--gap-0);
}

.gap-xxs {
    gap: var(--gap-xxs);
}
.gap-xxs .e-con-inner {
    gap: var(--gap-xxs);
}

.gap-xs {
    gap: var(--gap-xs);
}
.gap-xs .e-con-inner {
    gap: var(--gap-xs);
}

.gap-s {
    gap: var(--gap-s);
}
.gap-s .e-con-inner {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}
.gap-m .e-con-inner {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}
.gap-l .e-con-inner {
    gap: var(--gap-l);
}

.gap-xl {
    gap: var(--gap-xl);
}
.gap-xl .e-con-inner {
    gap: var(--gap-xl);
}

.gap-xxl {
    gap: var(--gap-xxl);
}
.gap-xxl .e-con-inner {
    gap: var(--gap-xxl);
}

.gap-xxxl {
    gap: var(--gap-xxxl);
}
.gap-xxxl .e-con-inner {
    gap: var(--gap-xxxl);
}

/* ========================================
   MARGIN UTILITIES
   ======================================== */

/* Margin - All sides */
.m-0 { margin: var(--space-0); }
.m-xxs { margin: var(--space-xxs); }
.m-xs { margin: var(--space-xs); }
.m-s { margin: var(--space-s); }
.m-m { margin: var(--space-m); }
.m-l { margin: var(--space-l); }
.m-xl { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }
.m-xxxl { margin: var(--space-xxxl); }

/* Margin Top */
.mt-0 { margin-top: var(--space-0); }
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }
.mt-xxxl { margin-top: var(--space-xxxl); }

/* Margin Right */
.mr-0 { margin-right: var(--space-0); }
.mr-xxs { margin-right: var(--space-xxs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-s { margin-right: var(--space-s); }
.mr-m { margin-right: var(--space-m); }
.mr-l { margin-right: var(--space-l); }
.mr-xl { margin-right: var(--space-xl); }
.mr-xxl { margin-right: var(--space-xxl); }
.mr-xxxl { margin-right: var(--space-xxxl); }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }
.mb-xxxl { margin-bottom: var(--space-xxxl); }

/* Margin Left */
.ml-0 { margin-left: var(--space-0); }
.ml-xxs { margin-left: var(--space-xxs); }
.ml-xs { margin-left: var(--space-xs); }
.ml-s { margin-left: var(--space-s); }
.ml-m { margin-left: var(--space-m); }
.ml-l { margin-left: var(--space-l); }
.ml-xl { margin-left: var(--space-xl); }
.ml-xxl { margin-left: var(--space-xxl); }
.ml-xxxl { margin-left: var(--space-xxxl); }

/* Margin X-axis (left + right) */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.mx-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.mx-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
.mx-xxxl { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }

/* Margin Y-axis (top + bottom) */
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
.my-xxxl { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }

/* Margin Auto (voor centering) */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

/* ========================================
   NEGATIVE MARGINS
   ======================================== */

/* Negative Margin Top */
.-mt-xxs { margin-top: calc(var(--space-xxs) * -1); }
.-mt-xs { margin-top: calc(var(--space-xs) * -1); }
.-mt-s { margin-top: calc(var(--space-s) * -1); }
.-mt-m { margin-top: calc(var(--space-m) * -1); }
.-mt-l { margin-top: calc(var(--space-l) * -1); }
.-mt-xl { margin-top: calc(var(--space-xl) * -1); }
.-mt-xxl { margin-top: calc(var(--space-xxl) * -1); }
.-mt-xxxl { margin-top: calc(var(--space-xxxl) * -1); }

/* Negative Margin Right */
.-mr-xxs { margin-right: calc(var(--space-xxs) * -1); }
.-mr-xs { margin-right: calc(var(--space-xs) * -1); }
.-mr-s { margin-right: calc(var(--space-s) * -1); }
.-mr-m { margin-right: calc(var(--space-m) * -1); }
.-mr-l { margin-right: calc(var(--space-l) * -1); }
.-mr-xl { margin-right: calc(var(--space-xl) * -1); }
.-mr-xxl { margin-right: calc(var(--space-xxl) * -1); }
.-mr-xxxl { margin-right: calc(var(--space-xxxl) * -1); }

/* Negative Margin Bottom */
.-mb-xxs { margin-bottom: calc(var(--space-xxs) * -1); }
.-mb-xs { margin-bottom: calc(var(--space-xs) * -1); }
.-mb-s { margin-bottom: calc(var(--space-s) * -1); }
.-mb-m { margin-bottom: calc(var(--space-m) * -1); }
.-mb-l { margin-bottom: calc(var(--space-l) * -1); }
.-mb-xl { margin-bottom: calc(var(--space-xl) * -1); }
.-mb-xxl { margin-bottom: calc(var(--space-xxl) * -1); }
.-mb-xxxl { margin-bottom: calc(var(--space-xxxl) * -1); }

/* Negative Margin Left */
.-ml-xxs { margin-left: calc(var(--space-xxs) * -1); }
.-ml-xs { margin-left: calc(var(--space-xs) * -1); }
.-ml-s { margin-left: calc(var(--space-s) * -1); }
.-ml-m { margin-left: calc(var(--space-m) * -1); }
.-ml-l { margin-left: calc(var(--space-l) * -1); }
.-ml-xl { margin-left: calc(var(--space-xl) * -1); }
.-ml-xxl { margin-left: calc(var(--space-xxl) * -1); }
.-ml-xxxl { margin-left: calc(var(--space-xxxl) * -1); }

/* ========================================
   PADDING UTILITIES
   ======================================== */

/* Padding - All sides */
.p-0 { padding: var(--space-0); }
.p-xxs { padding: var(--space-xxs); }
.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }
.p-xxxl { padding: var(--space-xxxl); }

/* Padding Top */
.pt-0 { padding-top: var(--space-0); }
.pt-xxs { padding-top: var(--space-xxs); }
.pt-xs { padding-top: var(--space-xs); }
.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }
.pt-xl { padding-top: var(--space-xl); }
.pt-xxl { padding-top: var(--space-xxl); }
.pt-xxxl { padding-top: var(--space-xxxl); }

/* Padding Right */
.pr-0 { padding-right: var(--space-0); }
.pr-xxs { padding-right: var(--space-xxs); }
.pr-xs { padding-right: var(--space-xs); }
.pr-s { padding-right: var(--space-s); }
.pr-m { padding-right: var(--space-m); }
.pr-l { padding-right: var(--space-l); }
.pr-xl { padding-right: var(--space-xl); }
.pr-xxl { padding-right: var(--space-xxl); }
.pr-xxxl { padding-right: var(--space-xxxl); }

/* Padding Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-xxs { padding-bottom: var(--space-xxs); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-xxl { padding-bottom: var(--space-xxl); }
.pb-xxxl { padding-bottom: var(--space-xxxl); }

/* Padding Left */
.pl-0 { padding-left: var(--space-0); }
.pl-xxs { padding-left: var(--space-xxs); }
.pl-xs { padding-left: var(--space-xs); }
.pl-s { padding-left: var(--space-s); }
.pl-m { padding-left: var(--space-m); }
.pl-l { padding-left: var(--space-l); }
.pl-xl { padding-left: var(--space-xl); }
.pl-xxl { padding-left: var(--space-xxl); }
.pl-xxxl { padding-left: var(--space-xxxl); }

/* Padding X-axis (left + right) */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
.px-xxxl { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }

/* Padding Y-axis (top + bottom) */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
.py-xxxl { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }

/* ========================================
   BORDER RADIUS UTILITIES
   ======================================== */

/* Border Radius - All corners */
.rounded-0 { border-radius: var(--radius-0); }
.rounded-s { border-radius: var(--radius-s); }
.rounded-m { border-radius: var(--radius-m); }
.rounded-l { border-radius: var(--radius-l); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-xxl { border-radius: var(--radius-xxl); }
.rounded-full { border-radius: var(--radius-full); }

/* Border Radius - Top */
.rounded-t-0 { border-top-left-radius: var(--radius-0); border-top-right-radius: var(--radius-0); }
.rounded-t-s { border-top-left-radius: var(--radius-s); border-top-right-radius: var(--radius-s); }
.rounded-t-m { border-top-left-radius: var(--radius-m); border-top-right-radius: var(--radius-m); }
.rounded-t-l { border-top-left-radius: var(--radius-l); border-top-right-radius: var(--radius-l); }
.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rounded-t-xxl { border-top-left-radius: var(--radius-xxl); border-top-right-radius: var(--radius-xxl); }

/* Border Radius - Right */
.rounded-r-0 { border-top-right-radius: var(--radius-0); border-bottom-right-radius: var(--radius-0); }
.rounded-r-s { border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); }
.rounded-r-m { border-top-right-radius: var(--radius-m); border-bottom-right-radius: var(--radius-m); }
.rounded-r-l { border-top-right-radius: var(--radius-l); border-bottom-right-radius: var(--radius-l); }
.rounded-r-xl { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rounded-r-xxl { border-top-right-radius: var(--radius-xxl); border-bottom-right-radius: var(--radius-xxl); }

/* Border Radius - Bottom */
.rounded-b-0 { border-bottom-left-radius: var(--radius-0); border-bottom-right-radius: var(--radius-0); }
.rounded-b-s { border-bottom-left-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); }
.rounded-b-m { border-bottom-left-radius: var(--radius-m); border-bottom-right-radius: var(--radius-m); }
.rounded-b-l { border-bottom-left-radius: var(--radius-l); border-bottom-right-radius: var(--radius-l); }
.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rounded-b-xxl { border-bottom-left-radius: var(--radius-xxl); border-bottom-right-radius: var(--radius-xxl); }

/* Border Radius - Left */
.rounded-l-0 { border-top-left-radius: var(--radius-0); border-bottom-left-radius: var(--radius-0); }
.rounded-l-s { border-top-left-radius: var(--radius-s); border-bottom-left-radius: var(--radius-s); }
.rounded-l-m { border-top-left-radius: var(--radius-m); border-bottom-left-radius: var(--radius-m); }
.rounded-l-l { border-top-left-radius: var(--radius-l); border-bottom-left-radius: var(--radius-l); }
.rounded-l-xl { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.rounded-l-xxl { border-top-left-radius: var(--radius-xxl); border-bottom-left-radius: var(--radius-xxl); }

/* Border Radius - Specific corners */
.rounded-tl-0 { border-top-left-radius: var(--radius-0); }
.rounded-tl-s { border-top-left-radius: var(--radius-s); }
.rounded-tl-m { border-top-left-radius: var(--radius-m); }
.rounded-tl-l { border-top-left-radius: var(--radius-l); }
.rounded-tl-xl { border-top-left-radius: var(--radius-xl); }
.rounded-tl-xxl { border-top-left-radius: var(--radius-xxl); }

.rounded-tr-0 { border-top-right-radius: var(--radius-0); }
.rounded-tr-s { border-top-right-radius: var(--radius-s); }
.rounded-tr-m { border-top-right-radius: var(--radius-m); }
.rounded-tr-l { border-top-right-radius: var(--radius-l); }
.rounded-tr-xl { border-top-right-radius: var(--radius-xl); }
.rounded-tr-xxl { border-top-right-radius: var(--radius-xxl); }

.rounded-br-0 { border-bottom-right-radius: var(--radius-0); }
.rounded-br-s { border-bottom-right-radius: var(--radius-s); }
.rounded-br-m { border-bottom-right-radius: var(--radius-m); }
.rounded-br-l { border-bottom-right-radius: var(--radius-l); }
.rounded-br-xl { border-bottom-right-radius: var(--radius-xl); }
.rounded-br-xxl { border-bottom-right-radius: var(--radius-xxl); }

.rounded-bl-0 { border-bottom-left-radius: var(--radius-0); }
.rounded-bl-s { border-bottom-left-radius: var(--radius-s); }
.rounded-bl-m { border-bottom-left-radius: var(--radius-m); }
.rounded-bl-l { border-bottom-left-radius: var(--radius-l); }
.rounded-bl-xl { border-bottom-left-radius: var(--radius-xl); }
.rounded-bl-xxl { border-bottom-left-radius: var(--radius-xxl); }

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

/* Text Size Classes */
.text-xs {
    font-size: var(--text-xs);
}

.text-s {
    font-size: var(--text-s);
}

.text-m {
    font-size: var(--text-m);
}

.text-l {
    font-size: var(--text-l);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-xxl {
    font-size: var(--text-xxl);
}

/* Heading Classes - voor semantische styling */
.h1, .text-h1 {
    font-size: var(--h1);
    line-height: 1.2;
    font-weight: 700;
}

.h2, .text-h2 {
    font-size: var(--h2);
    line-height: 1.3;
    font-weight: 700;
}

.h3, .text-h3 {
    font-size: var(--h3);
    line-height: 1.4;
    font-weight: 600;
}

.h4, .text-h4 {
    font-size: var(--h4);
    line-height: 1.4;
    font-weight: 600;
}

/* Optional: Apply to actual HTML heading tags */
h1 {
    font-size: var(--h1);
    line-height: 1.2;
}

h2 {
    font-size: var(--h2);
    line-height: 1.3;
}

h3 {
    font-size: var(--h3);
    line-height: 1.4;
}

h4 {
    font-size: var(--h4);
    line-height: 1.4;
}