/**
 * SBF 2026 — canonical design tokens.
 *
 * THE SINGLE SOURCE OF TRUTH for colour, measure and rhythm across every
 * surface. Nothing else may define these values.
 *
 * Ratified by Stephan 2026-07-31, selecting "the newer wave throughout" after
 * the two design generations were found to disagree: team, screening-room and
 * photography (2026-07-23) carried --bg #100e0c / --quiet #b4ada0 / --soft
 * #8f897f / --elev #17140f / --text 760px, while contact and Begin the
 * Experience (2026-07-24) carried --deep #0b0a09 / --quiet #c7c0b4 / --soft
 * #a39c91 / --elev #191613 / --text 720px. The later wave is canonical.
 *
 * ENG1WED-109 ratified a shared design system on 2026-07-21; it was never
 * implemented as one. Seven surfaces each generated their own stylesheet with
 * no shared layer, and --quiet ended up carrying two different values under the
 * same name. This file is that implementation.
 *
 * Loaded before every family stylesheet so families inherit rather than
 * redeclare. A family stylesheet that redeclares a token is a DEFECT — the
 * cross-family gate (ENG1WED-224 phase 4) exists to fail the build on it.
 */

:root {
	/* ---- Colour ------------------------------------------------------- */

	/* Page ground. */
	--sbf-deep: #0b0a09;

	/* Raised surface — cards, panels, elevated blocks. */
	--sbf-elev: #191613;

	/* Primary text on the ground. */
	--sbf-ink: #f2ece0;

	/* Secondary text: body copy, descriptions, captions. */
	--sbf-quiet: #c7c0b4;

	/* Tertiary text: labels, meta, de-emphasised chrome. */
	--sbf-soft: #a39c91;

	/* The accent. Buttons, focus rings, marks, active states. */
	--sbf-ember: #d97e5c;
	--sbf-ember-deep: #c96a49;

	/* Hairlines and dividers, derived from ink so they sit on any ground. */
	--sbf-rule: rgba(242, 236, 224, 0.16);
	--sbf-rule-strong: rgba(242, 236, 224, 0.38);

	/* Control fills. */
	--sbf-shade: rgba(242, 236, 224, 0.075);
	--sbf-shade-hover: rgba(242, 236, 224, 0.105);

	/* Shared image-closer overlay. */
	--sbf-scrim: rgba(16,14,12,.68);

	/* ---- Measure and rhythm ------------------------------------------- */

	/* Outer content shell. Unanimous across all six designs. */
	--sbf-shell: 1180px;

	/* Narrower shell used by footers. */
	--sbf-shell-narrow: 1080px;

	/* Reading measure for long-form copy. */
	--sbf-text: 720px;

	/* Page gutter. Unanimous across all six designs. */
	--sbf-gutter: clamp(20px, 4vw, 64px);

	/* ---- Type ---------------------------------------------------------- */

	/* WordPress theme.json owns every type value; these are compatibility aliases. */
	--sbf-font-display: var(--wp--preset--font-family--fraunces, 'Fraunces', Georgia, serif);
	--sbf-font-body: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);

	--sbf-size-display: var(--wp--preset--font-size--display, clamp(52px,5.8vw,84px));
	--sbf-size-h2: var(--wp--preset--font-size--heading-2, clamp(38px,4.2vw,60px));
	--sbf-size-h3: var(--wp--preset--font-size--heading-3, clamp(28px,2.6vw,38px));
	--sbf-size-lead: var(--wp--preset--font-size--lead, 21px);
	--sbf-size-body: var(--wp--preset--font-size--body, 17px);
	--sbf-size-small: var(--wp--preset--font-size--small, 15px);
	--sbf-size-meta: var(--wp--preset--font-size--meta, 13px);
	--sbf-size-micro: var(--wp--preset--font-size--micro, 11px);
	--sbf-size-kicker: var(--wp--preset--font-size--small, 15px);

	--sbf-leading-display: var(--wp--custom--typography--leading--display, 1.03);
	--sbf-leading-h2: var(--wp--custom--typography--leading--heading-two, 1.06);
	--sbf-leading-h3: var(--wp--custom--typography--leading--heading-three, 1.14);
	--sbf-leading-lead: var(--wp--custom--typography--leading--lead, 1.6);
	--sbf-leading-body: var(--wp--custom--typography--leading--body, 1.6);
	--sbf-leading-small: var(--wp--custom--typography--leading--small, 1.55);
	--sbf-leading-meta: var(--wp--custom--typography--leading--meta, 1.5);
	--sbf-leading-micro: var(--wp--custom--typography--leading--micro, 1.4);

	--sbf-tracking-display: var(--wp--custom--typography--tracking--display, -0.03em);
	--sbf-tracking-h2: var(--wp--custom--typography--tracking--heading-two, -0.03em);
	--sbf-tracking-h3: var(--wp--custom--typography--tracking--heading-three, -0.02em);
	--sbf-tracking-micro: var(--wp--custom--typography--tracking--micro, .16em);

	/* ---- Chrome -------------------------------------------------------- */

	/* Brand mark. One placement, one size, every surface. */
	--sbf-logo-width: clamp(150px, 15vw, 200px);
	--sbf-header-pad-block: 28px;
	--sbf-header-pad-inline: max(24px, 4vw);

	/*
	 * Space a bottom-aligned layout must reserve for the fixed conversational
	 * nav. Shipping without this made the Begin button unclickable at 390px
	 * and put it below the fold at 320px.
	 */
	--sbf-nav-reserve: 99px;
}

@media (max-width: 640px) {
	:root {
		--sbf-nav-reserve: 91px;
	}
}

@media (max-width: 350px) {
	:root {
		--sbf-nav-reserve: 91px;
	}
}