@layer tokens {
	/* five colourways, one block per (palette x mode). docs/design-system.md "Palettes";
	 * adding one: "Adding a palette". */

	/* --fs-bg washed by hue tint; --fs-bg-base dodges a self-reference cycle (invalid at
	 * computed-value time). docs/design-system.md "Tint and Accent". */
	:root {
		--fs-bg: var(--fs-bg-base);
		/* derived from -base so the accent-hue axis has one copy to rotate */
		--fs-accent: var(--fs-accent-base);
		/* tint OF --fs-accent, mixed FROM it so it never goes stale. The formula lives on :root only;
		 * dark blocks re-state the percentage, since a (0,2,0) re-declaration would outrank the
		 * (0,1,0) twin in 04-nocolormix.css and leave the token invalid without color-mix. */
		--fs-accent-soft-mix: 10%;
		--fs-accent-soft: color-mix(in srgb, var(--fs-accent) var(--fs-accent-soft-mix), transparent);
		/* surfaces + status: raw per palette, derived form is read everywhere else */
		--fs-panel: var(--fs-panel-base);
		--fs-panel2: var(--fs-panel2-base);
		--fs-border: var(--fs-border-base);
		--fs-good: var(--fs-good-base);
		--fs-warn: var(--fs-warn-base);
		--fs-danger: var(--fs-danger-base);
		/* deliberately under AA — the "nothing here" ink, held by `npm run placeholder`.
		 * docs/design-system.md "The fourth ink is the one". */
		--fs-placeholder-mix: 55%;
		--fs-placeholder: color-mix(in oklch, var(--fs-text) var(--fs-placeholder-mix), var(--fs-panel2));
		/* declared here too, so the sheet stands alone — an undefined var() invalidates the rule */
		--fs-accent-h: 0;
		--fs-tint-h: 0;
		--fs-good-h: 0;
		--fs-warn-h: 0;
		--fs-danger-h: 0;
		/* multiplier on the tint chroma below (Tint strength, not Density). docs/design-system.md
		 * "Tint and Accent". */
		--fs-tint-strength: 1;
		/* inert default; head.ut/fs-prefs.js stamp the real url() inline */
		--fs-login-bg-url: none;
		/* scrim over a File photo, mixed from --fs-bg-base so tint never leaks onto it */
		--fs-photo-dim: 74%;
		--fs-photo-scrim: color-mix(in srgb, var(--fs-bg-base) var(--fs-photo-dim), transparent);
		/* tiled pattern axes; .2 is where a hairline reads as a drawing, not texture (.15 is swallowed) */
		--fs-pattern-url: none;
		--fs-pattern-size: 440px;
		--fs-pattern-strength: .2;
		/* floor + two cos() terms, not flat chroma. docs/design-system.md "Tint and Accent". */
		--fs-tint-c: calc((.016 + .012 * max(0, cos((var(--fs-tint-h) - 258) * 1deg))) * var(--fs-tint-strength));
		/* ---- footstrap — GitHub Primer (DEFAULT), LIGHT ---- */
		--fs-bg-base: #f6f8fa;
		--fs-panel-base: #fff;
		--fs-panel2-base: #f6f8fa;
		--fs-border-base: #d0d7de;
		--fs-text: #1f2328;
		/* raised past AA — GitHub-light greys read as 5.2/4.9:1 on the card (page descriptions,
		 * field titles), now 11.8/10.0:1 */
		--fs-dim: #33383d;
		--fs-faint: #3d4348;
		--fs-accent-base: #0969da;
		--fs-track: #eaeef2;
		--fs-good-base: #197c36;
		--fs-warn-base: #946300;
		--fs-danger-base: #cf222e;
		/* ink ON the fills above — white clears AA on all four: 5.19/5.28/5.19/5.36. --fs-panel-base
		 * and these four inks are the same #fff in every light palette below, so THIS is their
		 * only definition — hicontrast/bootstrap/2020/forum's light blocks inherit them, unset.
		 * docs/design-system.md "Adding a palette". */
		--fs-on-accent: #fff;
		--fs-on-good: #fff;
		--fs-on-warn: #fff;
		--fs-on-danger: #fff;
	}
	:root[data-darkmode="true"] {
		--fs-tint-c: calc((.011 + .016 * max(0, cos((var(--fs-tint-h) - 258) * 1deg))
			- .004 * max(0, cos((var(--fs-tint-h) - 55) * 1deg))) * var(--fs-tint-strength));
		/* per-mode, not per-palette — see the placeholder-mix note above */
		--fs-placeholder-mix: 64%;
		/* hicontrast dark re-states 14% */
		--fs-accent-soft-mix: 15%;
		/* DARK (dimmed) */
		--fs-bg-base: #1c2128;
		--fs-panel-base: #22272e;
		--fs-panel2-base: #2d333b;
		--fs-border-base: #444c56;
		--fs-text: #adbac7;
		--fs-dim: #8f9cab;
		--fs-faint: #959ca5;
		--fs-accent-base: #569df5;
		--fs-track: #373e47;
		--fs-good-base: #5aad5d;
		--fs-warn-base: #c79128;
		--fs-danger-base: #ea7a74;
		/* dark ink: fills are light; white fails all four (2.79 worst), #10151c (a shade of
		 * --fs-bg) clears them (6.55 worst) */
		--fs-on-accent: #10151c;
		--fs-on-good: #10151c;
		--fs-on-warn: #10151c;
		--fs-on-danger: #10151c;
	}
	/* relative colour is above the browser floor; below it the token is invalid at computed-value
	 * time and fills paint transparent, so the palette stays. Versions: docs/css.md "The browser floor". */
	@supports (color: oklch(from red l c 40)) {
		:root[data-tint="hue"] { --fs-bg: oklch(from var(--fs-bg-base) l var(--fs-tint-c) var(--fs-tint-h)); }

		/* hue mode rotates via oklch(from…); hex mode, and its ink, is stamped inline by the
		 * appliers (inkFor() in fs-axes.js) */
		:root[data-accent="hue"] { --fs-accent: oklch(from var(--fs-accent-base) l c var(--fs-accent-h)); }
		:root[data-good="hue"]   { --fs-good:   oklch(from var(--fs-good-base)   l c var(--fs-good-h)); }
		:root[data-warn="hue"]   { --fs-warn:   oklch(from var(--fs-warn-base)   l c var(--fs-warn-h)); }
		:root[data-danger="hue"] { --fs-danger: oklch(from var(--fs-danger-base) l c var(--fs-danger-h)); }
	}

	/* ---- hicontrast — deeper, more saturated (opt-in); docs/design-system.md "Palettes" ---- */
	:root[data-palette="hicontrast"] {
		/* LIGHT — accents DARKER than the default's on purpose: 5.22/5.35/5.93/5.80 vs its 5.08. */
		--fs-bg-base: #eef1f6;
		--fs-panel2-base: #f6f8fb;
		--fs-border-base: #e4e9f1;
		--fs-text: #101725;
		--fs-dim: #272f3d;
		--fs-faint: #2e3745;
		--fs-accent-base: #0b6fbd;
		--fs-track: #eaeef4;
		--fs-good-base: #0f7a52;
		--fs-warn-base: #8a5a00;
		--fs-danger-base: #c02b2b;
	}
	:root[data-palette="hicontrast"][data-darkmode="true"] {
		/* DARK */
		--fs-bg-base: #0a0d13;
		--fs-panel-base: #111620;
		--fs-panel2-base: #161c28;
		--fs-border-base: #232b3a;
		--fs-text: #e8edf5;
		--fs-dim: #9ba6b8;
		--fs-faint: #8f9aad;
		--fs-accent-base: #3ba7ff;
		--fs-accent-soft-mix: 14%;
		--fs-track: #1b2230;
		--fs-good-base: #43e0a0;
		--fs-warn-base: #ffb454;
		--fs-danger-base: #ff6b6b;
		/* dark ink: white on these neons fails (2.57 worst), #0a0d13 (=--fs-bg-base) clears
		 * (7.01 worst) */
		--fs-on-accent: #0a0d13;
		--fs-on-good: #0a0d13;
		--fs-on-warn: #0a0d13;
		--fs-on-danger: #0a0d13;
	}

	/* ---- bootstrap — luci-theme-bootstrap's own colours (opt-in). docs/design-system.md
	 * "Palettes" ("bootstrap"). ---- */
	:root[data-palette="bootstrap"] {
		/* LIGHT — white ink on the fills below clears AA on all four: 5.81/5.54/5.40/5.70. */
		--fs-bg-base: #fff;
		--fs-panel2-base: #f5f5f5;
		--fs-border-base: #ccc;
		--fs-text: #232323;
		--fs-dim: #383838;
		--fs-faint: #424242;
		/* --primary-color-medium; -high (#1976d2) measured 4.22:1 on --fs-panel2 */
		--fs-accent-base: #1564c0;
		--fs-track: #eee;
		--fs-good-base: #007936;   /* --success-color-low */
		--fs-warn-base: #826706;   /* #efbd0b darkened; 1.61:1 as text is not a rounding error */
		--fs-danger-base: #d00000; /* --error-color-low */
	}
	:root[data-palette="bootstrap"][data-darkmode="true"] {
		/* DARK */
		--fs-bg-base: #222;
		--fs-panel-base: #282828;
		/* raised past bootstrap's own value: docs/design-system.md "Palettes" ("bootstrap") */
		--fs-panel2-base: #303030;
		--fs-border-base: #444;
		--fs-text: #bfbfbf;
		/* --fs-dim/--fs-faint construction, not bootstrap's own — see the panel2 note above */
		--fs-dim: #a6a6a6;
		--fs-faint: #9a9a9a;
		--fs-accent-base: #53a4c2;
		--fs-track: #333;
		--fs-good-base: #1aaf7b;
		--fs-warn-base: #aa9968;
		--fs-danger-base: #dd807e;
		/* dark ink: light fills, dark ink — matches bootstrap's own --on-*-color; #222 gives
		 * 5.65 on all four */
		--fs-on-accent: #222;
		--fs-on-good: #222;
		--fs-on-warn: #222;
		--fs-on-danger: #222;
	}
	/* ---- 2020 — the OpenWrt 2020 theme's colourway (opt-in), split into a pair.
	 * docs/design-system.md "Palettes" ("2020"). ---- */
	:root[data-palette="2020"] {
		/* LIGHT — white content, the CI cyan darkened until it can be read on it. */
		--fs-bg-base: #fff;
		--fs-panel2-base: #eef4f8;
		--fs-border-base: #c3d2dd;
		/* navy-tinted neutrals rather than grey: the ink belongs to the same scheme as the accent */
		--fs-text: #10202b;
		--fs-dim: #2c4150;
		--fs-faint: #3d5566;
		/* #00B5E2 held at hue, taken down until it reads: 5.89:1 on white against its own 2.09:1 */
		--fs-accent-base: #036c92;
		--fs-track: #e3ebf1;
		--fs-good-base: #276e2a;   /* #5CB85C darkened; 2.28:1 as text is not a rounding error */
		--fs-warn-base: #8a5a00;   /* #C80, same move */
		--fs-danger-base: #c1121f; /* #C11 is 5.25:1 already — the one that stays where it was */
	}
	:root[data-palette="2020"][data-darkmode="true"] {
		/* DARK — 2020's own scheme: the navy is the canvas and the cyan is nearly untouched */
		--fs-bg-base: #002b49;
		--fs-panel-base: #0a3a58;
		--fs-panel2-base: #0e4362;
		--fs-border-base: #1d5a7d;
		--fs-text: #e6f1f7;
		--fs-dim: #b8cfdd;
		--fs-faint: #9dbccd;
		/* the CI cyan, one step up so it clears AA on the lightest of the three surfaces too */
		--fs-accent-base: #35c6ea;
		--fs-track: #123c56;
		--fs-good-base: #74cc74;   /* #5CB85C lifted for the same reason */
		--fs-warn-base: #eab346;
		--fs-danger-base: #ff9d9d;
		/* these fills are LIGHT, so the ink is the canvas navy itself */
		--fs-on-accent: #002b49;
		--fs-on-good: #002b49;
		--fs-on-warn: #002b49;
		--fs-on-danger: #002b49;
	}
	/* ---- forum — sampled from forum.openwrt.org's own getComputedStyle (opt-in).
	 * docs/design-system.md "Palettes" ("forum"). ---- */
	:root[data-palette="forum"] {
		/* LIGHT — the forum's own page, exactly: white canvas, near-black ink. white on the
		 * fills below: 5.19/5.14/5.17/5.17. */
		--fs-bg-base: #fff;
		--fs-panel2-base: #f0f0f0;
		--fs-border-base: #ddd;
		--fs-text: #222;
		--fs-dim: #3d3d3d;
		--fs-faint: #4a4a4a;
		/* sampled #08c 3.89:1/4.49:1 (panel2 fails the 4.5:1 floor); held hue to 5.19:1/4.55:1 */
		--fs-accent-base: #0073ac;
		--fs-track: #eee;
		/* sampled #090 3.78:1; #ffff4d (highlight, fills warn) 1.07:1 as text */
		--fs-good-base: #008000;
		--fs-warn-base: #717100;
		--fs-danger-base: #c63c1b;
	}
	:root[data-palette="forum"][data-darkmode="true"] {
		/* DARK — the forum's own dark scheme: #222 canvas, #ddd ink, both exactly as sampled */
		--fs-bg-base: #222;
		--fs-panel-base: #262626;
		--fs-panel2-base: #2e2e2e;
		--fs-border-base: #3a3a3a;
		--fs-text: #ddd;
		--fs-dim: #a3a3a3;
		--fs-faint: #969696;
		/* sampled #0f82af 3.66:1/3.12:1 on bg/panel2, under 4.5:1; held the hue to 5.86:1/5.00:1 */
		--fs-accent-base: #13a8e3;
		--fs-track: #333;
		--fs-good-base: #1fb65a;
		--fs-warn-base: #c99259;
		--fs-danger-base: #eb8066;
		/* dark ink: these fills are light, and #222 (= --fs-bg-base) gives 5.86/5.98/5.86/5.92 */
		--fs-on-accent: #222;
		--fs-on-good: #222;
		--fs-on-warn: #222;
		--fs-on-danger: #222;
		/* overrides --fs-bar-bg: forum's own masthead navy, measured live */
		--fs-bar-bg: #002b49;
	}
}