/*
 * Design tokens.
 * ---------------------------------------------------------------------------
 * One accent for the whole site: evergreen. It is the only chromatic colour in
 * the palette, everything else is a neutral. Locking to a single accent is what
 * keeps a page this long feeling like one object.
 *
 * Radius rule, applied everywhere without exception:
 *   interactive controls -> --r-pill
 *   cards and panels     -> --r-lg
 *   inputs and textareas -> --r-sm
 *
 * The page has one theme. Light and dark are the same design with swapped
 * token values; no section inverts against the rest of the page.
 */

:root {
	color-scheme: light dark;

	/* --- Neutrals (light) --- */
	--c-canvas: #f7f7f5;
	--c-surface: #ffffff;
	--c-surface-2: #f1f1ed;
	--c-ink: #121614;
	--c-ink-2: #3c4441;
	--c-ink-3: #6b7370;
	--c-line: #e4e4de;
	--c-line-strong: #cdcdc6;
	/*
	 * The outline of a form control, kept separate from the decorative rules
	 * above. WCAG 1.4.11 asks for 3:1 between a control's boundary and what is
	 * behind it; --c-line-strong measures 1.60:1 on a white card, which is why
	 * the checkout fields read as text floating with no box around them. This
	 * is 3.52:1 on the card and 3.28:1 on the canvas.
	 */
	--c-control-line: #848a86;

	/* --- Accent (light) --- */
	--c-accent: #0e5c46;
	--c-accent-hover: #0a4736;
	--c-accent-soft: #e6f0ec;
	--c-accent-line: #b9d6cb;
	--c-on-accent: #ffffff;

	/* --- Feedback --- */
	--c-error: #97281f;
	--c-error-soft: #fbeceb;
	/*
	 * Warning is the only other chromatic colour in the palette, and it exists
	 * for the same reason as the error pair: a caution message that is rendered
	 * in the accent reads as a confirmation. 5.76:1 on its own tint.
	 */
	--c-warning: #8a5300;
	--c-warning-soft: #fdf3e4;

	/* --- Materials --- */
	--m-chrome: rgb(247 247 245 / 0.72);
	--m-chrome-border: rgb(18 22 20 / 0.07);
	--m-scrim: rgb(18 22 20 / 0.32);

	/* --- Elevation. Shadows are tinted with the ink hue, never pure black. --- */
	--sh-sm: 0 1px 2px rgb(18 22 20 / 0.05), 0 2px 6px rgb(18 22 20 / 0.04);
	--sh-md: 0 2px 4px rgb(18 22 20 / 0.04), 0 12px 28px rgb(18 22 20 / 0.07);
	--sh-lg: 0 4px 8px rgb(18 22 20 / 0.04), 0 28px 64px rgb(18 22 20 / 0.10);

	/* --- Typography --- */
	--ff-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/*
	 * Tracking is size specific: display sizes need negative tracking because
	 * letters read too far apart as they grow, small text needs a touch of
	 * positive tracking to stay legible. A single letter-spacing value would be
	 * wrong at one end or the other.
	 */
	--fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
	--fs-h1: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.85rem);
	--fs-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
	--fs-lead: clamp(1.08rem, 1rem + 0.42vw, 1.3rem);
	--fs-body: 1.0625rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.8125rem;

	--ls-display: -0.035em;
	--ls-h1: -0.03em;
	--ls-h2: -0.025em;
	--ls-h3: -0.015em;
	--ls-body: -0.005em;
	--ls-eyebrow: 0.14em;

	--lh-display: 1;
	--lh-heading: 1.12;
	--lh-lead: 1.5;
	--lh-body: 1.65;

	/* --- Space. 4px base, used for every gap and pad in the theme. --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3rem;
	--sp-9: 4rem;
	--sp-10: 5rem;

	--section-y: clamp(4.5rem, 9vw, 8.5rem);
	--gutter: clamp(1.25rem, 4.5vw, 3rem);
	--container: 1180px;
	/*
	 * There is one container width. A second, narrower one used to exist for
	 * text pages, but a 720px box centred inside a 1180px page is a ribbon of
	 * content between two empty margins that line up with nothing: the header,
	 * the footer and every landing section start at the container edge, and the
	 * article did not. Reading measure is held by the content itself instead --
	 * see --measure, applied to paragraphs and to the prose column.
	 */
	--measure: 66ch;

	/* --- Radius --- */
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 30px;
	--r-pill: 999px;

	/* --- Motion ---
	 * Springs live in JavaScript. These curves are for the non-gestural
	 * transitions that never need to be grabbed mid-flight. */
	--e-out: cubic-bezier(0.16, 1, 0.3, 1);
	--e-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--d-fast: 140ms;
	--d-base: 260ms;
	--d-slow: 520ms;

	--header-h: 68px;
	--z-header: 100;
	--z-sheet: 200;
}

@media (prefers-color-scheme: dark) {
	:root {
		--c-canvas: #0e100f;
		--c-surface: #171a18;
		--c-surface-2: #1f2321;
		--c-ink: #edefec;
		--c-ink-2: #b5bbb7;
		--c-ink-3: #868d89;
		--c-line: #2a2f2c;
		--c-line-strong: #3b413d;
		--c-control-line: #6b7370; /* 3.60:1 on the card, 3.92:1 on the canvas. */

		--c-accent: #3fb08c;
		--c-accent-hover: #58c4a1;
		--c-accent-soft: #16241f;
		--c-accent-line: #2c4e43;
		--c-on-accent: #05110c;

		--c-error: #f2938b;
		--c-error-soft: #2a1a19;
		--c-warning: #e0a458; /* 7.32:1 on its tint. */
		--c-warning-soft: #2a2016;

		--m-chrome: rgb(14 16 15 / 0.72);
		--m-chrome-border: rgb(237 239 236 / 0.09);
		--m-scrim: rgb(0 0 0 / 0.55);

		--sh-sm: 0 1px 2px rgb(0 0 0 / 0.4);
		--sh-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 28px rgb(0 0 0 / 0.45);
		--sh-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 28px 64px rgb(0 0 0 / 0.55);
	}
}

/*
 * Reduced transparency: the chrome becomes an opaque surface rather than a
 * blurred material. Support for this query is uneven, so the translucent
 * versions above are also legible without the blur landing.
 */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--m-chrome: var(--c-canvas);
	}
}

@media (prefers-contrast: more) {
	:root {
		--c-ink-2: var(--c-ink);
		--c-ink-3: #4a5350;
		--c-line: var(--c-line-strong);
		--c-control-line: var(--c-ink-2);
		--m-chrome: var(--c-canvas);
	}
}