/*
 * The single source of truth. The only file in the theme allowed to contain a raw value.
 * Components reference the semantic layer, never the brand layer.
 *
 * Only the holding poster has been designed so far. Colour comes from the brand summary and the
 * poster's measurements from its artboard; the type and space ladders are provisional until the
 * site design lands.
 */

:root {
	/* ---------------------------------------------------------------------
	 * 1. Brand colour, named as the brand summary names it
	 * ------------------------------------------------------------------ */

	--llm-coral: #e6826e;        /* Coral Confidence */
	--llm-sunshine: #f2d57b;     /* Sunshine */
	--llm-green: #adbe70;        /* Growing Green */
	--llm-blue: #8cb2cb;         /* Calm Blue */
	--llm-ink: #4d4d4c;          /* Meadow Mist */
	--llm-white: #ffffff;

	/* Calm Blue as the poster tints it: 13% for the page, 33% for the band. */
	--llm-blue-wash: #f0f5f8;
	--llm-blue-tint: #d9e6ee;

	/* ---------------------------------------------------------------------
	 * 2. Semantic colour
	 * ------------------------------------------------------------------ */

	--color-bg: var(--llm-blue-wash);
	--color-bg-band: var(--llm-blue-tint);

	--color-text: var(--llm-ink);            /* 7.71 on the wash, 6.65 on the band */
	--color-heading: var(--llm-ink);
	--color-link: var(--llm-ink);
	--color-link-hover: var(--llm-ink);

	/* The poster sets its words in Calm Blue, as designed: 2.05 on the wash and 1.77 on the
	   band, which is below AA. Pointing this at --llm-ink clears it. */
	--color-poster-text: var(--llm-blue);

	/* ---------------------------------------------------------------------
	 * 3. Type
	 *
	 * Mundial Narrow Variable comes from the Adobe Fonts project named in
	 * inc/enqueue.php. It is a variable face, so any weight is real. The
	 * brand's second face, Hoss Round Slab, is only in the logo so far.
	 * ------------------------------------------------------------------ */

	--font-body: 'mundial-narrow-variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-display: var(--font-body);

	--weight-regular: 400;
	--weight-bold: 700;

	--leading: 1.6;
	--leading-heading: 1.2;
	--leading-poster: 1.186;    /* measured: 55.6pt between the two contact lines at 46.9pt */

	/* The designer sets every line at 92% horizontal scale. */
	--type-squeeze: 0.92;

	/* ---------------------------------------------------------------------
	 * 4. Type scale, provisional. A higher number is always bigger.
	 * ------------------------------------------------------------------ */

	--font-3: 1rem;                                       /* 16 */
	--font-4: 1.125rem;                                   /* 18        body */
	--font-6: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22 -> 28 */
	--font-8: clamp(2rem, 1.5rem + 2.2vw, 3rem);          /* 32 -> 48 */

	/* ---------------------------------------------------------------------
	 * 5. Space scale. --space-N is N x 8px.
	 * ------------------------------------------------------------------ */

	--space-05: 0.25rem;   /* 4 */
	--space-1: 0.5rem;     /* 8 */
	--space-2: 1rem;       /* 16 */
	--space-3: 1.5rem;     /* 24 */
	--space-4: 2rem;       /* 32 */
	--space-6: 3rem;       /* 48 */
	--space-12: 6rem;      /* 96 */

	/* ---------------------------------------------------------------------
	 * 6. Layout
	 * ------------------------------------------------------------------ */

	--container: 1240px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(var(--space-6), 7vw, var(--space-12));

	/* ---------------------------------------------------------------------
	 * 7. Shape, focus, motion
	 * ------------------------------------------------------------------ */

	--radius-sm: 4px;
	--border-hairline: 1px;
	--tap-min: 1.5rem;          /* WCAG 2.5.8 target size */

	--focus-width: 2px;
	--focus-offset: 3px;
	--focus-color: var(--llm-ink);

	--duration: 200ms;
	--duration-reveal: 700ms;   /* entrances, which want longer than an interface response */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	--strip-delay: 300ms;       /* a beat after the page paints, so the first quarter is seen */
	--strip-step: 70ms;         /* between one quarter of the strip and the next */

	/* ---------------------------------------------------------------------
	 * 8. The poster
	 *
	 * The holding design is a 2523 x 1836pt artboard. One point of it is
	 * --poster-unit, sized so the whole poster fits the viewport: by height
	 * on a desktop, by the 976pt lockup on a phone. Never more than 1px, so
	 * the poster stops growing at the size it was drawn.
	 * ------------------------------------------------------------------ */

	--poster-unit: clamp(0.3px, min((100vw - 2 * var(--gutter)) / 976, 100vh / 1836), 1px);

	/* The strip is 184.77pt tall on the artboard. It tiles sideways, so it has a floor. */
	--strip-height: max(3rem, calc(184.77 * var(--poster-unit)));
}

@supports (height: 100svh) {
	:root {
		--poster-unit: clamp(0.3px, min((100vw - 2 * var(--gutter)) / 976, 100svh / 1836), 1px);
	}
}