:root {
    /* Responsive Typography using Clamps */
    /* Base font size: 16px at 1000px wide, scales from 12px (300px) to 64px (7680px) */
    --text-xs: clamp(0.6rem, 0.5rem + 0.5vw, 6rem);
    --text-sm: clamp(0.7rem, 0.6rem + 0.7vw, 8rem);
    --text-base: clamp(0.8rem, 0.7rem + 0.9vw, 10rem);
    --text-lg: clamp(1rem, 0.8rem + 1.2vw, 12rem);
    --text-xl: clamp(1.2rem, 1rem + 1.5vw, 15rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 2vw, 20rem);
    --text-3xl: clamp(1.8rem, 1.5rem + 2.5vw, 25rem);
    --text-4xl: clamp(2.2rem, 1.8rem + 3vw, 30rem);
    --text-5xl: clamp(3rem, 2.5rem + 4vw, 40rem);

    /* Responsive Spacing */
    --space-1: clamp(0.2rem, 0.15rem + 0.4vw, 4rem);
    --space-2: clamp(0.4rem, 0.3rem + 0.8vw, 8rem);
    --space-3: clamp(0.6rem, 0.45rem + 1.2vw, 12rem);
    --space-4: clamp(0.8rem, 0.6rem + 1.6vw, 16rem);
    --space-6: clamp(1.2rem, 0.9rem + 2.4vw, 24rem);
    --space-8: clamp(1.6rem, 1.2rem + 3.2vw, 32rem);
    --space-10: clamp(2rem, 1.5rem + 4vw, 40rem);
    --space-12: clamp(2.4rem, 1.8rem + 4.8vw, 48rem);
    --space-16: clamp(3.2rem, 2.4rem + 6.4vw, 64rem);
    --space-20: clamp(4rem, 3rem + 8vw, 80rem);
    --space-24: clamp(4.8rem, 3.6rem + 9.6vw, 96rem);
    --space-32: clamp(6.4rem, 4.8rem + 12.8vw, 128rem);
    --space-40: clamp(8rem, 6rem + 16vw, 160rem);
    --space-48: clamp(9.6rem, 7.2rem + 19.2vw, 192rem);
    --space-56: clamp(11.2rem, 8.4rem + 22.4vw, 224rem);
    --space-64: clamp(12.8rem, 9.6rem + 25.6vw, 256rem);
    --space-72: clamp(14.4rem, 10.8rem + 28.8vw, 288rem);
    --space-80: clamp(16rem, 12rem + 32vw, 320rem);
    --space-96: clamp(19.2rem, 14.4rem + 38.4vw, 384rem);

    /* Responsive Container Width */
    --container-max: 95%;

    /* Responsive Icon Size */
    --icon-size-base: clamp(1.25rem, 0.8rem + 2.25vw, 8rem);
    --icon-size-lg: clamp(1.5rem, 1rem + 2.5vw, 10rem);

    /* Responsive Nav Height */
    --nav-height: clamp(3.5rem, 3rem + 5vw, 30rem);
}

@media (min-width: 1920px) {
    :root {
        --container-max: 1800px;
    }
}

@media (min-width: 3840px) {
    :root {
        --container-max: 3600px;
    }
}

@media (min-width: 7680px) {
    :root {
        --container-max: 7200px;
    }
}

body {
    font-size: var(--text-base);
}

.responsive-container {
    width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Utilities for responsive text */
.text-clamp-xs { font-size: var(--text-xs); }
.text-clamp-sm { font-size: var(--text-sm); }
.text-clamp-base { font-size: var(--text-base); }
.text-clamp-lg { font-size: var(--text-lg); }
.text-clamp-xl { font-size: var(--text-xl); }
.text-clamp-2xl { font-size: var(--text-2xl); }
.text-clamp-3xl { font-size: var(--text-3xl); }
.text-clamp-4xl { font-size: var(--text-4xl); }
.text-clamp-5xl { font-size: var(--text-5xl); }

/* Utilities for responsive spacing */
.p-clamp-1 { padding: var(--space-1); }
.p-clamp-2 { padding: var(--space-2); }
.p-clamp-3 { padding: var(--space-3); }
.p-clamp-4 { padding: var(--space-4); }
.p-clamp-6 { padding: var(--space-6); }
.p-clamp-8 { padding: var(--space-8); }
.p-clamp-10 { padding: var(--space-10); }

.px-clamp-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-clamp-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-clamp-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-clamp-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-clamp-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-clamp-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-clamp-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-clamp-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-clamp-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.pt-clamp-1 { padding-top: var(--space-1); }
.pt-clamp-2 { padding-top: var(--space-2); }
.pt-clamp-3 { padding-top: var(--space-3); }
.pt-clamp-4 { padding-top: var(--space-4); }
.pt-clamp-6 { padding-top: var(--space-6); }

.pb-clamp-1 { padding-bottom: var(--space-1); }
.pb-clamp-2 { padding-bottom: var(--space-2); }
.pb-clamp-3 { padding-bottom: var(--space-3); }
.pb-clamp-4 { padding-bottom: var(--space-4); }
.pb-clamp-6 { padding-bottom: var(--space-6); }

.m-clamp-1 { margin: var(--space-1); }
.m-clamp-2 { margin: var(--space-2); }
.m-clamp-3 { margin: var(--space-3); }
.m-clamp-4 { margin: var(--space-4); }
.m-clamp-6 { margin: var(--space-6); }
.m-clamp-8 { margin: var(--space-8); }

.mx-clamp-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-clamp-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-clamp-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-clamp-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-clamp-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-clamp-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-clamp-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-clamp-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.w-clamp-4 { width: var(--space-4); }
.w-clamp-6 { width: var(--space-6); }
.w-clamp-8 { width: var(--space-8); }
.w-clamp-10 { width: var(--space-10); }
.w-clamp-12 { width: var(--space-12); }
.w-clamp-16 { width: var(--space-16); }
.w-clamp-20 { width: var(--space-20); }
.w-clamp-24 { width: var(--space-24); }
.w-clamp-32 { width: var(--space-32); }
.w-clamp-48 { width: var(--space-48); }
.w-clamp-64 { width: var(--space-64); }
.w-clamp-72 { width: var(--space-72); }
.w-clamp-80 { width: var(--space-80); }
.w-clamp-96 { width: var(--space-96); }

.h-clamp-4 { height: var(--space-4); }
.h-clamp-6 { height: var(--space-6); }
.h-clamp-8 { height: var(--space-8); }
.h-clamp-10 { height: var(--space-10); }
.h-clamp-12 { height: var(--space-12); }
.h-clamp-16 { height: var(--space-16); }
.h-clamp-20 { height: var(--space-20); }
.h-clamp-24 { height: var(--space-24); }
.h-clamp-32 { height: var(--space-32); }

.size-clamp-4 { width: var(--space-4); height: var(--space-4); }
.size-clamp-6 { width: var(--space-6); height: var(--space-6); }
.size-clamp-8 { width: var(--space-8); height: var(--space-8); }
.size-clamp-10 { width: var(--space-10); height: var(--space-10); }
.size-clamp-12 { width: var(--space-12); height: var(--space-12); }
.size-clamp-16 { width: var(--space-16); height: var(--space-16); }
.size-clamp-20 { width: var(--space-20); height: var(--space-20); }
.size-clamp-24 { width: var(--space-24); height: var(--space-24); }
.size-clamp-32 { width: var(--space-32); height: var(--space-32); }

.gap-clamp-1 { gap: var(--space-1); }
.gap-clamp-2 { gap: var(--space-2); }
.gap-clamp-3 { gap: var(--space-3); }
.gap-clamp-4 { gap: var(--space-4); }
.gap-clamp-6 { gap: var(--space-6); }
.gap-clamp-8 { gap: var(--space-8); }
.gap-clamp-10 { gap: var(--space-10); }
.gap-clamp-12 { gap: var(--space-12); }
.gap-clamp-16 { gap: var(--space-16); }
