/* ==========================================================
   SPARKS DESIGN TOKENS
   Change colours, fonts and spacing here. Every other style file
   reads these variables, so one edit updates the whole site.
   ========================================================== */
:root {
	/* Colour: normal page areas (white look) */
	--color-page: #ffffff;
	--color-surface: #f2f3f5;
	--color-surface-hover: #e7e9ec;
	--color-line: #d4d7dc;           /* soft dividers */
	--color-field-border: #757a83;  /* borders of form fields (3:1 or better) */
	--color-text: #17181a;
	--color-muted: #4b5058;
	--color-faint: #5d636c;

	/* Colour: brand red, sampled from the Sparks logo */
	--color-red: #D42127;
	--color-red-deep: #A9171C;      /* hover state for red buttons */
	--color-red-text: #B3171D;      /* red used for small text on white */
	--color-ink: #0e0f10;           /* footer background */

	/* Image placeholders (shown only where no photo has been added) */
	--color-placeholder-ink: #9aa0a9;
	--pattern-a: #eceef1;
	--pattern-b: #e3e6ea;

	/* Type. Archivo and Barlow are used when their font files are added
	   to assets/fonts/ (see FONTS.md in the handover documents); otherwise the fallbacks apply. */
	--font-heading: "Archivo", "Arial Black", "Segoe UI", Arial, sans-serif;
	--font-body: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--max: 1200px;
	--gutter: clamp(18px, 4vw, 40px);
	--radius: 6px;
	--slant: -10deg;                /* matches the italic angle of the logo */

	box-sizing: border-box;
	color-scheme: light;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark areas: header, footer and the red enquiry band.
   Add the class "on-dark" to any section that should use these colours. */
.on-dark {
	--color-page: #17181a;
	--color-surface: #212327;
	--color-surface-hover: #2c2f34;
	--color-line: #3f4349;
	--color-field-border: #8a8f98;
	--color-text: #ffffff;
	--color-muted: #c9ccd2;
	--color-faint: #a3a8b0;
	--color-red-text: #FF6A6F;
	color: var(--color-text);
}