:root {
  --timing-spring: linear(
    0,
    0.002 0.4%,
    0.01 0.8%,
    0.021 1.2%,
    0.041 1.7%,
    0.062 2.1%,
    0.092 2.6%,
    0.127 3.1%,
    0.166 3.6%,
    0.237 4.4%,
    0.334 5.4%,
    0.685 8.7%,
    0.826 10.1%,
    0.892 10.8%,
    0.953 11.5%,
    1.009 12.2%,
    1.06 12.9%,
    1.106 13.6%,
    1.14 14.2%,
    1.171 14.8%,
    1.201 15.5%,
    1.222 16.1%,
    1.242 16.8%,
    1.257 17.5%,
    1.266 18.2%,
    1.272 19.1%,
    1.27 20%,
    1.262 20.9%,
    1.247 21.9%,
    1.227 22.9%,
    1.201 24%,
    1.168 25.2%,
    1.059 29%,
    1.025 30.3%,
    0.996 31.6%,
    0.969 33.1%,
    0.949 34.5%,
    0.936 35.9%,
    0.928 37.4%,
    0.926 39.2%,
    0.933 41.2%,
    0.945 43.3%,
    0.984 48.3%,
    1 50.8%,
    1.013 53.5%,
    1.019 56.3%,
    1.02 58.3%,
    1.018 60.5%,
    1 70%,
    0.995 75.2%,
    0.995 79.9%,
    1.001 92.2%,
    1
  );

  /* https://utopia.fyi/space/calculator/?c=360,16,1.2,1516,32,1.25,5,2,&s=0.75|0.5|0.38|0.25,1.5|2|3|4,s-l&g=s,l,xl,12 */
  --spacing-50: clamp(2px, 1.3772px + 0.173vw, 4px);
  --spacing-100: clamp(4px, 2.7543px + 0.346vw, 8px);
  --spacing-200: clamp(6px, 4.1315px + 0.519vw, 12px);
  --spacing-300: clamp(8px, 5.5087px + 0.692vw, 16px);
  --spacing-400: clamp(12px, 8.263px + 1.0381vw, 24px);
  --spacing-500: clamp(16px, 11.0173px + 1.3841vw, 32px);
  --spacing-600: clamp(24px, 16.526px + 2.0761vw, 48px);
  --spacing-700: clamp(32px, 22.0346px + 2.7682vw, 64px);
  --spacing-800: clamp(48px, 33.0519px + 4.1522vw, 96px);
  --spacing-900: clamp(64px, 44.0692px + 5.5363vw, 128px);




}

/* --new-mobile */
@media (max-width: 767px) {
  :root {
    --font-size-heading-3: 20px;
    --height-input-xl: 52px;
    --height-input-lg: 44px;
    --height-input-md: 36px;
    --height-input-sm: 30px;
    --height-input-xs: 24px;
    --font-size-2xl: 32px;
    --font-size-xl: 26px;
    --font-size-lg: 20px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 11px;
  }
}

/* --new-tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --font-size-heading-3: 22px;
    --height-input-xl: 56px;
    --height-input-lg: 52px;
    --height-input-md: 42px;
    --height-input-sm: 30px;
    --height-input-xs: 24px;
    --font-size-2xl: 36px;
    --font-size-xl: 28px;
    --font-size-lg: 22px;
    --font-size-md: 17px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
  }
}

/* --new-desktop-sm */
@media (min-width: 1200px) and (max-width: 1515px) {
  :root {
    --font-size-heading-3: 24px;
    --height-input-xl: 58px;
    --height-input-lg: 50px;
    --height-input-md: 44px;
    --height-input-sm: 32px;
    --height-input-xs: 25px;
    --font-size-2xl: 40px;
    --font-size-xl: 30px;
    --font-size-lg: 22px;
    --font-size-md: 18px;
    --font-size-sm: 15px;
    --font-size-xs: 12px;
  }
}

/* --new-desktop-lg */
@media (min-width: 1516px) {
  :root {
    --font-size-heading-3: 26px;
    --height-input-xl: 64px;
    --height-input-lg: 56px;
    --height-input-md: 46px;
    --height-input-sm: 34px;
    --height-input-xs: 26px;
    --font-size-2xl: 44px;
    --font-size-xl: 32px;
    --font-size-lg: 24px;
    --font-size-md: 18px;
    --font-size-sm: 15px;
    --font-size-xs: 12px;

  }
}

/* --all-sizes */
@media (min-width: 0) {
  :root {
    --productlist-gap: var(--spacing-300); 
  }
}


/* Temporary media queries based on our old media queries */

/* --desktop */
@media (min-width: 1516px) {
  :root {
    --container-padding: 0;
    --font-size-box-productgroup: 1rem;
    --font-size-label-md: 0.92rem;
    --font-size-label-sm: 0.82rem;
  }
}

/* --tablet-lg */
@media (min-width: 1280px) and (max-width: 1515px) {
  :root {
    --container-padding: 40px;
    --font-size-box-productgroup: 0.95rem;
    --font-size-label-md: 0.88rem;
    --font-size-label-sm: 0.78rem;
  }
}

/* --tablet-sm */
@media (min-width: 961px) and (max-width: 1279px) {
  :root {
    --container-padding: 30px;
    --font-size-box-productgroup: 0.9rem;
    --font-size-label-md: 0.84rem;
    --font-size-label-sm: 0.74rem;
  }
}

/* --tablet-xs */
@media (min-width: 961px) and (max-width: 1120px) {
  :root {
    --font-size-label-md: 0.8rem;
    --font-size-label-sm: 0.7rem;
  }
}

/* --mobile */
@media (max-width: 961px) {
  :root {
    --container-padding: 15px;
    --font-size-box-productgroup: 0.85rem;
    --font-size-label-md: 0.78rem;
    --font-size-label-sm: 0.68rem;
    
  }
}

/* --mobile-md */
@media (max-width: 767px) {
  :root {
    --font-size-label-md: 0.74rem;
    --font-size-label-sm: 0.64rem;
  }
}

/* --mobile-sm */
@media (max-width: 399px) {
  :root {
    --font-size-box-productgroup: 0.8rem;
    --font-size-label-md: 0.7rem;
    --font-size-label-sm: 0.6rem;
  }
}