//----------------------------------------------------------------------------------------------------------------------
// PITCH FUNCTION
//----------------------------------------------------------------------------------------------------------------------

/// Changes the "pitch" of `$color` by mixing it with the base or canvas color, creating slightly tinted shades.
/// @param {Color} $color - The original color
/// @param {Number} $percent - Pitch change between `-100` and `100`
/// @return {Color}
/// @example scss Assuming `$color-base: rgb(30, 30, 35)` and `$color-canvas: rgb(255, 255, 255)`
///   pitch(#3caaf0, 50) // Mixes #3caaf0b with 50% $color-canvas
///   // #9ed5f8 (brighter)
///   pitch(#1e1e23, 90) // Mixes #1e1e23 with 90% $color-canvas
///   // #e9e9e9 (much brighter)
///   pitch(#ff0000, -55) // Mixes #ff0000 with 55% $color-base
///   // #56171a (darker)
@function pitch($color, $percent) {
	$percent: clamp($percent, -100, 100);
	$light-color: $color-canvas;
	$dark-color: $color-base;

	// Swap colors if base is brighter than canvas
	@if (lightness($color-base) > lightness($color-canvas)) {
		$light-color: $color-base;
		$dark-color: $color-canvas;
	}
	@if $percent > 0 {
		@return mix($light-color, $color, $percent * 1%);
	} @else {
		@return mix($dark-color, $color, abs($percent) * 1%);
	}
}