/* TrueFloat brand tokens: the one palette of truefloat.app, taken from the
   prism mark (design/BRAND.md). Used as is by both sites:
     - the landing page loads it as /tokens.<hash>.css, fingerprinted by
       web/docs/scripts/build-landing.mjs;
     - the docs bundle it through Starlight's customCss and the Scalar
       reference page's import (web/docs/src/styles/custom.css maps it onto
       Starlight's variables).
   Dark is the default and the brand. The light block is the other theme, on
   <html data-theme="light"> once the visitor chose it with the header's theme
   button (web/landing/lead.js on the site, docs/src/scripts/theme-init.js in
   the docs, one localStorage "theme" for both): white ground, near-black text,
   the same spectrum. Every step of text is at least 4.5:1 on --tf-ink in both. */
:root {
	color-scheme: dark;

	/* Ink: true black (owner, 2026-10-03: Blend), then raised steps for surfaces, a hover step and the one
	   opaque pane (menus, panels; nothing on the site is glass). */
	--tf-ink: #000000;
	--tf-ink-raised: #0d0d0e;
	--tf-ink-overlay: #141416;
	--tf-ink-hover: #18181a;
	--tf-pane: #111113;
	/* Hairlines, solid so two that meet never add up to a brighter one: the faint, the strong (a section's
	   rule) and the heavy (an active control's edge). */
	--tf-line: #1a1a1a;
	--tf-line-strong: #2a2a2a;
	--tf-line-heavy: #464646;
	/* White washes over the ground (art plates, quiet pills, soft rules) as channels, for rgb(var(--tf-wash) / .1):
	   white on black here, black on white in the light theme. */
	--tf-wash: 255 255 255;
	/* The sticky header once the page has left the top, and the solid button's hover (--tf-fg is its fill). */
	--tf-bar: rgba(0, 0, 0, 0.72);
	--tf-bar-clear: rgba(0, 0, 0, 0);
	--tf-solid-hover: #ffffff;
	/* A small control over a picture (a clip's pause button): dark glass over the art. */
	--tf-chip: rgba(0, 0, 0, 0.78);
	--tf-select: rgba(255, 255, 255, 0.2);

	/* Text, strongest to faintest. Every step is at least 4.5:1 on --tf-ink. */
	--tf-fg: #fafafa;
	--tf-text: #c4c4c4;
	--tf-muted: #a3a3a3;
	--tf-faint: #8a8a8a;

	/* Neutral greys for component chrome (borders, code, hover). */
	--tf-grey-1: #ededed;
	--tf-grey-2: #c4c4c4;
	--tf-grey-3: #8a8a8a;
	--tf-grey-4: #5c5c5c;
	--tf-grey-5: #2b2b2b;
	--tf-grey-6: #111113;

	/* The spectrum: the mark's four outgoing rays, top to bottom. Accents
	   only, never a background wash. */
	--tf-red: #ef4444;
	--tf-amber: #f59e0b;
	--tf-green: #22c55e;
	--tf-blue: #3b82f6;
	--tf-spectrum: linear-gradient(90deg, var(--tf-red), var(--tf-amber), var(--tf-green), var(--tf-blue));
	/* The spectrum as a hairline that fades out at both ends (over the footer, under section heads). */
	--tf-spectrum-soft: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.7) 18%, rgba(245, 158, 11, 0.7) 39%, rgba(34, 197, 94, 0.7) 61%, rgba(59, 130, 246, 0.7) 82%, transparent);

	/* Tiers read top ray down: tier 1 is the red ray. */
	--tf-tier-1: var(--tf-red);
	--tf-tier-2: var(--tf-amber);
	--tf-tier-3: var(--tf-green);
	--tf-tier-4: var(--tf-blue);

	/* Accent: the blue ray. --tf-accent for rings and fills, --tf-accent-text
	   (lifted, 7.8:1 on ink) for link text. */
	--tf-accent: var(--tf-blue);
	--tf-accent-text: #60a5fa;
	--tf-accent-low: #0e1a30;

	--tf-font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--tf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--tf-radius: 6px;
	--tf-radius-sm: 4px;

	/* Layout and motion: the one column every page shares, the sticky header's height, and the site's easing
	   and short duration (120-180 ms fades and slides; none under prefers-reduced-motion). */
	--tf-col: 76rem;
	--tf-header-h: 56px;
	--tf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tf-t: 150ms;
}

:root[data-theme='light'] {
	color-scheme: light;
	--tf-ink: #ffffff;
	--tf-ink-raised: #f7f7f8;
	--tf-ink-overlay: #efeff1;
	--tf-ink-hover: #f0f0f2;
	--tf-pane: #ffffff;
	--tf-line: #ececee;
	--tf-line-strong: #dedee1;
	--tf-line-heavy: #b4b4ba;
	--tf-wash: 0 0 0;
	--tf-bar: rgba(255, 255, 255, 0.78);
	--tf-bar-clear: rgba(255, 255, 255, 0);
	--tf-solid-hover: #2b2b2e;
	--tf-chip: rgba(255, 255, 255, 0.86);
	--tf-select: rgba(37, 99, 235, 0.2);

	--tf-fg: #0a0a0a;
	--tf-text: #262626;
	--tf-muted: #525252;
	--tf-faint: #6b6b6b;

	--tf-grey-1: #171717;
	--tf-grey-2: #262626;
	--tf-grey-3: #525252;
	--tf-grey-4: #8a8a8a;
	--tf-grey-5: #d4d4d4;
	--tf-grey-6: #ededed;

	/* The rays for text and fills on white: each at least 4.5:1. The spectrum line keeps the bright ones. */
	--tf-red: #dc2626;
	--tf-amber: #b45309;
	--tf-green: #15803d;
	--tf-blue: #2563eb;
	--tf-spectrum: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);
	--tf-spectrum-soft: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.75) 18%, rgba(245, 158, 11, 0.75) 39%, rgba(34, 197, 94, 0.75) 61%, rgba(59, 130, 246, 0.75) 82%, transparent);

	--tf-accent: #2563eb;
	--tf-accent-text: #1d4ed8;
	--tf-accent-low: #dbeafe;
}