/* The naming feels a little wrong here (1024px isn't really "small") but whatever. I still try to stick to this system, so these values are here for reference, from the old .scss system.

$xxs: 34rem;
$xs: 42rem;
$sm: 56rem;
$md: 66rem;
$lg: 82rem;
$xl: 92rem;
$xxl: 108rem;
$xxxl: 122rem;
$fourxl: 144rem; */

:root {
	--true-white: #ffffff;
	--true-black: #000000;

	--yellow-50: #ffffe7;
	--yellow-100: #ffffc1;
	--yellow-200: #fffb86;
	--yellow-300: #fff041;
	--yellow-400: #ffe00d;
	--yellow-500: #ffd100;
	--yellow-600: #d19900;
	--yellow-700: #a66d02;
	--yellow-800: #89550a;
	--yellow-900: #74450f;
	--yellow-950: #442404;
	--yellow: var(--yellow-500);

	--blue-50: #f1f8fa;
	--blue-100: #dcecf1;
	--blue-200: #bddae4;
	--blue-300: #8fc0d1;
	--blue-400: #599cb7;
	--blue-500: #3e809c;
	--blue-600: #34657f;
	--blue-700: #31576d;
	--blue-800: #2f495b;
	--blue-900: #2b404e;
	--blue-950: #182834;
	--blue-lightest: var(--blue-100);
	--blue-light: var(--blue-400);
	--blue-lighter: var(--blue-200);
	--blue-dark: var(--blue-600);
	--blue-darker: var(--blue-950);

	--neutral-50: #fcfcfc;
	--neutral-100: #ececec;
	--neutral-200: #dedede;
	--neutral-300: #d1d2d3;
	--neutral-400: #a7a8aa;
	--neutral-500: #8f9092;
	--neutral-600: #787a7d;
	--neutral-700: #5f6164;
	--neutral-800: #474a4d;
	--neutral-900: #2e3236;
	--neutral-950: #101820;
	--neutral-white: var(--neutral-50);
	--neutral-lightest: var(--neutral-100);
	--neutral-lighter: var(--neutral-300);
	--neutral-light: var(--neutral-400);
	--neutral-mid: var(--neutral-500);
	--neutral-dark: var(--neutral-700);
	--neutral-darker: var(--neutral-900);
	--neutral-black: var(--neutral-950);

	--orange-50: #fff6ed;
	--orange-100: #ffebd4;
	--orange-200: #ffd3a8;
	--orange-300: #ffb470;
	--orange-400: #ff8937;
	--orange-500: #ff6a13;
	--orange-600: #f04c06;
	--orange-700: #c73707;
	--orange-800: #9e2c0e;
	--orange-900: #7f270f;
	--orange-950: #451005;
	--orange: var(--orange-500);
	--red: var(--orange-700);

	--heading-font: 'Averta-Std', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--body-font: 'Alkes', Georgia, serif;
	--code-font: 'MonoLisa', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

	--body-font-weight: normal;
	--body-font-size: 1.125rem;
	--body-line-height: 1.55;

	@media (min-width: 42rem) {
		--body-font-size: 1.1875rem;
	}

	@media (min-width: 82rem) {
		--body-font-size: 1.25rem;
	}


	--blue-to-yellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008, #ffd100;
	--accent-gradient: linear-gradient(to right, var(--blue-to-yellow));

	@supports(background: linear-gradient(in oklab, white, black)) {
		--accent-gradient: linear-gradient(to right in oklab, var(--blue-light) 10%, var(--yellow) 90%);
	}

	--ink: var(--neutral-800);
	--paper: var(--neutral-white);
	--heading-color: var(--neutral-800);
	--accent-color: var(--blue-dark);
	--link-color: var(--blue-dark);
	--highlight-color: var(--neutral-dark);
	--code-background: #1d1e26;

	--max-width: 34rem;
	--sidebar-width: 15rem;
	--margin: var(--quarter-note);

	--sixteenth-note: calc(var(--quarter-note) / 4);
	--eighth-note: calc(var(--quarter-note) / 2);
	--quarter-note: 1.25rem;
	--dotted-quarter-note: calc(var(--quarter-note) * 1.5);
	--half-note: calc(var(--quarter-note) * 2);
	--dotted-half-note: calc(var(--quarter-note) * 3);
	--whole-note: calc(var(--quarter-note) * 4);
	--tied-whole-note: calc(var(--quarter-note) * 5);
	--dotted-whole-note: calc(var(--quarter-note) * 6);

	--button-size: 2.2rem;
	--button-background: var(--paper);

	@media (min-width: 42rem) {
		--margin: var(--half-note);
	}

	@media (min-width: 56rem) {
		--margin: var(--dotted-half-note);
	}

	@media (min-width: 108rem) {
		--margin: var(--whole-note);
	}

	@media (min-width: 122rem) {
		--margin: var(--dotted-whole-note);
	}

	&.dark {
		--paper: var(--neutral-black);
		--ink: var(--neutral-100);
		--heading-color: var(--neutral-white);
		--accent-color: var(--blue-light);
		--link-color: var(--blue-light);
		--neutral-lightest: var(--neutral-900);
		--neutral-lighter: var(--neutral-700);
		--highlight-color: var(--neutral-darker);
		--neutral-mid: var(--neutral-400);
	}

	/* Ensures media query only runs if a theme has not been set AND the user prefers dark color schemes */
	&:not(.light) {
		@media (prefers-color-scheme: dark) {
			--paper: var(--neutral-black);
			--ink: var(--neutral-100);
			--heading-color: var(--neutral-white);
			--accent-color: var(--blue-light);
			--link-color: var(--blue-light);
			--highlight-color: var(--neutral-darker);
		}
	}

	font-size: var(--body-font-size);
}