/* WEBSITE BASE CSS */
/* FWRD - GOING FORWARD 2025 AND BEYOND © */


/* BASE */

:root {

	/* Brand Colors */
	--brandcolor-1: #FF7F18;
	--brandcolor-2: #002A8A;
	--brandcolor-3: #34C4FF;
	--brandcolor-4: #D9E0EA;

	/* UI Kernkleuren */
	--COLOR-PRIMARY: #FF7F18;
	--COLOR-SECONDARY: #002A8A;

	/* Tints/Shades (optioneel, handig voor UI-states) */
	--COLOR-PRIMARY-HOVER: #E66F11;
	/* ~15% donkerder */
	--COLOR-PRIMARY-100: #FFF2E8;
	--COLOR-PRIMARY-200: #FFE0CC;
	--COLOR-PRIMARY-900: #522F0E;

	--COLOR-SECONDARY-HOVER: #002074;
	/* ~15% donkerder */
	--COLOR-SECONDARY-100: #EEF3FF;
	--COLOR-SECONDARY-200: #D6E2FF;
	--COLOR-SECONDARY-900: #00164A;

	/* Focus rings (nieuw, per kleur) */
	--PL-FOCUS-PRIMARY: 0 0 0 0.2rem rgba(255, 127, 24, .35);
	--PL-FOCUS-SECONDARY: 0 0 0 0.2rem rgba(170, 196, 255, .65);

	/* Backwards compatibility met je huidige var-naam */
	--PL-FOCUS: var(--PL-FOCUS-PRIMARY);

	/* Grayscale Palette */
	--COLOR-BLACK: #000000;
	--COLOR-WHITE: #FFFFFF;
	--COLOR-DARKGRAY: #7A7D80;
	--COLOR-MIDGRAY: #CDCFD2;
	--COLOR-LIGHTGRAY: #EAECEF;
	--COLOR-LIGHTESTGRAY: #F6F6F6;

	/* Text Colors */
	--text-color: var(--color-darkgray);
	--link-color: var(--color-primary);
	--link-hover-color: var(--color-secondary);

	/* Button Colors */
	--button-bg: var(--color-primary);
	--button-hover-bg: var(--color-secondary);
	--button-text: var(--color-white);
	--button-border-radius: 4px;
	--button-padding: 0.75rem 1.5rem;

	/* Typography */
	--FONT-FAMILY: 'Inter 28pt', Arial, sans-serif;
	--FONT-FAMILY-ALT: 'Eina 01', Arial, sans-serif;
	--font-size: 1rem;
	--font-size-h1: calc(var(--font-size) * 3);
	--font-size-h2: calc(var(--font-size) * 2);
	--font-size-h3: calc(var(--font-size) * 1.75);
	--font-size-h4: calc(var(--font-size) * 1.5);
	--font-size-h5: calc(var(--font-size) * 1.25);
	--line-height: 1.6;
	--line-height-heading: 1.4;
	--letter-spacing: 0.02em;

	/* Spacing */
	--padding-element: 1rem;
	--padding-element-x: 1rem;
	--padding-element-y: 1rem;
	--margin-element: 1rem;
	--margin-element-x: 1rem;
	--margin-element-y: 1rem;

	/* Borders */
	--border-color: var(--color-midgray);
	--border-radius-small: 4px;
	--border-radius-medium: 8px;
	--border-radius-large: 16px;
	--stroke-height: 2px;

	/* Transition */
	--transition-speed: 0.3s ease;

	/* Input Styles */
	--input-border-color: #CCCCCC;
	--input-focus-shadow: rgba(221, 221, 221, 0.75);

	/* Additional Variables */
	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	--max-width-container: 1200px;

	/* Motion */
	--EASE: cubic-bezier(.22, .61, .36, 1);
	--TRANSITION: all .3s var(--EASE);
}

html,
body {
	background-color: var(--color-white);
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0;
	padding: 0;
}


section {
	align-items: center;
	display: flex;
	justify-content: center;
	/*min-height: 100vh;*/
	overflow: hidden;
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}


a {
	color: var(--link-color);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: var(--link-hover-color);
	text-decoration: underline;
}

button {
	background-color: var(--button-bg);
	border: none;
	border-radius: var(--button-border-radius);
	color: var(--button-text);
	cursor: pointer;
	padding: var(--button-padding);
	transition: var(--transition);
	font-family: var(--FONT-FAMILY);
}

button:hover {
	background-color: var(--button-hover-bg);
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--FONT-FAMILY);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing);
	margin-bottom: var(--margin-element);
}

p {
	font-family: var(--FONT-FAMILY-ALT);
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin-bottom: var(--margin-element);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

table th,
table td {
	border: 1px solid var(--border-color);
	padding: var(--padding-element);
	text-align: left;
}

input,
textarea,
select {
	border: 1px solid var(--input-border-color);
	border-radius: var(--border-radius-small);
	padding: var(--padding-element);
	font-family: var(--font-family);
	transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: 0 0 5px var(--input-focus-shadow);
}

svg {
	transform: scale(1);
	will-change: transform, opacity;
}





/* END CSS FILE */