/*
 * P-Member design tokens (UI-UX DECISIONS D1-D29 + PM-D30). Shared by every P-Member screen:
 * the public join page and web card (public/pxpm.css), the counter scanner (public/pxpm-scan.css)
 * and the P-Console / wp-admin app (admin/pxpm-app.css).
 *
 * Rules:
 * - Heebo only. Body 16px. Page background #FBFAF7, ink #191512, muted #7A7166.
 * - Radius 20 everywhere, 999 for pills, 8 for checkboxes and switches. Controls 50px tall.
 * - Cards are flat: white with a 1px line border, no shadow. Shadow only on things that float.
 * - Public pages (join, web card, scanner): text on sand is #111 (PM-D30, 9.65:1). In P-Console the
 *   portal's own look stays (light text on sand, UI-UX D1) - scope that with .pxpm-portal.
 * - Public pages keep a visible keyboard focus ring (IS 5568 AA). Never remove it there.
 * - No emojis. Icons are inline line SVG: 24 grid, stroke 1.75, round caps and joins, currentColor.
 * - Business theme colours come in as --p-* (from P-Link) and must pass 4.5:1 for text.
 */
:root {
	/* colour */
	--pm-bg: #FBFAF7;
	--pm-card: #FFFFFF;
	--pm-ink: #191512;
	--pm-muted: #7A7166;
	--pm-line: #E6DFD6;
	--pm-sand: #D5B398;
	--pm-sand-soft: #F0E3D8;
	--pm-sand-deep: #8A5A1F;   /* links and small labels on white */
	--pm-on-sand: #111111;     /* public pages: text on sand (PM-D30) */
	--pm-hover: #111111;       /* button hover background */
	--pm-on-hover: #FFFFFF;
	--pm-ok: #2F7D4F;
	--pm-ok-soft: #E5F2EA;
	--pm-warn: #B4561F;
	--pm-warn-soft: #FBEEE5;
	--pm-error: #B42318;
	--pm-error-soft: #FDE8E6;
	--pm-focus: #8A5A1F;

	/* type (D10, D11): only these sizes and weights. Inputs always 16 (no iPhone zoom) */
	--pm-font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--pm-text-xs: 12px;     /* small labels, captions, badges */
	--pm-text-sm: 14px;     /* secondary text, hints */
	--pm-text: 16px;        /* body, buttons, inputs */
	--pm-text-lg: 18px;     /* emphasis */
	--pm-text-title: 22px;  /* card titles */
	--pm-text-page: 28px;   /* page titles */
	--pm-text-hero: 36px;   /* hero titles (28 on phones) */
	--pm-text-num: 56px;    /* hero numbers, e.g. "4/10" on the scanner (36 on phones) */
	--pm-lh: 1.6;
	--pm-lh-title: 1.25;
	--pm-lh-num: 1.05;
	--pm-w-regular: 400;    /* body */
	--pm-w-medium: 500;     /* buttons, labels, tabs */
	--pm-w-bold: 700;       /* headings, card titles */
	--pm-w-black: 800;      /* big numbers, hero titles */

	/* shape */
	--pm-r: 20px;
	--pm-r-pill: 999px;
	--pm-r-small: 8px;          /* checkbox, switch */
	--pm-h: 50px;               /* buttons and inputs */
	--pm-h-compact: 40px;       /* admin tables and toolbars only (D14) */
	--pm-border: 1px solid var(--pm-line);
	--pm-shadow-float: 0 8px 28px rgba(25, 21, 18, .14); /* sheets, toasts, menus only */

	/* space (D15) */
	--pm-s1: 4px;
	--pm-s2: 8px;
	--pm-s3: 12px;
	--pm-s4: 16px;
	--pm-s5: 20px;
	--pm-s6: 24px;
	--pm-s7: 32px;
	--pm-s8: 48px;
	--pm-gutter: 16px;          /* phone side gutter */

	/* motion (D24): two speeds, one easing, no bounce */
	--pm-fast: .15s;
	--pm-slow: .3s;
	--pm-ease: cubic-bezier(.2, .7, .2, 1);

	/* icons (D23) */
	--pm-icon: 24px;
	--pm-icon-stroke: 1.75;
}

/* Visible focus on public P-Member pages (accessibility AA). Add class pxpm-page to <body>. */
.pxpm-page :focus-visible {
	outline: 2px solid var(--pm-focus);
	outline-offset: 2px;
}

/* Text for screen readers only */
.pxpm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Line icons: <svg class="pxpm-i" viewBox="0 0 24 24" aria-hidden="true">…</svg> */
.pxpm-i {
	width: var(--pm-icon);
	height: var(--pm-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--pm-icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	.pxpm-page *,
	.pxpm-page *::before,
	.pxpm-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}