/**
 * Framework - Colour tokens: the blue pole and the brand gradient
 * ===============================================================
 * The palette had four accents and three of them were pink (--primary #f043ff,
 * --tertiary #e08aff, --quarternary #f383ff), with only --secondary #7a4aff
 * carrying any blue. One token, --primary, did 97 of the accent jobs, so the
 * whole site read magenta (Jens, 2026-09-22: "too magenta/pink, too feminine").
 *
 * Two poles, each with a job:
 *
 *   MAGENTA (--primary)  action  - buttons, links, hover and active states,
 *                                 the CTA. The warm, human half.
 *   BLUE    (--blue)     info    - eyebrows, kickers, labels, meta, quiet
 *                                 icons. The technical half: it is what says
 *                                 "this studio builds things", which is why
 *                                 it sits on the service and process copy.
 *
 * The gradient between them is the signature - blue into purple, the sci-fi
 * note. It is used ONCE per page on the h1 and on a few decorative edges,
 * never as general decoration: repeated, it stops meaning anything.
 *
 * Shades follow the existing palette's steps exactly, so --blue behaves like
 * its siblings: l-N goes darker (x0.91 per step), d-N goes lighter (+16 on the
 * middle channel). Mirrored for the dark theme, see the dark re-skin notes.
 *
 * Added 2026-09-22.
 */

:root {
	/* Blue: #353de3 is Jens' pick from the Photoshop mock. */
	--blue: #353de3;

	/* darker */
	--blue-l-1: #3038cf;
	--blue-l-2: #2c33bc;
	--blue-l-3: #282eab;
	--blue-l-4: #242a9c;

	/* lighter - d-4 is the one that reads on the dark ground (5.4:1) */
	--blue-d-1: #454de3;
	--blue-d-2: #555de3;
	--blue-d-3: #656de3;
	--blue-d-4: #757de3;

	/**
	 * Two gradients, because text and surfaces need different weights.
	 *
	 * --gradient-brand is the raw pair from the mock (#353de3 -> #931ca1):
	 * deep enough to sit behind content, for glows, borders and fills.
	 *
	 * --gradient-heading is the same pair after Jens' Hue/Saturation layer
	 * (+26 saturation, +32 lightness), which is what makes it readable as
	 * TEXT on #080b16. Both ends clear AA: #7177f1 is 5.25:1, #d53de7 5.28:1.
	 */
	--gradient-brand: linear-gradient( 100deg, #353de3 0%, #931ca1 100% );
	--gradient-heading: linear-gradient( 100deg, #7177f1 0%, #d53de7 100% );
}

/**
 * Gradient headings.
 *
 * The text is painted by clipping the gradient to the glyphs. The colour the
 * element already had stays as the fallback: browsers without background-clip
 * keep a solid heading instead of an invisible one, which is why the fill is
 * only made transparent inside @supports.
 *
 * .c-intro__heading is the page h1 on the overview pages, .c-hero-video__title
 * the h1 on the home page, and the two hero titles the h1 on the single pages -
 * one per page in every case.
 *
 * The home h1 sits on the hero VIDEO, so it only works because of
 * .c-hero-video__scrim. Measured over the scrim it runs 5.2:1 at the left edge
 * down to ~4:1 at the end of the headline; the type is 68px, and large text
 * needs 3:1. Weaken that scrim and this headline is the first thing to break.
 */
@supports ( -webkit-background-clip: text ) or ( background-clip: text ) {

	.u-heading-gradient,
	.c-intro__heading,
	.c-hero-video__title,
	.c-case-hero__title,
	.c-service-hero__title {
		background-image: var( --gradient-heading );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		/* the gradient is painted across the box, so a tight box keeps the
		   whole spectrum inside the words rather than trailing off */
		width: fit-content;
	}

	/* The shrink-wrapped box must not drift to the middle: page headings sit
	   left, in line with the eyebrow above and the lead paragraph below
	   (Jens, 2026-09-23). Without this the auto margins from a centred box
	   would re-centre them. */
	.u-heading-gradient,
	.c-intro__heading,
	.c-hero-video__title,
	.c-case-hero__title,
	.c-service-hero__title {
		margin-inline: 0;
	}
}

/**
 * The blue headline, for the technical side of the site. Use it on a heading
 * that introduces a capability rather than a feeling.
 */
.u-heading-blue {
	color: var( --blue-d-4, currentColor );
	-webkit-text-fill-color: var( --blue-d-4, currentColor );
}