@mixin create-base-colors() { ... }

@mixin create-shades($input) { ... }

@mixin _generate-shades($key: null, $value) { ... }

%button { ... }

%icon { ... }

@mixin font-face($typeface, $font-file, $weight, $style, $update-preferences: (true, null), $font-display: swap, $url: '/fonts/') { ... }

@mixin _update-font-families-map($typeface, $update-preferences) { ... }

@mixin _set-font-families-map-key($key, $value) { ... }

@function round-to($number, $digits) { ... }

@function safe-map-merge($source-map, $target-map) { ... }

@mixin create-prop-from-map($map, $prefix: null, $divider: null) { ... }

$new-colors: (
	'red': salmon,
	'dark': indigo,
	'light': ghostwhite,
);

$new-breakpoints: (
	'large': 1200px,
	'largest': 87.5em,
);

$new-utopia-config: (
	'minFontSize': 18,
	'maxFontSize': 22,
	'minTypeScale': map.get($type-scales, 'minor-third'),
	'prefix': fs-,
);

$breakpoints: (
	'small': 30em,	/* 480px */
	'medium': 45em, /* 720px */
	'large': 65em,  /* 1040px */
);

$type-scales: (
	'minor-second': 1.067,
	'major-second': 1.125,
	'minor-third': 1.2,
	'major-third': 1.25,
	'perfect-fourth': 1.333,
	'augmented-fourth': 1.414,
	'perfect-fifth': 1.5,
	'golden-ratio': 1.618,
);

$system-ui: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
	'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

$font-weights: (
	'100': 100,
	'200': 200,
	'300': 300,
	'400': 400,
	'500': 500,
	'600': 600,
	'700': 700,
	'800': 800,
	'900': 900,
);

$font-weight-aliases: (
	'fw-slim': map.get($font-weights, '300'),
	'fw-normal': map.get($font-weights, '500'),
	'fw-thick': map.get($font-weights, '700'),
);

$font-families: (
	'sans': sans-serif,
	'serif': serif,
);

$sizes: (
	'1': 0.0625em,
	'2': 0.125em,
	'3': 0.25em,
	'4': 0.5em,
	'5': 0.75em,
	'6': 1em,
	'7': 1.25em,
	'8': 1.5em,
	'9': 1.75em,
	'10': 2em,
	'11': 2.5em,
	'12': 3em,
	'13': 4em,
	'14': 5em,
	'15': 6em,
	'16': 8em,
	'17': 10em,
	'18': 12em,
	'19': 14em,
);

$widths: (
	'min-width': 300px,
	'content-width': 1400px,
	'sidebar-width': 300px,
	'par-min-width': 25ch,
	'par-max-width': 65ch,
);

$offsets: (
	'punctuation-offset': -0.3em,
	'scroll-top-offset': 3ex,
);

$gray-scale: (
	'black-100': black,
	'white-100': #fff,
	'gray': gray,
);

$colors: (
	'green': green,
	'red': red,
	'blue': blue,
);

$shadows: (
	'small': 1px 2px 8px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'medium': 1px 4px 12px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'large': 1px 8px 20px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'drop-small': 1px 1px 2px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'drop-medium': 2px 2px 2px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'drop-large': 3px 3px 2px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'inset-small': inset 1px 1px 8px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'inset-medium': inset 1px 1px 12px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
	'inset-large': inset 2px 2px 16px var(--shadow-color, hsla(0, 0%, 0%, 0.25)),
);

@mixin mq($size) { ... }

@mixin create-shadow-color($value, $alpha: -75%, $recompute-shadow-key: null) { ... }

@mixin flex-center($dir: column, $gap: $size-6) { ... }

@mixin pseudo($element, $display: inline-block, $pos: null, $content: '') { ... }

@mixin icon-defaults() { ... }

%flex-center { ... }

$_utopia-min-width: 480;

$_utopia-max-width: 1600;

$_utopia-min-font-size: 16;

$_utopia-max-font-size: 20;

$_utopia-min-type-scale: map.get($type-scales, 'major-second');

$_utopia-max-type-scale: map.get($type-scales, 'perfect-fourth');

$_utopia-positive-steps: 5;

$_utopia-negative-steps: 1;

$_utopia-relative-to: viewport;

$_utopia-prefix: null !default;

$utopia-config: (
	'minWidth': $_utopia-min-width,
	'maxWidth': $_utopia-max-width,
	'minFontSize': $_utopia-min-font-size,
	'maxFontSize': $_utopia-max-font-size,
	'minTypeScale': $_utopia-min-type-scale,
	'maxTypeScale': $_utopia-max-type-scale,
	'positiveSteps': $_utopia-positive-steps,
	'negativeSteps': $_utopia-negative-steps,
	'relativeTo': $_utopia-relative-to,
	'prefix': $_utopia-prefix,
);

$clr-black: hsl(0deg 0% 0%);

$clr-black-1: hsl(0deg 0% 1%);

$clr-black-2: hsl(0deg 0% 2%);

$clr-black-3: hsl(0deg 0% 4%);

$clr-black-4: hsl(0deg 0% 6%);

$clr-white: hsl(0deg 0% 100%);

$clr-white-1: hsl(0deg 0% 99%);

$clr-white-2: hsl(0deg 0% 98%);

$clr-white-3: hsl(0deg 0% 96%);

$clr-white-4: hsl(0deg 0% 94%);

$clr-gray-10: hsl(0deg 0% 90%);

$clr-gray-20: hsl(0deg 0% 80%);

$clr-gray-30: hsl(0deg 0% 70%);

$clr-gray-40: hsl(0deg 0% 60%);

$clr-gray-50: hsl(0deg 0% 50%);

$clr-gray-60: hsl(0deg 0% 40%);

$clr-gray-70: hsl(0deg 0% 30%);

$clr-gray-80: hsl(0deg 0% 20%);

$clr-gray-90: hsl(0deg 0% 10%);

$clr-red: red;

$clr-green: green;

$clr-blue: blue;

$size-1: 0.0625em;

$size-2: 0.125em;

$size-3: 0.25em;

$size-4: 0.5em;

$size-5: 0.75em;

$size-6: 1em;

$size-7: 1.25em;

$size-8: 1.5em;

$size-9: 1.75em;

$size-10: 2em;

$size-11: 2.5em;

$size-12: 3em;

$size-13: 4em;

$size-14: 5em;

$size-15: 6em;

$size-16: 8em;

$size-17: 10em;

$size-18: 12em;

$size-19: 14em;

$default-min-width: 320px;

$default-sidebar-width: 300px;

$default-content-width: 1200px;

$default-par-min-width: 40ch;

$default-par-max-width: 80ch;

$punctuation-offset-systemUi: -0.4em;

$default-scroll-top-offset: 2ex;

$default-btn-border-width: 2px;

$btn-padding-no-border: 0.75em 1.25em;

$btn-padding-with-border: calc(
		0.75em - calc(var(--btn-border-width) - $default-btn-border-width)
	)
	calc(1.25em - calc(var(--btn-border-width) - $default-btn-border-width));

$section-dynamic-padding: 10vh;

$section-max-padding: $size-14;

$section-padding: min(
	var(--section-max-padding, $section-max-padding),
	var(--section-dynamic-padding, $section-dynamic-padding)
);

$cards-gap: clamp(var(--size-7), 5vw, var(--size-10));

$primary-light: map.get($colors, 'light');