/* The design tokens. Colours and font sizes may only be written here; the
 * build lists any literal found in another stylesheet or a style="" attribute.
 * Scales are short on purpose: a value off the scale is a value that drifts.
 * Colours were sampled from the TalkDisain mockups at 1:1, not eyeballed. */
:root {
	color-scheme: light;

	/* ---------------------------------------------------------- colour -- */
	--plum: #231621;        /* dark ground: header pages, booking panel, footer */
	--plum-line: #49414b;   /* dividers and stripes on --plum */
	--muted: #6e6171;       /* secondary text, outline borders */
	--cream: #efebe4;       /* text on --plum and --green */
	--pink: #f2c3b8;
	--beige: #e1ded1;
	--green: #759867;
	--green-deep: #4d6d44;
	--coral: #e05f65;       /* every call to action */
	--ink: #000000;         /* headings on light grounds, as drawn */
	--white: #ffffff;
	--line: #c4c2b6;        /* dividers on --beige and --pink */

	/* Photo stand-ins until real photography exists. Striped so an empty
	   slot can never be mistaken for a finished one. */
	--ph-a: rgba(35, 22, 33, .38);
	--ph-b: rgba(35, 22, 33, .28);
	--ph-ink: rgba(239, 235, 228, .85);
	/* Keeps white card titles legible over a photo. */
	--scrim: linear-gradient(to top, rgba(35, 22, 33, .75), rgba(35, 22, 33, 0) 55%);

	/* ------------------------------------------------------------ type -- */
	--font: 'Outfit Variable', system-ui, sans-serif;
	--fs-tiny: 11px;    /* booking panel captions */
	--fs-small: 14px;
	--fs-body: 18px;
	--fs-lead: 20px;
	--fs-h3: 24px;
	--fs-h2: 32px;
	--fs-stat: 40px;
	--fs-h1: 64px;
	--fs-h1-sm: 40px;   /* below 800px; an override, not a second scale */

	--fw-body: 400;
	--fw-label: 500;
	--fw-ui: 600;
	--fw-display: 800;

	--lh-display: 1.05;
	--lh-heading: 1.25;
	--lh-body: 1.45;

	/* ----------------------------------------------------------- space -- */
	--sp-8: 8px;
	--sp-16: 16px;
	--sp-24: 24px;
	--sp-32: 32px;
	--sp-48: 48px;
	--sp-64: 64px;
	--sp-120: 120px;    /* section padding, desktop */
	--container: 1296px;
	--gutter: clamp(16px, 5vw, 72px);

	/* ---------------------------------------------------------- radius -- */
	--r-sm: 14px;
	--r-card: 24px;
	--r-panel: 32px;
	--r-pill: 999px;
}