/* Bridge: legacy token names -> theme.json presets.
 *
 * theme.json is now the single source of truth for the design tokens. It has to
 * be: it is what feeds the block editor's colour, typography and shadow pickers,
 * so a value defined anywhere else is invisible to the people editing the site.
 *
 * But the ported stylesheets are ~158KB written against the v2 token names
 * (--color-primary, --radius-lg, --shadow-stamp). Rewriting every declaration to
 * --wp--preset--color--primary would be a large, entirely mechanical diff with
 * real risk and no design benefit.
 *
 * So this file aliases the old names to the new ones. One definition, two
 * spellings, no duplicated values — change a colour in theme.json and both the
 * editor and the ported CSS follow. Deleting this file is the (optional) endgame
 * once the stylesheets have been migrated to preset names.
 *
 * Tokens theme.json does not model stay declared here as literals: motion,
 * seam geometry, the nav grace period, container measurements and the rgba
 * borders. Those are read by CSS and JS but never offered to an editor, so they
 * have no business in a picker.
 */
:root {
	/* The theme has exactly one scheme. Declaring it stops dark-OS browsers from
	   rendering UA form controls and scrollbars in the dark palette against these
	   hardcoded light surfaces. */
	color-scheme: light;

	/* ---- Colour: aliased to theme.json presets ---- */
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-deep: var(--wp--preset--color--primary-deep);
	--color-gradient-end: var(--wp--preset--color--gradient-end);
	--color-dark: var(--wp--preset--color--dark);
	--color-grad-dark: var(--wp--preset--color--grad-dark);
	--color-grad-mid: var(--wp--preset--color--grad-mid);
	--color-tint: var(--wp--preset--color--tint);
	--color-white: var(--wp--preset--color--white);
	--color-body: var(--wp--preset--color--body);
	--color-body-muted: var(--wp--preset--color--body-muted);
	--color-on-dark: var(--wp--preset--color--on-dark);
	--color-on-dark-muted: var(--wp--preset--color--on-dark-muted);
	--color-accent-on-dark: var(--wp--preset--color--accent-on-dark);
	--color-link-on-dark: var(--wp--preset--color--link-on-dark);
	--color-card: var(--wp--preset--color--white);
	--color-input-bg: var(--wp--preset--color--input-bg);

	/* Borders are alpha over whatever is behind them, not palette entries — an
	   editor picking "border colour" from a swatch list would get a flat colour
	   and lose the translucency the whole card system depends on. */
	--color-border: rgba(0, 0, 0, 0.10);
	--color-border-dark: rgba(255, 255, 255, 0.14);
	--color-border-card: rgba(196, 28, 28, 0.14);
	--color-border-card-hover: rgba(196, 28, 28, 0.55);

	/* ---- Gradients ---- */
	--gradient-primary: var(--wp--preset--gradient--primary);
	--gradient-dark: var(--wp--preset--gradient--dark);
	--gradient-hero: var(--wp--preset--gradient--hero);
	--gradient-dark-sym: var(--wp--preset--gradient--dark-sym);

	/* The hero -> trust-strip join.
	 *
	 * Not a theme.json gradient preset: this one is never offered to an editor as
	 * a fill, it is an overlay the hero paints over its own diagonal gradient so
	 * the bottom 4.5rem resolves to exactly --color-dark and meets the trust strip
	 * with no visible seam. Carried over verbatim from v2 tokens.css.
	 *
	 * Missing it was a real visual bug rather than a cosmetic one: `background:
	 * var(--chain-dark-up)` on .hero::after resolved to an invalid value, so the
	 * fade painted nothing at all and the hero's bright diagonal red butted
	 * straight into the flat near-black strip. Casey reported the hard edge.
	 */
	--chain-dark-up: linear-gradient(0deg, var(--color-dark), transparent 4.5rem);

	/* ---- Typography ---- */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: var(--wp--preset--font-family--body);
	--font-heading: var(--wp--preset--font-family--heading);

	--text-sm: var(--wp--preset--font-size--small);
	--text-base: var(--wp--preset--font-size--medium);
	--text-lg: var(--wp--preset--font-size--large);
	--text-xl: var(--wp--preset--font-size--x-large);
	--text-2xl: var(--wp--preset--font-size--xx-large);
	--text-3xl: var(--wp--preset--font-size--h-2);
	--text-4xl: var(--wp--preset--font-size--h-1);
	--text-display: var(--wp--preset--font-size--display);

	--leading-tight: var(--wp--custom--leading--tight);
	--leading-normal: var(--wp--custom--leading--normal);

	/* ---- Radius ---- */
	--radius-sm: var(--wp--custom--radius--sm);
	--radius: var(--wp--custom--radius--base);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-full: var(--wp--custom--radius--full);

	/* ---- Shadows: the Structured Stamp. Blur is zero on purpose — see base.css. ---- */
	--shadow-stamp: var(--wp--preset--shadow--stamp);
	--shadow-stamp-lg: var(--wp--preset--shadow--stamp-lg);
	--shadow-stamp-hover: var(--wp--preset--shadow--stamp-hover);
	--shadow-stamp-dark: var(--wp--preset--shadow--stamp-dark);
	--shadow-stamp-lg-dark: var(--wp--preset--shadow--stamp-lg-dark);
	/* Button/chip shadows stay literal: they are a single downward offset tied to
	   the press interaction, not a surface elevation an editor should pick. */
	--shadow-stamp-btn: 0 5px 0 var(--color-dark);
	--shadow-stamp-btn-red: 0 5px 0 var(--color-primary);
	--shadow-stamp-chip: 0 4px 0 var(--color-primary);

	/* ---- Layout measurements ---- */
	--container-max: 80rem;
	--container-pad: 1rem;
	--section-pad: 4rem;
	--nav-h: var(--wp--custom--nav--height);
	--subnav-h: var(--wp--custom--nav--subnav-height);
	/* How far down the viewport the fixed header starts. 0 for a visitor; 32px
	   when the editor admin bar is present above it. Set once in layout.css. */
	--chrome-top: 0px;

	/* ---- Motion ---- */
	--transition: var(--wp--custom--motion--transition);
	--transition-slow: var(--wp--custom--motion--transition-slow);
	--transition-press: var(--wp--custom--motion--transition-press);
	--reveal-shift: var(--wp--custom--motion--reveal-shift);
	--reveal-duration: var(--wp--custom--motion--reveal-duration);
	--reveal-ease: var(--wp--custom--motion--reveal-ease);
	--nav-panel-grace: var(--wp--custom--nav--panel-grace);
	--nav-panel-fade: var(--wp--custom--nav--panel-fade);
	--focus-ring-color: var(--color-primary);

	/* ---- Torn seam geometry ---- */
	--seam-height: var(--wp--custom--seam--height);
	--seam-tile: var(--wp--custom--seam--tile);

	/* ---- Paper-grain surface tiles ----
	   Each averages to the flat token it pairs with, so these are FILLS, not
	   overlays. Tiled at the masters' natural 512px, the period they wrap on
	   exactly; any background-size resamples the noise and loses it. */
	--surface-grain-light: url("../img/textures/surface-grain-light.webp");
	--surface-grain-dark: url("../img/textures/surface-grain-dark.webp");
}