/* ---------------------------------------------------------------------------
   Design tokens - Pi Kitchen & Bath Fairfax

   The client asked for the same design language as the Alexandria site, so
   every value below is lifted from kitchen-bath-alexandria-homepage.json
   rather than invented here. Keep the two sites in step: if Alexandria moves,
   move these with it.
--------------------------------------------------------------------------- */

:root {
	/* Brand ------------------------------------------------------------- */
	--pi-red: #e20e20;          /* primary action */
	--pi-red-hover: #c40c1c;    /* button hover, per Alexandria spec */
	--pi-red-deep: #a80a18;     /* pressed / deep accents */
	--pi-red-tint: #fdecec;     /* soft wash */
	--pi-red-tint-2: #fbdddf;   /* wash border */
	--pi-gold: #edb169;         /* sparing warm accent */

	/* Neutrals ---------------------------------------------------------- */
	--pi-ink: #1e1b16;          /* headings + dark ground */
	--pi-ink-2: #211d17;        /* dark section ground */
	--pi-footer: #211D17;   /* Alexandria footer ground */
	--pi-body: #4d463c;         /* body copy */
	--pi-muted: #5c554a;        /* meta, captions */
	--pi-cream: #f5f1eb;        /* primary alternating ground */
	--pi-cream-2: #f7f3ec;      /* secondary tint */
	--pi-cream-3: #efe9dd;
	--pi-line: #eae3d6;         /* hairlines on cream */
	--pi-line-2: #e0d6c4;       /* stronger hairline */
	--pi-surface: #ffffff;
	--pi-on-dark: #f5f1eb;
	--pi-on-dark-muted: #b4ab9c;

	/* Type -------------------------------------------------------------- */
	--pi-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pi-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pi-font-accent: 'Archivo', system-ui, sans-serif;   /* phone numbers, small labels */

	/* Scale matches Alexandria: H1 62/48/36, H2 40, body 16. */
	--pi-h1: clamp(2.25rem, 4.6vw, 3.875rem);   /* 36 -> 62 */
	--pi-h2: clamp(1.75rem, 3vw, 2.5rem);       /* 28 -> 40 */
	--pi-h3: clamp(1.2rem, 1.6vw, 1.4rem);      /* 19 -> 22 */
	--pi-lead: clamp(1.0625rem, 1.25vw, 1.1875rem);
	--pi-base: 1rem;
	--pi-small: .9375rem;
	--pi-eyebrow: .6875rem;

	/* Geometry ---------------------------------------------------------- */
	/* Documented three-tier rule, applied without exception:
	   pill   -> buttons and chips
	   card   -> cards, media, panels
	   small  -> inputs and badges                                        */
	--pi-r-pill: 999px;
	--pi-r-card: 18px;
	--pi-r-sm: 10px;

	--pi-shell: 1200px;
	--pi-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--pi-section-y: clamp(4rem, 7vw, 6.5rem);

	/* Elevation - warm-tinted to the cream ground, never pure black ------ */
	--pi-shadow-sm: 0 1px 2px rgba(30, 27, 22, .05), 0 4px 14px rgba(30, 27, 22, .06);
	--pi-shadow-md: 0 2px 8px rgba(30, 27, 22, .07), 0 20px 48px rgba(30, 27, 22, .11);

	/* Motion ------------------------------------------------------------ */
	--pi-ease: cubic-bezier(.16, 1, .3, 1);
	--pi-dur: .55s;
}