:root {
	--block-accent: #3DAABD;
	--block-accent-deep: #2B8A9A;
	--block-accent-pale: #8cd5e5;
	--block-accent-glow: rgba(61, 170, 189, .15);

	/* The accent used as INK rather than as a fill. A brand accent can be light
	   enough to work as a background and still be illegible as small text on
	   white — rete's #00C0C6 is 2.24:1 there. Splitting the two roles lets such
	   a theme keep its accent for fills and point text/icons at a darker step,
	   without every block having to know. Defaults to the accent itself, so a
	   theme that never sets it renders exactly as before. */
	--block-accent-text: var(--block-accent, #3DAABD);
	/* The mirror image: what sits ON an accent fill. White is only correct for
	   a mid-to-dark accent (ALI's own is 2.73:1, already thin); a light accent
	   needs dark ink instead. Set per site; blocks never hardcode #fff again. */
	--block-accent-ink: #fff;
	--block-dark: #1a2332;
	/* Ink on the dark surface — ONE colour, from which every dark-variant rule
	   derives its opacity step via color-mix. The variants used to hardcode
	   nineteen different rgba(255,255,255,X) values, so anything wanting a
	   different ink (a light card on a dark band, or a site whose --block-dark
	   is a mid-tone rather than near-black) had to re-list every one of them —
	   and missing a single state, such as :hover, is invisible until someone
	   clicks. Redefine this token on a section and the whole scale follows.
	   --block-dark-ink-soft is kept as the body-copy step for the blocks that
	   name it directly. */
	--block-dark-ink: #fff;
	--block-dark-ink-soft: color-mix(in srgb, var(--block-dark-ink) 85%, transparent);
	--block-bg: #faf9f7;
	--block-bg-sky: #E8F4F6;
	--block-bg-warm: #F5F2ED;
	--block-warm-gray: #f2f0ed;

	/* Bar-chart series colors. A chart often wants a data color that is neither
	   the brand accent nor the dark surface — crostacei plots its bars in a navy
	   that appears nowhere else in its brown/red palette. These default to steps
	   of --block-dark so a theme that never sets them still gets a coherent
	   chart; override them to give charts their own scale. */
	--block-chart-strong: var(--block-dark, #1a2332);
	--block-chart-soft: color-mix(in srgb, var(--block-dark, #1a2332) 55%, #fff);
	--block-chart-muted: color-mix(in srgb, var(--block-dark, #1a2332) 22%, #fff);
	--block-text: #2c2c2c;
	--block-text-secondary: #5a5a5a;
	--block-radius: 16px;
	--block-radius-sm: 10px;
	--block-btn-radius: 50px;
	--block-font-heading: 'DM Serif Display', Georgia, serif;
	--block-font-body: 'Karla', system-ui, sans-serif;

	/* Derived by default, overridable on their own. A theme whose heading face
	   has real weights (DM Serif Display only ships 400) or whose headings are
	   not the same color as --block-dark had to re-declare .ali-heading to say
	   so, which shadowed the plugin's whole rule. Same for a second brand color
	   used on button hover. */
	--block-heading-weight: 400;
	--block-heading-color: var(--block-dark, #1a2332);
	/* --block-heading-transform / --block-heading-tracking are deliberately NOT
	   declared here: a theme that sets them (e.g. uppercase + .02em) gets them on
	   every block h1–h3; left undeclared they change nothing (see base.css). */
	--block-btn-hover-bg: var(--block-accent-deep, #2B8A9A);
	/* Hover fill and base fill can need different ink: a theme whose button goes
	   light-accent → dark-brand on hover flips from dark text to white. */
	--block-btn-hover-ink: var(--block-accent-ink, #fff);
}