/**
 * Jersey Juice Blocks — design tokens
 *
 * Values sampled directly from the supplied Cleanse.pdf design.
 * Change a value here and every block follows.
 */

:root {
	/* Colour */
	--jjc-accent: #37c1d1;
	--jjc-accent-dark: #2aa5b4;
	--jjc-accent-soft: #a8e4eb;
	--jjc-page: #f9f9f9;
	--jjc-surface: #ffffff;
	--jjc-ink: #1a1a1a;
	--jjc-body: #3b3b3b;
	--jjc-muted: #8a8a8a;
	--jjc-rule: #d9d9d9;
	--jjc-numeral: #e3e3e3;
	--jjc-dot-ring: #14343f;

	/* Type */
	--jjc-font-display: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--jjc-font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--jjc-font-numeral: var(--jjc-font-display);

	/* Layout */
	--jjc-max: 1240px;
	--jjc-pad-x: 24px;
	--jjc-gap: 36px;
	--jjc-section-y: 96px;

	/* Shape */
	--jjc-radius: 6px;
	--jjc-radius-card: 14px;
}

/* Shared building blocks ------------------------------------------------- */

/* The blocks size their own padding, so they must not depend on the active
   theme happening to set a border-box reset. Scoped to jjc- classes only. */
[class*="jjc-"],
[class*="jjc-"] *,
[class*="jjc-"] ::before,
[class*="jjc-"] ::after {
	box-sizing: border-box;
}

.jjc-container {
	max-width: var(--jjc-max);
	margin-inline: auto;
	padding-inline: var(--jjc-pad-x);
}

.jjc-btn {
	display: inline-block;
	background: var(--jjc-accent);
	color: #fff;
	font-family: var(--jjc-font-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--jjc-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.jjc-btn:hover,
.jjc-btn:focus {
	background: var(--jjc-accent-dark);
	color: #fff;
	text-decoration: none;
}

.jjc-btn:focus-visible {
	outline: 2px solid var(--jjc-ink);
	outline-offset: 3px;
}

/* Shared type roles ------------------------------------------------------ */

.jjc-display {
	font-family: var(--jjc-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--jjc-ink);
	margin: 0;
}

.jjc-prose {
	font-family: var(--jjc-font-text);
	font-size: 17px;
	line-height: 1.65;
	color: var(--jjc-body);
}

.jjc-prose > :first-child {
	margin-top: 0;
}

.jjc-prose > :last-child {
	margin-bottom: 0;
}

.jjc-prose p {
	margin: 0 0 1.15em;
}

.jjc-prose a {
	color: inherit;
	text-underline-offset: 0.18em;
}

.jjc-prose ul {
	margin: 0.6em 0 1.15em;
	padding-left: 1.2em;
}

.jjc-prose li {
	margin-bottom: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
	.jjc-btn {
		transition: none;
	}
}