:root {

	--pk-page-bg-color: var(--neutral-50);
	--pk-heading-color: var(--primary-100);
	--pk-text-color: var(--primary-100);

	/* kleuren ── */

	--primary-100: rgba(47, 51, 76, 1);    /* nova-blue-100 */
	--primary-95: rgba(51, 55, 80, 1);     /* nova-blue-95 */
	--primary-90: rgba(68, 71, 94, 1);     /* nova-blue-90 */
	--primary-80: rgba(89, 92, 112, 1);    /* nova-blue-80 */
	--primary-50: rgba(151, 153, 165, 1);  /* nova-blue-50 */
	--primary-30: rgba(193, 194, 201, 1);  /* nova-blue-30 */
	--primary-20: rgba(213, 214, 219, 1);  /* nova-blue-20 */
	--primary-10: rgba(234, 235, 237, 1);  /* nova-blue-10 */
	--primary-5: rgba(245, 245, 246, 1);   /* nova-blue-5 */
	--primary-2-5: rgba(250, 250, 251, 1); /* nova-blue-2-5 */

	--accent-100: rgba(240, 88, 59, 1);    /* nova-orange-100 */
	--accent-90: rgba(242, 105, 79, 1);    /* nova-orange-90 */
	--accent-80: rgba(243, 121, 98, 1);    /* nova-orange-80 */
	--accent-30: rgba(251, 205, 196, 1);   /* nova-orange-30 */
	--accent-20: rgba(252, 222, 216, 1);   /* nova-orange-20 */
	--accent-10: rgba(254, 238, 235, 1);   /* nova-orange-10 */

	--neutral-100: rgba(238, 235, 227, 1); /* nova-sand-100 */
	--neutral-90: rgba(240, 237, 230, 1);  /* nova-sand-90 */
	--neutral-80: rgba(241, 239, 233, 1);  /* nova-sand-80 */
	--neutral-50: rgba(247, 245, 241, 1);  /* nova-sand-50 */
	--neutral-30: rgba(250, 249, 247, 1);  /* nova-sand-30 */
	--neutral-20: rgba(252, 251, 249, 1);  /* nova-sand-20 */
	--neutral-10: rgba(253, 253, 252, 1);  /* nova-sand-10 */

	--support-1: rgba(145, 208, 210, 1);   /* nova-aqua */
	--support-1-80: rgba(167, 217, 219, 1); /* nova-aqua-80 */
	--support-1-60: rgba(189, 227, 228, 1); /* nova-aqua-60 */
	--support-1-50: rgba(200, 231, 233, 1); /* nova-aqua-light */
	--support-1-30: rgba(222, 241, 241, 1); /* nova-aqua-30 */
	--support-2: rgba(255, 210, 34, 1);    /* nova-sunflower */
	--support-3: rgba(233, 244, 252, 1);   /* nova-lightblue-100 */

	--white-100: rgba(255, 255, 255, 1);   /* nova-white-100 */
	--white-20: rgba(255, 255, 255, .2);   /* nova-white-20 */

	--whatsapp: #49D16C;         /* badge-vulling, WhatsApp-context */
	--whatsapp-outline: #5BE880; /* outline bij --whatsapp badges */


	/* ── Wat per site kan wijzigen ── */

	--color-header-bg: var(--white-100);          /* Header bg */
	--color-header-text: var(--primary-100);      /* Header menu-items */
	--color-header-line: var(--primary-10);       /* border submenu */
	--color-header-control-bg: var(--primary-2-5);   /* zoek- en taalknop */
	--color-header-control-line: var(--primary-10);  /* border zoek en taal */
	--color-header-control-text: var(--primary-100); /* Taalknop-label */

	--color-footer-bg: var(--primary-100);           /* Footer bg */
	--color-footer-text: var(--white-100);           /* Tekst footer */
	--color-footer-line: var(--primary-80);          /* Scheidingslijn footer */
	--color-footer-bottom-bg: var(--neutral-90);    /* Footer bottom bg */
	--color-footer-bottom-text: var(--primary-100);  /* Tekstkleur footer bottom */
}


/* ── PER SITE ── */

body.site-2 {
	--color-footer-bg: var(--primary-95);
}

/* CLA (site 3). Op :root i.p.v. body, zodat ook de op :root afgeleide variabelen (--color-*, --pk-page-bg-color) meeschuiven.
   CLA-schalen zijn tinten op wit; stappen die Figma niet heeft worden met color-mix op dezelfde manier afgeleid. */
:root:has(body.site-3) {

	/* Navy */
	--primary-100: rgba(45, 50, 79, 1);     /* cla-navy-100 */
	--primary-95: color-mix(in srgb, var(--primary-100) 95%, white);
	--primary-90: rgba(66, 71, 97, 1);      /* cla-navy-90 */
	--primary-80: rgba(87, 91, 114, 1);     /* cla-navy-80 */
	--primary-60: rgba(129, 132, 149, 1);   /* cla-navy-60 */
	--primary-50: color-mix(in srgb, var(--primary-100) 50%, white);
	--primary-40: rgba(181, 183, 193, 1);   /* cla-navy-40 */
	--primary-30: color-mix(in srgb, var(--primary-100) 30%, white);
	--primary-20: rgba(213, 214, 220, 1);   /* cla-navy-20 */
	--primary-10: rgba(234, 234, 237, 1);   /* cla-navy-10 */
	--primary-5: rgba(244, 245, 246, 1);    /* cla-navy-5 */
	--primary-2-5: rgba(250, 250, 251, 1);  /* cla-navy-2.5 */

	/* Riptide Shade 1 (teal) als accent */
	--accent-100: rgba(0, 122, 123, 1);     /* cla-riptide-shade-100 */
	--accent-90: rgba(26, 135, 136, 1);     /* cla-riptide-shade-90 */
	--accent-80: rgba(51, 149, 149, 1);     /* cla-riptide-shade-80 */
	--accent-60: rgba(102, 175, 176, 1);    /* cla-riptide-shade-60 */
	--accent-30: rgba(178, 215, 215, 1);    /* cla-riptide-shade-30 */
	--accent-20: color-mix(in srgb, var(--accent-100) 20%, white);
	--accent-10: rgba(229, 242, 242, 1);    /* cla-riptide-shade-10 */

	/* Riptide (licht teal) als support-1 */
	--support-1: rgba(92, 213, 212, 1);     /* cla-riptide-100 */
	--support-1-80: rgba(129, 221, 221, 1); /* cla-riptide-80 */
	--support-1-60: color-mix(in srgb, var(--support-1) 60%, white);
	--support-1-50: color-mix(in srgb, var(--support-1) 50%, white);
	--support-1-40: rgba(196, 238, 239, 1); /* cla-riptide-40 */
	--support-1-30: color-mix(in srgb, var(--support-1) 30%, white);

	/* Geen zand in CLA: neutrals worden lichte navy-tinten. */
	--neutral-100: var(--primary-10);
	--neutral-90: color-mix(in srgb, var(--primary-100) 7.5%, white);
	--neutral-80: var(--primary-5);
	--neutral-50: var(--primary-2-5);
	--neutral-30: color-mix(in srgb, var(--primary-100) 1.5%, white);
	--neutral-20: color-mix(in srgb, var(--primary-100) 1%, white);
	--neutral-10: color-mix(in srgb, var(--primary-100) .5%, white);
}