/*
 * The Find Yard — design tokens (v2 "market-stamp" remix).
 * Source of truth: docs/brand-system.md. Keep in sync — this file
 * should never invent a value that isn't documented there.
 */

:root {
	--fy-ink: #1c1b18;
	--fy-paper: #f2eee2;
	--fy-card: #fffdf7;
	--fy-ochre: #e3a712;
	--fy-ochre-ink: #2b1f02;
	--fy-petrol: #1f3a3d;
	--fy-stamp-red: #c23b22;
	--fy-line: #1c1b18;
	--fy-line-soft: #cfc8b3;
	--fy-sub: #5c5748;

	--fy-font-display: 'Archivo Black', sans-serif;
	--fy-font-heading: 'Archivo', sans-serif;
	--fy-font-body: 'Work Sans', sans-serif;
	--fy-font-mono: 'IBM Plex Mono', monospace;

	--fy-radius: 0px;
	--fy-border: 2px solid var(--fy-line);
	--fy-gutter: 20px;
	--fy-header-height: 64px;
	--fy-bottom-nav-height: 60px;
	--fy-transition: 160ms ease;
	--fy-z-header: 40;
	--fy-z-bottom-nav: 50;
}

/*
 * Storefront colour is deliberately single-theme (ink/paper/ochre is the
 * brand, not a light/dark pair) — see docs/brand-system.md. No
 * prefers-color-scheme override here; that's a decision for a later
 * pass if ever needed, not an oversight.
 */

/*
 * Astra applies its own site-background colour via class selectors like
 * `.ast-separate-container` (specificity 0,1,0), which beats a plain
 * `body` element selector (0,0,1) regardless of stylesheet load order.
 * Matching that specificity here — rather than reaching for !important —
 * is what actually wins the cascade against Astra's Customizer output.
 * See docs/decisions.md "CSS specificity vs. Astra" for the full note.
 */
body,
body.ast-separate-container,
body.ast-two-container {
	background: var(--fy-paper);
	color: var(--fy-ink);
	font-family: var(--fy-font-body);
	padding-bottom: calc(var(--fy-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* Astra's "boxed article" card background — align it with our card
   token instead of Astra's own light-grey default. */
.ast-separate-container .ast-article-inner,
.ast-separate-container .site-content {
	background: var(--fy-card);
}

@media (min-width: 860px) {
	body,
	body.ast-separate-container,
	body.ast-two-container {
		padding-bottom: 0;
	}
}