:root {
    /* fonts (@LK) zastosowałem wszędzie przedrostek r (od responsive) gdzie wielkosci sie zmieniają desktop/mobile */
    --main-font: "futura-pt";
    --head-font: "ivypresto-headline";

    /* fonts (@LK) */ 
    --text-r-16: clamp(0.875rem, 0.233vw + 0.82rem, 1rem);  /* 14-16px */
    --text-14: 0.875rem; /*14px

    /* headings (@LK) */
    --text-r-h2: clamp(1.5rem, 0.93vw + 1.279rem, 2rem); /* 24-32px */
    --text-h3: 1.375rem; /*22px

    /* size (@LK) */
    --size-r-64: clamp(2rem, 3.721vw + 1.116rem, 4rem); 
    --size-r-32: clamp(1rem, 1.721vw + 0.116rem, 2rem);
    --size-32: 2rem; 

    /* contextual-gap (@LK) */
    --content-r-16: clamp(0.5rem, 0.289rem + 0.889vw, 1rem); /* 8-16px */
    --content-16: 1rem;
    --content-8: 0.5rem;


    /* sections */
    --section-padding: 2rem;
    --container-gap: clamp(2rem, 3.721vw + 1.116rem, 4rem);


    /* grid (@LK) */
    --grid-auto: repeat(auto-fit, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));


    /* product page */

    --size-r-60-0:  clamp(0rem, -1.583rem + 6.667vw, 3.75rem);
    --size-r-30-24: clamp(1.5rem, 1.342rem + 0.667vw, 1.875rem);
    --size-r-64-36: clamp(2.25rem, 1.511rem + 3.111vw, 4rem);
    --size-r-24-16: clamp(1rem, 0.789rem + 0.889vw, 1.5rem);
    --size-r-24-32: clamp(2rem, 2.211rem + -0.889vw, 1.5rem);
    --size-r-96-64: clamp(4rem, 3.156rem + 3.556vw, 6rem);
    --size-r-64-16: clamp(1rem, -0.267rem + 5.333vw, 4rem);

    --text-r-36-24: clamp(1.5rem, 1.183rem + 1.333vw, 2.25rem);
    --text-r-38-32: clamp(2rem, 1.842rem + 0.667vw, 2.375rem);

    /* cart */
    --size-r-32-0: clamp(0rem, 3.556vw - 0.844rem, 2rem);


}