Fluid Scale Mixin

// 1. Setup your Config
$min-vw: 400px;
$max-vw: 1200px;
$mobile-ratio: 1.125; // Narrower for mobile
$desktop-ratio: 1.333; // Bolder for desktop

// 2. Helper to strip units (needed for the math)
@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

// 3. The Fluid Mixin
@mixin fluid-scale($level) {
  $min-size: ms($level, $mobile-ratio);  // Smallest size
  $max-size: ms($level, $desktop-ratio); // Largest size
  
  // Calculate the fluid slope
  $slope: (strip-unit($max-size) - strip-unit($min-size)) / (strip-unit($max-vw) - strip-unit($min-vw));
  $y-axis-intersection: -strip-unit($min-vw) * $slope + strip-unit($min-size);

  font-size: clamp(
    #{$min-size},
    #{$y-axis-intersection}rem + #{$slope * 100}vw,
    #{$max-size}
  );
}

h1 { @include fluid-scale(4); } // Huge on desktop, readable on mobile
h2 { @include fluid-scale(3); }
p  { @include fluid-scale(0); }