1:root {
2  --font-width-min: 320;
3  --font-width-max: 1500;
4  --font-size-min: 17;
5  --font-size-max: 20;
6  --font-ratio-min: 1.2;
7  --font-ratio-max: 1.33;
8}
9/* equal to something like clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem); */
10:where(h1,h2,h3,h4,h5,h6) {
11  --fluid-min: calc(
12    var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
13  );
14  --fluid-max: calc(
15    var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
16  );
17  --fluid-preferred: calc(
18    (var(--fluid-max) - var(--fluid-min)) /
19      (var(--font-width-max) - var(--font-width-min))
20  );
21  --fluid-type: clamp(
22    (var(--fluid-min) / 16) * 1rem,
23    ((var(--fluid-min) / 16) * 1rem) -
24      (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
25      (var(--fluid-preferred) * var(--variable-unit, 100vi)),
26    (var(--fluid-max) / 16) * 1rem
27  );
28  font-size: var(--fluid-type);
29}