/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Step -2: 11.11px → 11.52px */
  --step--2: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);

  /* Step -1: 13.33px → 14.40px */
  --step--1: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);

  /* Step 0: 16.00px → 18.00px */
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);

  /* Step 1: 19.20px → 22.50px */
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);

  /* Step 2: 23.04px → 28.13px */
  --step-2: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);

  /* Step 3: 27.65px → 35.16px */
  --step-3: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);

  /* Step 4: 33.18px → 43.95px */
  --step-4: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);

  /* Step 5: 39.81px → 54.93px */
  --step-5: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
  /* Space 3xs: 4px → 5px */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);

  /* Space 2xs: 8px → 9px */
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);

  /* Space xs: 12px → 14px */
  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);

  /* Space s: 16px → 18px */
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);

  /* Space m: 24px → 27px */
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);

  /* Space l: 32px → 36px */
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);

  /* Space xl: 48px → 54px */
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);

  /* Space 2xl: 64px → 72px */
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);

  /* Space 3xl: 96px → 108px */
  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 4px → 9px */
  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);

  /* Space 2xs-xs: 8px → 14px */
  --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);

  /* Space xs-s: 12px → 18px */
  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);

  /* Space s-m: 16px → 27px */
  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);

  /* Space m-l: 24px → 36px */
  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);

  /* Space l-xl: 32px → 54px */
  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);

  /* Space xl-2xl: 48px → 72px */
  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);

  /* Space 2xl-3xl: 64px → 108px */
  --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
}
