/*
 * GSF Blocks design tokens.
 *
 * Blocks only use the --gsf-* properties below. The --gsf-default-* values are the
 * fallbacks without Avada; they equal the GSF main site (gsf.nl), so "no Avada" looks like
 * just another site. adapters/avada/tokens-avada.css maps the tokens to Avada's globals.
 */
:root {
	/* Defaults (GSF main site). */
	--gsf-default-color-primary: #459ac8;
	--gsf-default-color-secondary: #4e8948;
	--gsf-default-color-accent: #c0132b;
	--gsf-default-color-text: #000000;
	--gsf-default-color-surface: #ffffff;
	--gsf-default-color-surface-dark: hsl(201 54% 28%); /* primary, lightness - 25% (no dark palette colour on gsf.nl) */

	--gsf-default-font-heading: "Bree Serif", Arial, Helvetica, sans-serif;
	--gsf-default-font-body: "PT Sans", Arial, Helvetica, sans-serif;

	/* Colours. */
	--gsf-color-primary: var(--gsf-default-color-primary);
	--gsf-color-secondary: var(--gsf-default-color-secondary);
	--gsf-color-accent: var(--gsf-default-color-accent);
	--gsf-color-text: var(--gsf-default-color-text);
	--gsf-color-surface: var(--gsf-default-color-surface);
	--gsf-color-surface-dark: var(--gsf-default-color-surface-dark);

	/* Readable text colour on each colour (the Avada adapter recalculates these per site). */
	--gsf-on-color-primary: #000000;
	--gsf-on-color-secondary: #000000;
	--gsf-on-color-accent: #ffffff;
	--gsf-on-color-text: #ffffff;
	--gsf-on-color-surface: #000000;
	--gsf-on-color-surface-dark: #ffffff;

	/* Heading colours per level (Avada: the colour of H1/H2/H3 in Global Options; gsf.nl uses
	   its second colour for all three). Used for titles on blocks without their own background. */
	--gsf-color-heading-1: var(--gsf-color-secondary);
	--gsf-color-heading-2: var(--gsf-color-secondary);
	--gsf-color-heading-3: var(--gsf-color-secondary);

	/* Soft tint of the house colour, for light cards and tiles. */
	--gsf-color-tint: color-mix(in srgb, var(--gsf-color-primary) 9%, var(--gsf-color-surface));

	/* Fonts. */
	--gsf-font-heading: var(--gsf-default-font-heading);
	--gsf-font-body: var(--gsf-default-font-body);

	/* Type scale. The *-max sizes come from Avada; the clamp() scales down on small screens. */
	--gsf-text-h1-max: 62px;
	--gsf-text-h1-line-height: 1.3;
	--gsf-text-h1-letter-spacing: -0.015em;
	--gsf-text-h1-transform: uppercase;
	--gsf-text-h2-max: 38px;
	--gsf-text-h2-line-height: 1.3;
	--gsf-text-h2-letter-spacing: 0;
	--gsf-text-h2-transform: none;
	--gsf-text-h3-max: 26px;
	--gsf-text-h3-line-height: 1.3;
	--gsf-text-h3-letter-spacing: 0.015em;
	--gsf-text-h3-transform: none;
	--gsf-text-body-size: 20px;
	--gsf-text-body-line-height: 1.3;
	--gsf-text-body-letter-spacing: 0.015em;
	--gsf-text-lead-size: 24px;
	--gsf-text-lead-weight: 700;
	--gsf-text-lead-line-height: 1.3;
	--gsf-text-quote-size: 34px;
	--gsf-text-quote-font: var(--gsf-font-heading);
	--gsf-text-quote-line-height: 1.3;

	--gsf-text-h1: clamp(2.125rem, 1.25rem + 3.5vw, var(--gsf-text-h1-max));
	--gsf-text-h2: clamp(1.625rem, 1.2rem + 1.6vw, var(--gsf-text-h2-max));
	--gsf-text-h3: clamp(1.3125rem, 1.1rem + 0.8vw, var(--gsf-text-h3-max));
	--gsf-text-body: clamp(1.0625rem, 0.95rem + 0.4vw, var(--gsf-text-body-size));
	--gsf-text-lead: clamp(1.1875rem, 1rem + 0.6vw, var(--gsf-text-lead-size));
	--gsf-text-quote: clamp(1.5rem, 1.1rem + 1.4vw, var(--gsf-text-quote-size));

	/* Shape and spacing. */
	--gsf-radius: 10px;
	--gsf-space-1: 0.25rem;
	--gsf-space-2: 0.5rem;
	--gsf-space-3: 1rem;
	--gsf-space-4: 1.5rem;
	--gsf-space-5: 2.5rem;
	--gsf-space-6: 4rem;
	--gsf-space-7: 6rem;
	--gsf-content-width: 1280px;
	--gsf-space-section: clamp(4rem, 8vw, 7.5rem); /* vertical padding of full-width blocks */
	--gsf-space-gutter: clamp(20px, 4vw, 30px); /* side padding of full-width blocks */

	--gsf-focus-ring: 3px solid currentColor;
	--gsf-focus-offset: 3px;
}