/*
 * Brand tokens — exact values taken from the approved logo and grass-strip SVGs
 * (Design Assets/) and the homepage visual, Romiley-Secure-Dog-Field-Website---Homepage-v1.jpg.
 * Supersedes the approximate placeholders from spec §5.1.
 */
:root {
	--rsdf-green-dark: #333B30;   /* logo panel, calendar header, footer, dark text sections */
	--rsdf-green-mid: #8A9A5B;    /* kept from spec — not used directly in the homepage visual but reserved for info notices */
	--rsdf-mint: #DCEEE1;         /* map section background */
	--rsdf-cream: #FFFFFF;        /* card bodies, page sections — changed from #F1F0EB to white at the client's request 2026-08-11; kept the token name since booking-widget.css, account.css etc. all fall back to it (var(--rsdf-cream, #F1F0EB)) rather than hardcoding their own colour */
	--rsdf-orange: #DD5A28;       /* primary CTA — exact value from logo paw icon */
	--rsdf-red: #B23A2E;          /* urgent site notices only — a warm, muted red so it still sits inside the brand palette rather than a raw alert red */
	--rsdf-ink: #1C1C1A;
	--rsdf-grey: #D9D9D6;

	--rsdf-white: #FFFFFF;

	/* Type — Lora (Google Fonts, SIL OFL, open source, no licence cost) used
	   throughout: display, body, nav and buttons all on the one family. */
	--rsdf-font-display: 'Lora', Georgia, 'Times New Roman', serif;
	--rsdf-font-body: 'Lora', Georgia, 'Times New Roman', serif;
	--rsdf-font-ui: 'Lora', Georgia, 'Times New Roman', serif;

	/* Layout — fluid between mobile and desktop rather than a fixed breakpoint
	   swap, so the header scales smoothly at every viewport width. */
	--rsdf-header-height: clamp(96px, 10vw + 60px, 160px);
	--rsdf-header-height-collapsed: clamp(64px, 6vw + 40px, 88px);
	--rsdf-notice-height: 0px; /* set by JS when a notice is active, reserved to avoid layout shift */
	--rsdf-max-width: 1200px;
	--rsdf-gutter: 24px;
	/*
	 * Containers use THIS as their max-width, not --rsdf-max-width directly.
	 * Reasoning: max-width:1200px + padding-inline:24px gives an effective
	 * content area of 1152px (1200 - 24*2), not 1200 — which is what was
	 * measuring as "1150" against the guide lines. Bumping the outer box by
	 * exactly 2x the gutter means the effective inner content area comes out
	 * to precisely 1200px, while the 24px still exists as safe edge padding
	 * on narrower viewports where max-width isn't yet the constraining factor.
	 */
	--rsdf-content-max-width: calc(var(--rsdf-max-width) + (var(--rsdf-gutter) * 2));

	/* Motion */
	--rsdf-ease: cubic-bezier(0.2, 0, 0, 1);
	--rsdf-duration: 280ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--rsdf-duration: 0ms;
	}
}