/**
 * Fluid Scale
 *
 * Define the minimum and maximum base size and ratio,
 * then let the browser handle the transition. As the
 * viewport grows, every token scales smoothly in between.
 */

@property --100vw {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

:root {
	--base-min: 13;
	--base-max: 16;
	--ratio-min: 1.333;
	--ratio-max: 1.5;

	/* Viewport sizes: */
	--vw-min: 360;
	--vw-max: 1440;

	/* Unitless viewport width: */
	--100vw: 100vw;
	--w: calc(tan(atan2(var(--100vw), 1px)));

	/* Interpolation: */
	--progress: clamp(
		0, (var(--w) - var(--vw-min)) / (var(--vw-max) - var(--vw-min)), 1
	);
	--base: calc(
		(var(--base-min) + (var(--base-max) - var(--base-min)) * var(--progress)) * 1px
	);
	--ratio: calc(
		var(--ratio-min) + (var(--ratio-max) - var(--ratio-min)) * var(--progress)
	);

	--steps: 3;
	--step: calc(1 / var(--steps));

	--label: calc(var(--base) * pow(var(--ratio), -1 * var(--step)));
	--body-1: var(--base);
	--body-2: calc(var(--base) * pow(var(--ratio), 1 * var(--step)));
	--accent-1: calc(var(--base) * pow(var(--ratio), 2 * var(--step)));
	--accent-2: calc(var(--base) * pow(var(--ratio), 3 * var(--step)));
	--heading-1: calc(var(--base) * pow(var(--ratio), 4 * var(--step)));
	--heading-2: calc(var(--base) * pow(var(--ratio), 5 * var(--step)));
	--heading-3: calc(var(--base) * pow(var(--ratio), 6 * var(--step)));
	--heading-4: calc(var(--base) * pow(var(--ratio), 7 * var(--step)));
	--heading-5: calc(var(--base) * pow(var(--ratio), 8 * var(--step)));
	--heading-6: calc(var(--base) * pow(var(--ratio), 9 * var(--step)));
	--heading-7: calc(var(--base) * pow(var(--ratio), 10 * var(--step)));
	--heading-8: calc(var(--base) * pow(var(--ratio), 11 * var(--step)));
	--heading-9: calc(var(--base) * pow(var(--ratio), 12 * var(--step)));
}