/* ================================================================
   TOKENS
   ================================================================
   Every appearance value the site uses. Replacing this file is what
   a redesign does; the markup, the layout and the accessibility
   guarantees stay.

   The CONTRAST lines below are read and computed by the build check,
   so the colors and the bar they must clear live in one file. Add a
   pair when a new foreground/background combination appears.

	CONTRAST: --text on --bg AA
	CONTRAST: --text on --surface AA
	CONTRAST: --text-muted on --bg AA
	CONTRAST: --text-muted on --surface AA
	CONTRAST: --text on --grid-line AA
	CONTRAST: --text on --grid-line-major AA
	CONTRAST: --text-muted on --grid-line AA
	CONTRAST: --text-muted on --grid-line-major AA
	CONTRAST: --accent on --bg AA
	CONTRAST: --accent on --surface AA
	CONTRAST: --on-accent on --accent AA
	CONTRAST: --notice-text on --notice-bg AA
	CONTRAST: --focus-ring on --bg AA-LARGE
	CONTRAST: --border on --bg AA-NONTEXT
	CONTRAST: --text-muted on --hold-track AA
	CONTRAST: --accent on --hold-track AA-NONTEXT
	CONTRAST: --on-support on --support AA
	CONTRAST: --accent on --notice-bg AA
	CONTRAST: --text on --code-bg AA
	CONTRAST: --code-comment on --code-bg AA
	CONTRAST: --code-keyword on --code-bg AA
	CONTRAST: --code-string on --code-bg AA
	CONTRAST: --code-number on --code-bg AA
	CONTRAST: --code-preproc on --code-bg AA
   ================================================================ */

:root {
	color-scheme: light dark;

	/* ---- type ---- */
	--font-body: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

	--size-step--1: 0.875rem;
	--size-step-0: 1rem;
	--size-step-1: 1.25rem;
	--size-step-2: 1.625rem;
	--size-step-3: 2.125rem;

	--leading-tight: 1.25;
	--leading-body: 1.6;

	/* ---- space ---- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2rem;
	--space-xl: 3rem;

	/* ---- shape ---- */
	--radius: 6px;
	--border-width: 1px;
	--focus-width: 3px;
	--focus-offset: 2px;
	--hold-bar: 3px;
	--tail-size: 0.5rem;
	--pill: 999px;

	/* ---- measure ---- */
	--measure: 68ch;
	--page-max: 56rem;
	--page-gutter: 1rem;

	/* ---- ground ---- */
	/* the grid behind every page. --grid-major is a whole multiple of
	   --grid-cell, which is what lets the two grids share their lines
	   instead of beating against each other */
	--grid-cell: 24px;
	--grid-major: 120px;
	--grid-line-width: 1px;

	/* ---- color: light ---- */
	--bg: #ffffff;
	--surface: #f4f4f2;
	/* the grid's two line weights. Opaque rather than an alpha over --bg,
	   because the grid is only ever drawn on --bg and an opaque ground is
	   one the CONTRAST lines above can check. Held far below --border: the
	   lines carry no meaning, so they are decoration a reader looks past,
	   and text keeps its AA margin where it crosses one */
	--grid-line: #f2f1ee;
	--grid-line-major: #e7e5e0;
	--text: #1b1b19;
	--text-muted: #53514c;
	--border: #8f8b84;
	/* the dark theme's orange, deepened at the same hue: #d88856 is
	   2.77:1 on white, so it can neither be read as a link here nor carry
	   the white label --on-accent puts on it */
	--accent: #a65727;
	--on-accent: #ffffff;
	--focus-ring: #a65727;
	--notice-bg: #fdf7e5;
	--notice-border: #9a7415;
	--notice-text: #4f3c00;

	/* --scrim sits behind no text and so declares no contrast pair.
	   --hold-track does: the held button's label sits on it. The bar that
	   crosses it is --accent, the color that button is about to become,
	   so there is no third color here to keep in step with the first two.
	   It is held a step further from --surface than a recessed ground
	   needs, because Leave is --surface and the two sat a shade apart */
	--scrim: #0000008c;
	--hold-track: #d6d6cf;

	/* a warm red deep enough to carry WHITE at 14px, which Ko-fi's own coral
	   is not: white on #ff5e5b is 3.00:1. Stated once and not overridden for
	   the dark theme, a brand button being the same button on both grounds,
	   and a different hue from --accent on purpose, so that supporting and
	   downloading do not read as two instances of the same action */
	--support: #be413b;
	--on-support: #ffffff;

	/* the button's glow. Behind no text, so it declares no pair, as --scrim
	   does not either. It warms the ground the button sits on rather than
	   denting it, which a black shadow would */
	--support-glow: #d43a3366;

	/* how long the notice's accept button stays held. site.js reads
	   this rather than carrying its own copy */
	--hold-duration: 5000ms;

	/* ---- documentation ---- */
	/* the docs pages are wider than --page-max because the contents
	   column sits beside the article, which keeps its own --measure */
	--docs-page-max: 76rem;
	--docs-nav-width: 15rem;
	--callout-bar: 3px;

	--code-bg: #f4f4f2;
	--code-comment: #4a6a32;
	--code-keyword: #1f4fa3;
	--code-string: #8c3a14;
	--code-number: #7b3a99;
	--code-preproc: #6e5500;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #191919;
		--surface: #1f1f25;
		--grid-line: #212122;
		--grid-line-major: #2b2b2d;
		--text: #ececed;
		--text-muted: #a9a9b2;
		--border: #6b6b76;
		--accent: #d88856;
		--on-accent: #101018;
		--focus-ring: #d88856;
		--notice-bg: #2a2213;
		--notice-border: #b8891c;
		--notice-text: #f0dca8;

		--scrim: #00000099;
		--hold-track: #383842;

		--code-bg: #1f1f25;
		--code-comment: #94b97a;
		--code-keyword: #86b4f0;
		--code-string: #e3a57c;
		--code-number: #c9a0ec;
		--code-preproc: #d9c46e;
	}
}