/* THE HANGMAN design tokens. Colors resolve to theme.json presets: the only place hex values live. */
:root {
	--hm-navy: var(--wp--preset--color--navy);
	--hm-orange: var(--wp--preset--color--orange);
	--hm-yellow: var(--wp--preset--color--yellow);
	--hm-cream: var(--wp--preset--color--cream);
	--hm-ink: var(--wp--preset--color--ink);
	--hm-sky: var(--wp--preset--color--sky);

	/* Derived surfaces (mixed from tokens, never new hues). */
	--hm-paper: color-mix(in srgb, var(--hm-cream) 45%, white);
	--hm-cream-deep: color-mix(in srgb, var(--hm-cream) 88%, var(--hm-orange));
	--hm-ink-soft: color-mix(in srgb, var(--hm-ink) 78%, var(--hm-cream));
	--hm-dot: color-mix(in srgb, color-mix(in srgb, var(--hm-orange) 18%, var(--hm-ink)) 11%, transparent); /* warm paper dot */
	--hm-dot-light: color-mix(in srgb, var(--hm-navy) 40%, transparent); /* dark sky dot (bible: dark dots on bright color) */
	--hm-dot-orange: color-mix(in srgb, var(--hm-orange) 70%, var(--hm-ink));
	--hm-dot-yellow: color-mix(in srgb, var(--hm-yellow) 70%, var(--hm-orange));
	--hm-sky-light: color-mix(in srgb, var(--hm-sky) 72%, white);
	--hm-sky-deep: color-mix(in srgb, var(--hm-sky) 62%, var(--hm-navy));
	--hm-cloud-line: color-mix(in srgb, var(--hm-sky) 50%, var(--hm-navy));

	--hm-font-display: var(--wp--preset--font-family--display);
	--hm-font-label: var(--wp--preset--font-family--label);
	--hm-font-body: var(--wp--preset--font-family--body);
	/* The bible's second voice: heavy italic humanist sans (ribbons, speech cards, footer bar). Use with font-style: italic; font-weight: 800. */
	--hm-font-voice: var(--wp--preset--font-family--body);

	--hm-fs-body: 1.0625rem;
	--hm-fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	--hm-fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--hm-fs-h2: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	--hm-fs-h1: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

	--hm-stroke: 3px;
	--hm-stroke-lg: 4px;
	--hm-line: var(--hm-stroke) solid var(--hm-ink);
	--hm-line-lg: var(--hm-stroke-lg) solid var(--hm-ink);
	--hm-shadow-sm: 3px 3px 0 var(--hm-ink);
	--hm-shadow: 6px 6px 0 var(--hm-ink);
	--hm-shadow-lg: 10px 10px 0 var(--hm-ink);
	/* Bible shadow language: yellow offset back-plate with its own ink outline (speech cards, tiles, content boxes). */
	--hm-backplate: 7px 7px 0 0 var(--hm-yellow), 7px 7px 0 3px var(--hm-ink);
	--hm-backplate-sm: 5px 5px 0 0 var(--hm-yellow), 5px 5px 0 3px var(--hm-ink);
	/* Headline ink extrusion: a solid block connected to the letters, down-right. */
	--hm-extrude: .015em .015em 0 var(--hm-ink), .03em .03em 0 var(--hm-ink), .045em .045em 0 var(--hm-ink), .06em .06em 0 var(--hm-ink), .075em .075em 0 var(--hm-ink);
	--hm-radius: 4px; /* STYLEGUIDE: panels 0 to 4px radius */
	--hm-radius-box: 6px; /* bible text boxes */
	--hm-radius-sm: 4px;

	--hm-wide: 1240px;
	--hm-text: 45.5rem; /* about 70 characters of Inter body */
	--hm-gutter: clamp(1rem, 4vw, 2.25rem);
	--hm-section: clamp(2.5rem, 5vw, 4rem);
	--hm-header-h: 68px;
	--hm-dock-h: 72px; /* motion.js replaces this with the measured dock height */

	/* Halftone screens (audit 1.4). Pair each with its size token. */
	--hm-halftone: radial-gradient(circle at center, var(--hm-dot) 1.2px, transparent 1.7px); /* cream paper, 6px */
	--hm-halftone-light: radial-gradient(circle at center, var(--hm-dot-light) 1.4px, transparent 1.9px); /* sky, 9px */
	--hm-halftone-orange: radial-gradient(circle at center, var(--hm-dot-orange) 1.25px, transparent 1.75px); /* orange fills, 7px */
	--hm-halftone-yellow: radial-gradient(circle at center, var(--hm-dot-yellow) .9px, transparent 1.4px); /* yellow fills, 6px */
	--hm-sky-ground: radial-gradient(120% 90% at 55% 42%, var(--hm-sky-light) 0%, var(--hm-sky) 48%, var(--hm-sky-deep) 100%);
	/* 20-point irregular burst (audit 1.7). */
	--hm-burst-20: polygon(53% 0%, 59% 13%, 67% 7%, 68% 20%, 82% 12%, 79% 24%, 87% 27%, 81% 37%, 98% 38%, 87% 47%, 97% 53%, 85% 58%, 96% 69%, 83% 70%, 83% 78%, 72% 75%, 75% 91%, 65% 85%, 62% 99%, 53% 86%, 47% 95%, 42% 84%, 32% 95%, 30% 83%, 20% 86%, 24% 72%, 8% 76%, 16% 64%, 7% 61%, 11% 53%, 2% 47%, 16% 42%, 4% 31%, 19% 31%, 15% 20%, 25% 21%, 24% 8%, 37% 19%, 39% 6%, 47% 13%);
	--hm-plate-shape: polygon(0 9%, 97% 0, 100% 86%, 2.5% 100%);
	/* Brand fx (synced from brand/library/fx). Paths relative to this stylesheet. */
	--hm-fx-plate: url("../brand/fx/plate.svg");
	--hm-fx-plate-bolt: url("../brand/fx/plate-bolt.svg");
	--hm-fx-burst: url("../brand/fx/burst-bible.svg");
	--hm-fx-rays: url("../brand/fx/rays.svg");
	--hm-fx-swash: url("../brand/fx/swash.svg");
	--hm-fx-clouds: url("../brand/fx/cloud-1.svg"), url("../brand/fx/cloud-2.svg"), url("../brand/fx/cloud-3.svg"), url("../brand/fx/cloud-4.svg");
	--hm-paper-image: none; /* Set from PHP when fx/paper-texture.webp is synced. */
	--hm-ease: cubic-bezier(.34, 1.56, .64, 1); /* STYLEGUIDE comic pop. Alias of --hm-ease-pop for one release. */

	/* Motion tokens (docs/spec/MOTION.md 2.1). Durations and easings only live here. */
	--hm-dur-instant: 80ms;
	--hm-dur-fast: 150ms;
	--hm-dur-base: 240ms;
	--hm-dur-slam: 280ms;
	--hm-dur-pop: 320ms;
	--hm-dur-slow: 400ms;
	--hm-dur-ink: 560ms;
	--hm-dur-sfx: 640ms;
	--hm-dur-idle: 4800ms;
	--hm-ease-standard: cubic-bezier(.2, 0, 0, 1);
	--hm-ease-out: cubic-bezier(0, 0, .2, 1);
	--hm-ease-in: cubic-bezier(.4, 0, 1, 1);
	--hm-ease-slam: cubic-bezier(.12, .9, .18, 1.04);
	--hm-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
	--hm-ease-ink: cubic-bezier(.6, 0, .2, 1);
	--hm-ease-snap: steps(3, end);
	--hm-ease-thunk: var(--hm-ease-slam);
	--hm-ease-swing: var(--hm-ease-pop);
	--hm-stagger: 60ms;
	--hm-stagger-tight: 40ms;
	--hm-shift-xs: 4px;
	--hm-shift-sm: 8px;
	--hm-shift-md: 16px;
	--hm-pop-from: .9;
	--hm-slam-from: 1.12;
	--hm-tilt: -6deg;
	--hm-swing: 8deg;
	--hm-press: 3px;
}
@supports (animation-timing-function: linear(0, 1)) {
	:root {
		--hm-ease-thunk: linear(0, .5 16%, .92 30%, 1.05 42%, 1.01 56%, .995 72%, 1);
		--hm-ease-swing: linear(0, .62 12%, 1.14 26%, .93 41%, 1.04 56%, .985 72%, 1.005 86%, 1);
	}
}