@charset 'utf-8';

:root {

	--default-light: black;
	--default-dark: white;
	--link-light: blue;
	--link-dark: #77dcff;

	/*

	==== start, TYPOGRAPHY ====

	*/
	/* Note from the relevant GitHub SCSS file: "SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome" */
	--sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--monospaced: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	/* --social-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; */
	/* --emojis: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
	/* --font-thin: 100; */
	--font-extralight: 200;
	--font-light: 300;
	--font-semilight: 350;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	/* --font-extrabold: 800; */
	/* --font-black: 900; */
	--font-weight-sm: var(--font-normal);
	/* ^^^ for .pokey, .legal, footnotes, etc. if using font-light for `html` and `body` */
	--font-article: var(--font-normal);
	--pub-date-weight: var(--font-medium);

	/* like Tailwind **SIZES** but not the concomitant `line-height, which is in comments */
	--text-xs: 0.75rem; /* LH 1rem */
	--text-sm: 0.875rem; /* LH 1.25rem */
	--text-base: 1rem; /* LH 1.5rem */
	--text-lg: 1.125rem; /* LH 1.75rem */
	--text-xl: 1.25rem; /* LH 1.75 rem (also) */
	--text-2xl: 1.5rem; /* LH 2 rem */
	--text-3xl: 1.875rem; /* LH 2.25rem */
	--text-4xl: 2.25rem; /* LH 2.5rem */
	--text-5xl: 3rem; /* LH 1 */
	/* --text-6xl: 3.75rem; */ /* LH 1 (also) */
	/* --text-7xl: 4.5rem; */ /* LH 1 (also) */
	/* --text-8xl: 6rem; */ /* LH 1 (also) */
	/* --text-9xl: 8rem; */ /* LH 1 (also) */

	/* underlines for hrefs */
	--textDcThick: 0.05rem; /* always rem */
	--textDcThickMd: 0.0625rem; /* always rem */
	--textDcThickHA: 0.075rem; /* always rem -- for `header-anchor` */
	--textUnOffst: 0.275em; /* always em -- min-width: 768px */
	--textUnOffstMd: 0.275em; /* always em -- min-width: 768px */
	/* ^^^ 0.225em is OK with Libre Franklin,
	     but Segoe UI needs at least 0.25em */

	/*

	==== end, TYPOGRAPHY ====

	*/


	/*
	Vars for breakpoints --- mostly based on TWCSS and my SCSS originals,
	but useless for now as CSS variables; see:
	- https://bholmes.dev/blog/alternative-to-css-variable-media-queries/ (last updated 2021-05-12)
	- https://drafts.csswg.org/css-env-1/ (2021-08-30)
	*/
	/* --bkpt_sm: 640px; */
	/* --bkpt_md: 768px; */
	/* --bkpt_ml: 960px; */ /* additional */
	/* --bkpt_lg: 1024px; */
	/* --bkpt_xl: 1280px; */
	/* --bkpt_2xl: 1536px; */
	/* --bkpt_3xl: 1920px; */ /* additional */
	/* end, vars for breakpoints */


	/* button */
	--btn-radius: 6px;
	--btn-width: 12rem;
	--btn-height: 2.25rem;
	--interactionPadding: 0.75em;
	--btn-svg-width: 1.25em; /* height will be auto */
	--btn-legend-text: var(--text-sm);
	--btn-legend-weight: var(--font-semibold);

	@media screen and (min-width: 768px) {
		--font-article: var(--font-semilight);
	}

	--sans-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Adwaita Sans', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--default-light: black;
	--default-dark: white;
	--link-light: blue;
	--link-dark: cyan;
}

html, body {
	font-family: var(--sans-serif);
	color: var(--default-light);
	background-color: var(--default-dark);
	@media (prefers-color-scheme: dark) {
		color: var(--default-dark);
		background-color: var(--default-light);
	}
}

a {
	color: var(--link-light);
	@media (prefers-color-scheme: dark) {
		color: var(--link-dark);
	}
}