/*
 * Tokens — the vocabulary the rest of the CSS is written in.
 *
 * theme.json already emits every value as `--wp--preset--*` and
 * `--wp--custom--*`. Those names are correct and unreadable, so this file
 * aliases them once. Nothing below invents a value; if a colour is not in
 * theme.json it does not exist.
 *
 * The palette is measured from the app's own `Theme.swift` rather than picked
 * to look similar. Depth here is tonal, never a drop shadow: surfaces step
 * warmer as they come forward, exactly as they do in the app.
 */

:root {
	/* Surfaces, coolest to warmest — the ladder that stands in for elevation. */
	--surface: var(--wp--preset--color--surface);
	--container-low: var(--wp--preset--color--container-low);
	--container: var(--wp--preset--color--container);
	--container-high: var(--wp--preset--color--container-high);

	/* Ink. `--ink-faint` was chosen in the app precisely because it clears
	   4.5:1 on all three surfaces — do not lighten it for the web. */
	--ink: var(--wp--preset--color--ink);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--ink-faint: var(--wp--preset--color--ink-faint);

	--espresso: var(--wp--preset--color--espresso);
	--roast: var(--wp--preset--color--roast);
	--cinnamon: var(--wp--preset--color--cinnamon);
	--matcha: var(--wp--preset--color--matcha);
	--matcha-deep: var(--wp--preset--color--matcha-deep);
	--ice: var(--wp--preset--color--ice);
	--outline: var(--wp--preset--color--outline);
	--gold: var(--wp--preset--color--gold);

	--bloom: var(--wp--preset--gradient--bloom);
	--roast-depth: var(--wp--preset--gradient--roast-depth);

	/* Type */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);

	--text-s: var(--wp--preset--font-size--small);
	--text-m: var(--wp--preset--font-size--medium);
	--text-l: var(--wp--preset--font-size--large);
	--text-xl: var(--wp--preset--font-size--x-large);
	--text-section: var(--wp--preset--font-size--xx-large);
	--text-display: var(--wp--preset--font-size--display);

	/* Space */
	--space-xs: var(--wp--preset--spacing--xs);
	--space-s: var(--wp--preset--spacing--s);
	--space-m: var(--wp--preset--spacing--m);
	--space-l: var(--wp--preset--spacing--l);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-xxl: var(--wp--preset--spacing--xxl);

	--radius-s: 10px;
	--radius-m: 18px;
	--radius-l: 28px;
	--radius-pill: 999px;

	/* Motion, ported from the app's springs.
	   SwiftUI's `.spring(response:dampingFraction:)` has no CSS equivalent, so
	   these are cubic-bezier approximations of the same three curves — enough
	   overshoot to feel like the app's hand, none of the wobble a true spring
	   would add on a page that is mostly reading. */
	--ease-press: var(--wp--custom--spring--press);
	--ease-settle: var(--wp--custom--spring--settle);
	--ease-arrive: var(--wp--custom--spring--arrive);

	--dur-press: var(--wp--custom--duration--press);
	--dur-settle: var(--wp--custom--duration--settle);
	--dur-arrive: var(--wp--custom--duration--arrive);

	/* The app caps its stagger at 0.28s; eight items at 35ms is exactly that. */
	--stagger: var(--wp--custom--stagger);

	/*
	 * The focus ring's colour, overridden by any section that changes the
	 * ground under it. Cinnamon was the obvious choice and is wrong: it is
	 * 2.96:1 on parchment, and WCAG 1.4.11 holds a focus indicator to 3:1.
	 * Espresso clears it at 14.6:1.
	 */
	--focus-ring: var(--espresso);

	/* Layout */
	--measure: var(--wp--custom--measure);
	--phone-width: var(--wp--custom--phone-width);
	--header-height: 4.5rem;
}

/*
 * The site does not offer a dark mode. It is one page selling a café that is
 * lit like a café, and inverting it would misrepresent the app — which has no
 * dark mode either. `color-scheme: light` stops the browser from darkening
 * form controls and scrollbars underneath a deliberately light page.
 */
:root {
	color-scheme: light;
}