/* =============================================================================
   tokens.css: the design language as custom properties
   -----------------------------------------------------------------------------
   Source of truth: lychee/copy/design-language.md ("Tokens"). theme.json carries
   the same colours, fonts and sizes for the block editor; keep the two in step.

   Rules that hold everywhere:
   - Red is a fill only, never text, at most twice per screen.
   - Gold appears on lineage pages only, as a fill behind ink.
   - Every Bodoni size uses the lowest optical size ("opsz" 6) so its hairlines
     read from a distance (Ian, 13 Nov 2026); titles and display are 700.
   ============================================================================= */

:root {
	/* Colour */
	--ink: #141414;          /* text, the line of descent, icons */
	--paper: #F2F2F0;        /* page ground */
	--seamless: #E4E3DF;     /* surfaces: bands, mats, alternate rows */
	--grey: #5E5E5E;         /* secondary text, labels, captions */
	--red: #E66C42;          /* Pignatelli red, measured from the crest: fill only */
	--red-press: #CF5A32;    /* button hover and pressed fill */
	--gold: #AC883E;         /* crest gold: lineage pages only */
	--night: #141414;        /* the one dark ground: hero card, press band */
	--night-grey: #A8A8A6;   /* secondary text on night (7.9:1) */

	/* Type: families (self-hosted, see theme.json fontFace) */
	--display: "Bodoni Moda", Georgia, serif;
	--text: "Instrument Sans", system-ui, sans-serif;

	/* Type: the five sizes (fluid). Any screen shows at most three. */
	--step-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);         /* his name, page titles, figures */
	--step-title: clamp(2rem, 1.3rem + 3vw, 4rem);             /* section titles, unit titles */
	--step-lede: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);      /* intros, quotes, list titles */
	--step-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);       /* body, 17 to 19 px */
	--step-label: .9375rem;                                    /* eyebrows, labels, captions, 15 px */
	--eyebrow-size: var(--step-label);
	--eyebrow-colour: var(--grey);

	/* Space (fluid, 4 px base). Section gaps are always larger than gaps inside a section. */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: clamp(12px, .6rem + .4vw, 16px);
	--s-4: clamp(16px, .8rem + .6vw, 24px);
	--s-5: clamp(24px, 1.2rem + 1vw, 40px);
	--s-6: clamp(40px, 2rem + 2vw, 64px);
	--s-section: clamp(96px, 4rem + 8vw, 220px);

	/* Frame */
	--gutter: clamp(16px, 4vw, 64px);   /* equal outer margins */
	--line-gutter: 0px;                 /* room for the line of descent: set from 1024 px below */
	--measure: 66ch;                    /* default paragraph measure (long reads use 32em, see templates.css) */
	--header-h: 72px;

	/* Motion */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--dur-in: 620ms;      /* flow entrances */
	--dur-quick: 180ms;   /* hover and focus */
	--dur-wipe: 900ms;    /* reveals and the page morph */

	/* The scroll-craft engine (assets/css/scrollcraft.css) themed with the tokens above */
	--sc-canvas: var(--paper);
	--sc-surface: var(--seamless);
	--sc-ink: var(--ink);
	--sc-ink-soft: var(--grey);
	--sc-accent: var(--red);
	--sc-accent-ink: var(--ink);
	--sc-font-display: var(--display);
	--sc-font-text: var(--text);
	--sc-gutter: var(--gutter);
}

/* The line of descent lives in the left margin on wide screens */
@media (min-width: 1024px) {
	:root { --line-gutter: clamp(40px, 5vw, 88px); }
}