@use 'sass:map';
@use 'sass:math';

@use 'include-media' as *;

/*********************
SIZES
*********************/

// https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
@function rfs($min, $max) {
	$min_width: math.div(375, 16);
	$max_width: math.div(1280, 16);

	$slope: math.div($max - $min, $max_width - $min_width);
	$y: -$min_width * $slope + $min;

	$v: clamp(#{$min}rem, #{$y}rem + #{$slope * 100}vw, #{$max}rem);

	@return $v;
}

$spacer: 1.5rem;
$spacer-block: rfs(2, 2.5);
$spacer-section: rfs(3, 5);
$site-width: 60em; // Useful for fixed width sites, as well as for limiting the max-width of fluid sites

/*********************
BREAKPOINTS
*********************/
// Use pixels for include-media-export compatibility. 'zero' breakpoint ensures the breakpoints are printed on all screen widths.
$breakpoints: (
	zero: (1 * 16px),
	phone: (35 * 16px),
	portrait: (50.625 * 16px),
	landscape: (67.5 * 16px),
	desktop: (80 * 16px)
);

/*********************
COLORS
*********************/
$black: #000;
$white: #fff;
$text: $black;

// https://news.ycombinator.com/item?id=18422086
$palettes: (
	grey: (light: #eee,
		base: #ccc,
		dark: #aaa,
	)
);

@function palette($palette, $tone: 'base') {
	@return map.get(map.get($palettes, $palette), $tone);
}

// Usage: palette(grey, 'light');

/*********************
TYPOGRAPHY - https://systemfontstack.com/
Firefox finterprinting protection allow lists:
- https://searchfox.org/mozilla-central/source/gfx/thebes/StandardFonts-linux.inc
- https://searchfox.org/mozilla-central/source/gfx/thebes/StandardFonts-macos.inc
- https://searchfox.org/mozilla-central/source/gfx/thebes/StandardFonts-win10.inc
*********************/
$sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, arial, sans-serif;
$serif: Baskerville, Times New Roman, Times, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
$mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;