/* =========================================================================
   PhysioFlexx Falkirk — Design tokens
   Single source of truth for colour, type, spacing, radius, shadow.
   Verified WCAG-AA on all critical text pairs (see design-direction.md).
   ========================================================================= */

:root {
	/* ---- Brand blue family ---- */
	--pf-primary: #1A6495;
	--pf-primary-dark: #103E5F;
	--pf-primary-mid: #5A87A3;
	--pf-primary-soft: #8FB0C6;
	--pf-blue-tint: #E9F0F5;

	/* ---- Warm neutrals ---- */
	--pf-bg-warm: #F4F2EF;   /* alternating section background */
	--pf-bg-light: #FAF9F7;
	--pf-line: #E4E0DA;      /* warm hairline */

	/* ---- Text ---- */
	--pf-ink: #2A2D2C;
	--pf-ink-soft: #585A56;
	--pf-white: #FFFFFF;

	/* ---- Accent + functional ---- */
	--pf-accent: #3F6480;    /* slate: dot-spine motif, blobs, dividers */
	--pf-cta-band: #103E5F;  /* deep-blue CTA band, white text */
	--pf-star: #C4881E;      /* gold: review stars ONLY */
	--pf-flag-bg: #FBF2F0;   /* soft-red contraindication / red-flag callout */
	--pf-flag-ink: #9E4233;

	/* ---- Semantic aliases ---- */
	--pf-bg: var(--pf-white);
	--pf-text: var(--pf-ink);
	--pf-text-muted: var(--pf-ink-soft);
	--pf-link: var(--pf-primary);
	--pf-link-hover: var(--pf-primary-dark);
	--pf-border: var(--pf-line);

	/* ---- Typography ---- */
	--pf-font-head: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pf-font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--pf-fs-eyebrow: 0.8125rem;   /* 13px, tracked caps */
	--pf-fs-body: 1rem;           /* 16px */
	--pf-fs-body-sm: 0.9375rem;   /* 15px */
	--pf-fs-lead: 1.1875rem;      /* 19px intro */
	--pf-fs-h4: 1.25rem;          /* 20px */
	--pf-fs-h3: 1.4375rem;        /* 23px */
	--pf-fs-h2: 1.75rem;          /* 28px */
	--pf-fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3rem); /* 32 -> 48px */
	--pf-fs-display: clamp(2.4rem, 1.4rem + 4vw, 3.5rem);

	--pf-lh-body: 1.7;
	--pf-lh-tight: 1.2;
	--pf-lh-heading: 1.15;

	--pf-fw-body: 400;
	--pf-fw-semibold: 600;
	--pf-fw-bold: 700;
	--pf-fw-extrabold: 800;
	--pf-tracking-caps: 0.08em;

	/* ---- Spacing scale (0.25rem base) ---- */
	--pf-space-1: 0.25rem;
	--pf-space-2: 0.5rem;
	--pf-space-3: 0.75rem;
	--pf-space-4: 1rem;
	--pf-space-5: 1.5rem;
	--pf-space-6: 2rem;
	--pf-space-7: 3rem;
	--pf-space-8: 4rem;
	--pf-space-9: 5rem;
	--pf-space-10: 6.5rem;

	--pf-section-y: clamp(3rem, 2rem + 4vw, 6rem); /* vertical rhythm per band */

	/* ---- Layout ---- */
	--pf-container: 1200px;
	--pf-container-wide: 1320px;
	--pf-measure: 68ch;      /* readable prose width */
	--pf-gutter: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);

	/* ---- Radius ---- */
	--pf-radius-sm: 10px;
	--pf-radius: 16px;       /* cards */
	--pf-radius-lg: 22px;    /* large media */
	--pf-radius-chip: 12px;  /* icon chips */
	--pf-radius-pill: 999px; /* buttons */

	/* ---- Shadow (soft, warm-tinted) ---- */
	--pf-shadow-sm: 0 1px 2px rgba(16, 62, 95, 0.06);
	--pf-shadow: 0 10px 30px rgba(16, 62, 95, 0.08);
	--pf-shadow-lg: 0 20px 50px rgba(16, 62, 95, 0.12);
	--pf-shadow-card: 0 6px 24px rgba(42, 45, 44, 0.07);

	/* ---- Motion ---- */
	--pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pf-dur: 0.25s;

	/* ---- Z-index ---- */
	--pf-z-header: 100;
	--pf-z-sticky-bar: 90;
	--pf-z-popup: 200;
}

@media (prefers-reduced-motion: reduce) {
	:root { --pf-dur: 0.001s; }
}