/*
 * pbsf-tokens.css
 *
 * Shared CSS custom properties for the PBellaras Site Framework, consumed
 * by pbsf-header.css, pbsf-footer.css, and pbsf-page-shell.css.
 *
 * Palette values are reused verbatim from the verified, live
 * `pbellaras-home-builder` stylesheet (assets/css/pbellaras-home-builder.css,
 * --pbh-bg / --pbh-panel / --pbh-cyan / --pbh-teal / --pbh-violet /
 * --pbh-pink) and its accent defaults (accent_color #55F4FF, accent_secondary
 * #FF45C8), so the framework starts visually consistent with the rest of the
 * site without depending on or modifying that plugin.
 *
 * Scoped to each PBSF component individually (`.pbsf-header`,
 * `.pbsf-footer`, `.pbsf-skip-link`) rather than to a single shared
 * `.pbsf-scope` ancestor — the Home integration contract (v2) renders
 * Header and Footer as independent siblings with no common wrapper, so
 * each component must be able to resolve its own tokens standalone.
 * `.pbsf-scope` itself is kept in this list too, for the (unrelated)
 * test-harness shortcode preview, which still uses the older
 * PBSF_Page_Shell wrapper. Nothing here leaks onto pages that don't
 * render one of these selectors.
 */

.pbsf-scope,
.pbsf-header,
.pbsf-footer,
.pbsf-skip-link {
	/* Color */
	--pbsf-color-bg: #02070a;
	--pbsf-color-panel: #061820;
	/*
	 * Lighter tint of the same panel hue (not a new color), used where the
	 * panel sits over a busy/atmospheric page background (e.g. the header
	 * on `/home/`). Measured contrast of --pbsf-color-panel against
	 * --pbsf-color-bg was only ~1.1:1 — both are near-black, so the header
	 * edge was effectively invisible against the cosmic hero background.
	 * This tone (still composited at 92% opacity, ~1.5:1 effective contrast
	 * against --pbsf-color-bg even with no blur support) gives a reliable,
	 * GPU-independent boundary; the backdrop-filter blur applied where this
	 * token is used is a progressive enhancement on top of it, not a
	 * requirement for the boundary to read.
	 */
	--pbsf-color-panel-translucent: rgba(18, 56, 68, 0.92);
	--pbsf-color-cyan: #55f4ff;
	--pbsf-color-teal: #18ddd5;
	--pbsf-color-violet: #8c63ff;
	--pbsf-color-pink: #ff45c8;
	--pbsf-color-text: #e9fbfc;
	--pbsf-color-text-muted: #9eb1bd;
	--pbsf-color-border: rgba(233, 251, 252, 0.16);
	--pbsf-color-focus: var(--pbsf-color-cyan);

	/* Spacing scale */
	--pbsf-space-1: 4px;
	--pbsf-space-2: 8px;
	--pbsf-space-3: 16px;
	--pbsf-space-4: 24px;
	--pbsf-space-5: 32px;
	--pbsf-space-6: 48px;

	/* Type scale */
	--pbsf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--pbsf-font-size-sm: 0.875rem;
	--pbsf-font-size-base: 1rem;
	--pbsf-font-size-lg: 1.25rem;
	--pbsf-line-height-base: 1.5;

	/* Layout */
	--pbsf-content-width: 1200px;
	--pbsf-radius: 6px;

	/* Motion */
	--pbsf-transition-duration: 200ms;
	--pbsf-transition-easing: ease;
}

@media (prefers-reduced-motion: reduce) {
	.pbsf-scope {
		--pbsf-transition-duration: 0ms;
	}
}