@layer tokens {
	/* Static twin for each of the 33 color-mix() tokens, below Chrome 111 / Firefox 113 / Safari
	 * 16.2. Last in the tokens layer, to outrank 02-tokens.css and 03-palettes.css. A fallback
	 * declaration cannot do this job — a custom property fails at the point of USE, not of
	 * definition. Degradation rules: docs/css.md "The browser floor". */
	@supports not (color: color-mix(in srgb, red 50%, transparent)) {
		:root {
			--fs-accent-soft: transparent;
			--fs-good-soft: transparent;
			--fs-danger-soft: transparent;
			--fs-accent-fill: transparent;
			--fs-good-fill: transparent;
			--fs-warn-fill: transparent;
			--fs-danger-fill: transparent;

			--fs-accent-line: var(--fs-accent);
			--fs-good-line: var(--fs-good);
			--fs-danger-line: var(--fs-danger);
			--fs-accent-line-hi: var(--fs-accent);
			--fs-good-line-hi: var(--fs-good);
			--fs-danger-line-hi: var(--fs-danger);

			/* -solo is already color-mix-free */
			--fs-focus-ring: var(--fs-focus-ring-solo);
			--fs-focus-ring-invalid: 0 0 0 2px var(--fs-panel), 0 0 0 5px var(--fs-danger);

			--background-color-medium: var(--fs-panel2);

			/* --fs-photo-dim is a percentage this cannot apply; the fixed dialog scrim beats no scrim */
			--fs-photo-scrim: var(--fs-scrim);

			/* an unresolved token computes `color` to unset; near-black over a light field beats that */
			--fs-placeholder: var(--fs-faint);

			/* export tier — third-party apps read these, so they must resolve to something.
			 * -medium keeps the hue, -low degrades to the dim text colour it was mixed toward. */
			--border-color-high: var(--fs-border);
			--border-color-low: var(--fs-border);
			--primary-color-medium: var(--fs-accent);
			--primary-color-low: var(--fs-dim);
			--error-color-medium: var(--fs-danger);
			--error-color-low: var(--fs-dim);
			--success-color-medium: var(--fs-good);
			--success-color-low: var(--fs-dim);
			--warn-color-medium: var(--fs-warn);
			--warn-color-low: var(--fs-dim);
		}
	}
}