/* Self hosted, so a page load makes no third party font request. The old
   Customizer CSS imported Inter from fonts.googleapis.com: that import goes
   away with that record. font-display: swap keeps text visible while the file
   arrives, and the stack below it is a real fallback, not a decoration. */
@font-face {
	font-family: Inter;
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Inter;
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/*
 * Design tokens. Every value the theme renders comes from here.
 *
 * Sizes derive from --ja-root, never from `rem`. A `rem` resolves against the
 * document root, and this site shipped a theme that set that root to 10px,
 * which rendered the games plugin at 62% of its intended size until August
 * 2026. Deriving from a token the theme owns removes the whole class of bug.
 *
 * Contrast, measured against --ja-bg, WCAG relative luminance formula:
 *   --ja-ink         11.11:1
 *   --ja-muted        5.30:1   (14px and up only)
 *   --ja-accent       7.28:1
 *   --ja-rule         1.32:1   (decorative divider, see note below)
 *   --ja-rule-strong  3.17:1   (meaningful non-text UI, see note below)
 *
 * --ja-rule is a hairline for dividers and panel edges. It is decorative:
 * WCAG 1.4.11 does not require a divider to clear 3:1, and it is not meant
 * to read as a boundary you rely on to see. --ja-rule-strong is for borders
 * that ARE meaningful non-text UI, form inputs, button outlines, control
 * edges, and it clears the 3:1 the spec asks for there.
 *
 * --ja-bg-sunken is measured on its own, against the two text colours that
 * sit on it. It has three legitimate uses: the masthead/footer chrome bands,
 * the code-block shelf inside prose (.ja-prose pre), and the card thumbnail
 * well (.ja-card-thumb) that shows behind an image before it paints. All
 * three reuse the same "recessed" surface for different reasons (chrome,
 * a content panel, an empty image slot) but sit under the same body text
 * and so need the same numbers:
 *   --ja-ink on --ja-bg-sunken     12.14:1   (clears the 7:1 body-ink floor)
 *   --ja-muted on --ja-bg-sunken    5.79:1   (clears the 4.5:1 secondary floor)
 *
 * --ja-bg-2 is the rail's game-card surface (.ja-gamecard), the first thing
 * in the codebase to sit on it, measured against the three colours it hosts:
 *   --ja-ink on --ja-bg-2           10.25:1   (clears the 7:1 body-ink floor)
 *   --ja-ink-strong on --ja-bg-2    13.18:1   (clears the 7:1 body-ink floor)
 *   --ja-accent on --ja-bg-2         6.72:1   (clears the 4.5:1 secondary floor)
 */

:root {
	--ja-root: 16px;

	/* palette: warm archive, dark only */
	--ja-bg: #242118;
	--ja-bg-2: #2c271d;
	/* recessed chrome bands (masthead, footer): darker than --ja-bg so they
	   read as a sunken shelf, not a raised panel. See contrast note above. */
	--ja-bg-sunken: #1b1913;
	--ja-ink: #ddd6c6;
	--ja-ink-strong: #f6f1e6;
	--ja-muted: #9c9384;
	--ja-accent: #d8a657;
	--ja-accent-ink: #241f16;
	--ja-rule: #3a352b;
	--ja-rule-strong: #756e5c;
	--ja-good: #79a06a;

	/* type */
	--ja-serif: "Iowan Old Style", "Source Serif 4", "Palatino Linotype", Palatino, Georgia, serif;
	--ja-sans: Inter, "Inter var", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--ja-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	--ja-size-body: calc(var(--ja-root) * 1.1875);   /* 19px */
	--ja-size-guide: calc(var(--ja-root) * 1.125);   /* 18px */
	--ja-size-meta: calc(var(--ja-root) * 0.875);    /* 14px */
	--ja-size-label: calc(var(--ja-root) * 0.75);    /* 12px, the floor */
	--ja-size-h1: clamp(calc(var(--ja-root) * 1.875), 5vw, calc(var(--ja-root) * 2.625));
	--ja-size-h2: clamp(calc(var(--ja-root) * 1.375), 3vw, calc(var(--ja-root) * 1.6875));
	--ja-leading: 1.7;
	--ja-leading-tight: 1.2;
	--ja-measure: 70ch;

	/* space */
	--ja-gap: calc(var(--ja-root) * 1.25);
	--ja-gap-lg: calc(var(--ja-root) * 2.5);
	--ja-radius: 5px;
	--ja-shell: calc(var(--ja-root) * 74);
}