/* Design decisions live here, and only here. Components consume tokens, they
   do not invent values.

   Where Salient already exposes a custom property, we wrap it in a name of our
   own. That creates a seam: the site stays themeable through the Salient
   options, and our code stays readable instead of being bolted to Salient's
   naming. */

:root {
	/* Colour. Accent and background come from the Salient theme options. */
	--color-accent: var(--nectar-accent-color, #3452ff);
	--color-surface: var(--nectar-bg-color, #fff);
	--color-text: #1c1c1c;
	--color-text-muted: color-mix(in srgb, var(--color-text) 65%, transparent);
	--color-border: color-mix(in srgb, var(--color-text) 12%, transparent);

	/* Brand colours (fixed; not from the Salient accent). */
	--color-primary: #001c40;
	--color-on-primary: #ffffff;
	--color-header-btn: #1a3455; /* Header utility buttons */
	--color-gray: #f2f3f5; /* Figma Colors/gray — a shade off white */
	--color-brand-1: #1f96a2; /* Figma Colors/Brand-1 */
	--color-brand-green: #9aca3c; /* Figma brand-2 — quote name */
	/* brand-2 pulled towards the navy, for green on a light background:
	   #9aca3c itself lands around 1.9:1 on white, under the 3:1 that a UI
	   indicator such as an active carousel bullet needs. */
	--color-brand-green-dark: color-mix(in srgb, var(--color-brand-green) 60%, var(--color-primary));
	--color-urgent: #7ef3ff; /* Figma Spoed 24/7 — Home nav instance */
	--color-gradient-green-start: #b0cf2e;
	--color-gradient-green-end: var(--color-brand-1); /* Figma brand-1 — quote role */

	/* Hover start of Primair (btn-gradient). */
	--color-gradient-yellow: #ffe500;

	/* Typografie: sizes in typography.css. Family via Salient options. */
	--font-size-base: var(--nectar-body-font-size, 1rem);
	--line-height-base: var(--nectar-body-line-height, 1.5);

	/* Shadow. One level: something that is lifted. */
	--shadow-lifted: 0 1.25rem 2.25rem rgb(0 0 0 / 0.55), 0 0.375rem 0.75rem rgb(0 0 0 / 0.4);

	/* The same lift, for a dark section. A black shadow on --color-primary is
	   black on near-black: it reads as nothing at all, which is why the world map
	   looked like it only had a hover state on the light half of its band. This
	   one is light, so it disappears on a light background instead. The two are
	   meant to be set together, and whichever background is under the element
	   shows the layer that suits it. */
	--shadow-lifted-on-dark: 0 0.75rem 2rem
		color-mix(in srgb, var(--color-on-primary) 30%, transparent);

	/* Vorm */
	--radius: var(--nectar-border-radius, 4px);
	--radius-m: 20px; /* Figma: USP tiles TL / BR */
	--radius-lg: 52px; /* Figma: Border Top Left / Bot right */
	--border-thickness: var(--nectar-border-thickness, 1px);

	/* Page rhythm: vertical distance between sections. One place, and components
	   never set this themselves: it is not a component's responsibility.
	   --row-spacer = gap between stacked page-builder rows (margin).
	   --row-padding-block-* = inner padding on filled rows. */
	--row-spacer: 3rem;
	--row-padding-block-start: var(--row-spacer);
	--row-padding-block-end: var(--row-spacer);

	/* Horizontal containment: distance from column edge to viewport edge.
	   Anything that breaks out of the container works from this, so a breakout is
	   not a hack. */
	--distance-to-edge: var(--nectar-resp-container-padding, clamp(1rem, 5vw, 4rem));

	/* Headerhoogte uit Salient (desktop 96px, <1000px 60px). */
	--header-height: var(--header-nav-height);
	--header-padding: var(--nectar-menu-padding, 24px);

	/* Where the fixed header starts, measured from the top of the viewport. Zero
	   for a visitor; the admin bar pushes it down (overrides.css). */
	--header-offset-top: 0px;

	/* What an anchor jump has to clear: the bar plus a little air, so the target
	   does not land flush against it. Read by scroll-padding on html (base.css).
	   Salient condenses the header while you scroll, so by the time a jump lands
	   there is in practice ~20px more room than this. */
	--scroll-offset: calc(
		var(--header-offset-top) + var(--header-height) + var(--gap-m)
	);

	/* Ritme binnen componenten */
	--gap-s: 0.5rem;
	--gap-m: 1rem;
	--gap-icons: 1.25rem; /* Figma Frame 1293 social icons */
	--gap-l: 2rem;

	/* Minimum width of a tile in an auto-fill grid. A component with different
	   tiles overrides this locally instead of media-querying column counts. */
	--tile-width: 18rem;
}

@media (min-width: 1000px) {
	:root {
		--row-spacer: 100px;
	}
}