/*
 * ericville26 — legacy token bridge
 * ---------------------------------
 * Loads immediately after v26.css and re-points every ericville25 token at its
 * ericville26 equivalent.
 *
 * Why this file exists
 * --------------------
 * The site's visual layer is not the templates — it is 14 Gutenberg blocks plus
 * fifteen component stylesheets, and between them they consume 27 ericville25
 * custom properties (--color-accent, --header-fonts, --space-*, --radius-* and
 * friends). Deleting variables.css would leave every one of those unresolved:
 * blocks lose their colour, type and spacing all at once, and an unresolved
 * var() fails silently rather than loudly.
 *
 * Bridging the tokens instead means the whole site adopts the ericville26
 * palette, type and rhythm in one step, while the existing components keep
 * rendering. Stages 3–8 then replace those components one at a time, and the
 * bridge shrinks as they go. Stage 11 deletes what is left.
 *
 * Only tokens are mapped here. No component is restyled in this file.
 */

:root {

	/* ── Type ───────────────────────────────────────────────────────────────
	 * Libre Baskerville → Source Serif 4, Inter → Instrument Sans.
	 * Hierarchy in ericville26 comes from family + weight, never colour.     */
	--header-fonts: var(--serif);
	--base-fonts: var(--sans);
	/* --system-fonts is deliberately untouched: it is a real system stack,
	   not a brand choice. */

	/* ── Surfaces ─────────────────────────────────────────────────────────── */
	--color-bg: var(--bg);
	--color-surface: var(--paper);
	--color-text: var(--text);
	--color-borders: var(--line);

	/* ── Accent ───────────────────────────────────────────────────────────────
	 * ericville25 defaulted --color-accent to a dark grey and only coloured it
	 * per section. ericville26 treats Lab green as the default accent, so an
	 * essay or a search page now picks up an accent instead of grey.
	 *
	 * The four section values are unchanged between the two systems — lab
	 * #0C7E58, ux #0F299B, art #AF2A25, shop #186982 are byte-identical — so the
	 * body.nav-* rules still in variables.css agree with the [data-section]
	 * rules in v26.css. They are removed in Stage 11, not fought with here.   */
	--color-accent: var(--accent);
	--color-accent-light: var(--accent-soft);
	--color-accent-dark: var(--ink);

	/* ── Neutrals ─────────────────────────────────────────────────────────────
	 * Mapped onto the warm ericville26 greys rather than the old neutral ones,
	 * so nothing on the page stays cold-grey against the warm paper ground.  */
	--color-gray-100: var(--sunken);
	--color-gray-200: var(--line);
	--color-gray-300: var(--line-strong);
	--color-gray-600: var(--faint);
	--color-gray-800: var(--muted);
	--color-gray-900: var(--ink);
	--color-black: var(--ink);

	/* ── Radii ────────────────────────────────────────────────────────────────
	 * The handoff is explicit: pills are 999px, everything rectangular is 2px
	 * or 12/20px, and there is no 4/6/8px radius in this system. The old 4px
	 * and 8px steps therefore collapse onto 2px and 12px.                    */
	--radius-xs: var(--r-s);
	--radius-s: var(--r-s);
	--radius-m: var(--r-m);
	--radius-l: var(--r-m);

	/* ── Motion ───────────────────────────────────────────────────────────── */
	--motion-fast: var(--fast);
	--motion-medium: var(--med);
	--motion-steady: var(--slow);
	--motion-slow: var(--slow);
	/* Typo in variables.css, referenced by real rules. Aliased so those rules
	   keep working; removed with the file in Stage 11. */
	--motino-slow: var(--slow);

	/* ── Layout ───────────────────────────────────────────────────────────────
	 * ericville26 widens the content column from 900px to 1120px. This is a
	 * deliberate design change, not a side effect.                           */
	--container-max: var(--col);
	--container-max-with-gutter: calc(var(--col) + (var(--gut) * 2));
	--page-gutter-l: var(--gut);

	/* --breakpoint-l is derived from --container-max in variables.css, so it
	 * widens to 1120px along with the column. That is deliberate: it is used
	 * only as a max-width (WooCommerce page children, the featured-highlight
	 * block, one basetags rule), never in a media query — custom properties do
	 * not work there — so it behaves as a content width, not a breakpoint, and
	 * should widen with the rest of the layout.
	 *
	 * Measured, not assumed: widening it does not cause horizontal overflow.
	 * Shop and Product at a 375 viewport go from 778px wide to a correct 750px,
	 * and Cart from 838px to 788px. The mobile overflow on those pages predates
	 * ericville26; Cart still overflows and is Stage 9's to finish. */

	/* ── Texture ──────────────────────────────────────────────────────────────
	 * v26.css lays real paper grain over the whole page via body::before. The
	 * ericville25 SVG turbulence noise would sit on top of it and read as
	 * dirt, so the generic effect hooks are switched off. The named
	 * --bg-noise-* tokens stay defined for any component still calling them
	 * directly.                                                              */
	--bg-effect-light: none;
	--bg-effect-dark: none;
}

/*
 * Section accents on <html data-section> must also reach the legacy token,
 * otherwise a section page keeps the default Lab green in any component that
 * reads --color-accent. Scoped to :root so the body.nav-* rules in
 * variables.css still win where they exist — same values either way.
 */
:root[data-section] {
	--color-accent: var(--accent);
	--color-accent-light: var(--accent-soft);
}

/*
 * Light-on-dark components: restore inherited heading colour
 * ----------------------------------------------------------
 * v26.css gives every h1–h4 `color: var(--ink)`, which is right on paper and
 * wrong on a dark ground. A heading only inherits when NO rule matches it, so
 * a blanket heading colour silently overrides every component that sets a
 * light colour on its container and lets its headings inherit.
 *
 * It bit the "FEATURED" label on the home page: .featured-highlight-content
 * sets `color: white`, the label is an <h3 class="small"> with no colour of
 * its own, and it turned near-black on a dark photo. Its sibling
 * .featured-highlight-title survived only because it declares `color: white`
 * explicitly.
 *
 * The containers below were found by scanning every theme and block stylesheet
 * for rules that set a light colour on something that is not itself a heading.
 * Restoring `inherit` returns each to exactly its ericville25 behaviour — this
 * takes nothing away, it just stops the new rule reaching where it should not.
 * Each entry disappears as its component is rebuilt in Stages 3–8.
 */
.featured-highlight-content :is(h1,h2,h3,h4,h5,h6),
section.inverse :is(h1,h2,h3,h4,h5,h6),
.inverse :is(h1,h2,h3,h4,h5,h6),
.intro :is(h1,h2,h3,h4,h5,h6),
.ux-tools-category,
.ux-tools-category :is(h1,h2,h3,h4,h5,h6),
.cta-box.special :is(h1,h2,h3,h4,h5,h6),
.art-carousel :is(h1,h2,h3,h4,h5,h6),
.secondary-nav :is(h1,h2,h3,h4,h5,h6) {
	color: inherit;
}