/* 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);
	/* The widest a game cover is ever rendered, and so the width of the rail
	   card that frames one. It is wider than the rail itself, so the cap never
	   binds beside an article; it binds where the rail stops being a rail.
	   Below 900px .ja-rail becomes `width: auto` and stacks under the prose, and
	   a cover at 100% of that was rendered at around 830px wide and 1,100px
	   tall from a 795x1060 file: an upscaled billboard where a card belongs. */
	--ja-cover-max: calc(var(--ja-root) * 20);
}