/* ==========================================================================
   PixelGR Base: design tokens

   This is the only file you edit to reskin a site. Copy it into the child
   theme, change the values, done. Nothing below this file references a raw
   color or size value.

   One deliberate deviation from the PixelGR px-everywhere rule: font sizes
   are in rem, spacing is in px. Fixed px font sizes ignore the reader's
   browser font-size setting, which is a WCAG 1.4.4 failure and would show up
   in our own Abliven scans. Spacing stays px because the 8px grid should not
   scale with reader font settings.
   ========================================================================== */

:root {

	/* --- Color ------------------------------------------------------------
	   Defaults are a neutral, high-contrast slate set. Every pairing below
	   clears WCAG AAA for body text (7:1) and AA for large text. If you
	   change these, re-check contrast before shipping.
	   -------------------------------------------------------------------- */
	--pxgr-color-primary: #1b3a6b;        /* 10.2:1 on white */
	--pxgr-color-primary-hover: #12294c;
	--pxgr-color-accent: #0f6b5c;         /* 5.9:1 on white, large text and UI only */
	--pxgr-color-ink: #16181d;            /* body text, 16.9:1 on white */
	--pxgr-color-ink-muted: #4a5060;      /* 7.8:1 on white, still AAA */
	--pxgr-color-surface: #ffffff;
	--pxgr-color-surface-alt: #f4f6f9;
	--pxgr-color-surface-dark: #14181f;
	--pxgr-color-on-dark: #f2f4f7;        /* 14.3:1 on surface-dark */
	--pxgr-color-border: #d3d8e0;
	--pxgr-color-focus: #b8410e;          /* deliberately off-brand so focus is never subtle */

	/* --- Type -------------------------------------------------------------
	   Stacks default to system fonts so a fresh install has zero webfont
	   requests. Override per client in the child theme after the webfont is
	   enqueued.
	   -------------------------------------------------------------------- */
	--pxgr-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pxgr-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pxgr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Type scale, 1.25 ratio from a 16px base. */
	--pxgr-text-xs: 0.8rem;      /* 12.8px */
	--pxgr-text-sm: 0.9rem;      /* 14.4px */
	--pxgr-text-base: 1rem;      /* 16px */
	--pxgr-text-lg: 1.25rem;     /* 20px */
	--pxgr-text-xl: 1.563rem;    /* 25px */
	--pxgr-text-2xl: 1.953rem;   /* 31px */
	--pxgr-text-3xl: 2.441rem;   /* 39px */
	--pxgr-text-4xl: 3.052rem;   /* 49px */

	--pxgr-weight-normal: 400;
	--pxgr-weight-medium: 500;
	--pxgr-weight-bold: 700;

	--pxgr-leading-tight: 1.15;
	--pxgr-leading-snug: 1.35;
	--pxgr-leading-normal: 1.65;

	--pxgr-tracking-tight: -0.01em;
	--pxgr-tracking-wide: 0.06em;

	/* --- Space, 8px grid -------------------------------------------------- */
	--pxgr-space-1: 4px;
	--pxgr-space-2: 8px;
	--pxgr-space-3: 16px;
	--pxgr-space-4: 24px;
	--pxgr-space-5: 32px;
	--pxgr-space-6: 48px;
	--pxgr-space-7: 64px;
	--pxgr-space-8: 96px;
	--pxgr-space-9: 128px;

	/* --- Layout ----------------------------------------------------------- */
	--pxgr-container: 1200px;
	--pxgr-container-narrow: 760px;
	--pxgr-gutter: 24px;
	--pxgr-header-height: 80px;

	/* --- Shape and depth --------------------------------------------------- */
	--pxgr-radius-sm: 4px;
	--pxgr-radius-md: 8px;
	--pxgr-radius-lg: 16px;
	--pxgr-radius-pill: 999px;
	--pxgr-shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
	--pxgr-shadow-md: 0 4px 16px rgba(20, 24, 31, 0.10);
	--pxgr-shadow-lg: 0 12px 40px rgba(20, 24, 31, 0.14);

	/* --- Interaction ------------------------------------------------------
	   Minimum target size is a token, not a magic number, because WCAG 2.2
	   target size (2.5.8) is a recurring finding and every interactive
	   component in this theme references it.
	   -------------------------------------------------------------------- */
	--pxgr-target-min: 24px;
	--pxgr-target-comfortable: 44px;
	--pxgr-focus-width: 3px;
	--pxgr-focus-offset: 2px;
	--pxgr-transition: 180ms ease;
	--pxgr-z-header: 100;
	--pxgr-z-nav: 200;
	--pxgr-z-skip: 300;
}