* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Tilt Warp */
@font-face {
	font-family: 'Tilt Warp';
	src:
		url('/fonts/TiltWarp.woff2') format('woff2'),
		url('/fonts/TiltWarp.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Pathway Extreme */
@font-face {
	font-family: 'Pathway Extreme';
	src:
		url('/fonts/PathwayExtreme.woff2') format('woff2'),
		url('/fonts/PathwayExtreme.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Urbanist */
@font-face {
	font-family: 'Urbanist';
	src:
		url('/fonts/Urbanist.woff2') format('woff2'),
		url('/fonts/Urbanist.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html {
	/* Spacing variabelen */
	--spacing-xxs: 0.25rem;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 8rem;
	--spacing-xxl: 16rem;

	/* Basis kleuren (instelbaar) */
	--hue-primary: 197;
	--sat-primary: 8%;
	--hue-neutral1: 180;
	--sat-neutral1: 1%;
	--hue-neutral2: 0;
	--sat-neutral2: 0%;
	--hue-accent1: 185;
	--sat-accent1: 21%;
	--hue-accent2: 76;
	--sat-accent2: 43%;
	--hue-accent3: 76;
	--sat-accent3: 58%;
	
	/* Primary kleuren - dynamisch berekend */
	--color-primary-l3: hsl(var(--hue-primary), var(--sat-primary), 45%);
	--color-primary-l2: hsl(var(--hue-primary), var(--sat-primary), 35%);
	--color-primary-l1: hsl(var(--hue-primary), var(--sat-primary), 25%);
	--color-primary-base: hsl(var(--hue-primary), var(--sat-primary), 18%);
	--color-primary-d1: hsl(var(--hue-primary), var(--sat-primary), 12%);
	--color-primary-d2: hsl(var(--hue-primary), var(--sat-primary), 8%);
	--color-primary-d3: hsl(var(--hue-primary), var(--sat-primary), 5%);
	
	/* Neutral 1 kleuren */
	--color-neutral1-l3: hsl(var(--hue-neutral1), var(--sat-neutral1), 98%);
	--color-neutral1-l2: hsl(var(--hue-neutral1), var(--sat-neutral1), 95%);
	--color-neutral1-l1: hsl(var(--hue-neutral1), var(--sat-neutral1), 91%);
	--color-neutral1-base: hsl(var(--hue-neutral1), var(--sat-neutral1), 87%);
	--color-neutral1-d1: hsl(var(--hue-neutral1), var(--sat-neutral1), 70%);
	--color-neutral1-d2: hsl(var(--hue-neutral1), var(--sat-neutral1), 55%);
	--color-neutral1-d3: hsl(var(--hue-neutral1), var(--sat-neutral1), 40%);
	
	/* Neutral 2 kleuren */
	--color-neutral2-l3: hsl(var(--hue-neutral2), var(--sat-neutral2), 90%);
	--color-neutral2-l2: hsl(var(--hue-neutral2), var(--sat-neutral2), 80%);
	--color-neutral2-l1: hsl(var(--hue-neutral2), var(--sat-neutral2), 72%);
	--color-neutral2-base: hsl(var(--hue-neutral2), var(--sat-neutral2), 64%);
	--color-neutral2-d1: hsl(var(--hue-neutral2), var(--sat-neutral2), 50%);
	--color-neutral2-d2: hsl(var(--hue-neutral2), var(--sat-neutral2), 38%);
	--color-neutral2-d3: hsl(var(--hue-neutral2), var(--sat-neutral2), 25%);
	
	/* Accent 1 kleuren */
	--color-accent1-l3: hsl(var(--hue-accent1), var(--sat-accent1), 85%);
	--color-accent1-l2: hsl(var(--hue-accent1), var(--sat-accent1), 70%);
	--color-accent1-l1: hsl(var(--hue-accent1), var(--sat-accent1), 63%);
	--color-accent1-base: hsl(var(--hue-accent1), var(--sat-accent1), 56%);
	--color-accent1-d1: hsl(var(--hue-accent1), var(--sat-accent1), 45%);
	--color-accent1-d2: hsl(var(--hue-accent1), var(--sat-accent1), 35%);
	--color-accent1-d3: hsl(var(--hue-accent1), var(--sat-accent1), 25%);
	
	/* Accent 2 kleuren */
	--color-accent2-l3: hsl(var(--hue-accent2), var(--sat-accent2), 85%);
	--color-accent2-l2: hsl(var(--hue-accent2), var(--sat-accent2), 70%);
	--color-accent2-l1: hsl(var(--hue-accent2), var(--sat-accent2), 62%);
	--color-accent2-base: hsl(var(--hue-accent2), var(--sat-accent2), 55%);
	--color-accent2-d1: hsl(var(--hue-accent2), var(--sat-accent2), 42%);
	--color-accent2-d2: hsl(var(--hue-accent2), var(--sat-accent2), 30%);
	--color-accent2-d3: hsl(var(--hue-accent2), var(--sat-accent2), 18%);
	
	/* Accent 3 kleuren */
	--color-accent3-l3: hsl(var(--hue-accent3), var(--sat-accent3), 75%);
	--color-accent3-l2: hsl(var(--hue-accent3), var(--sat-accent3), 55%);
	--color-accent3-l1: hsl(var(--hue-accent3), var(--sat-accent3), 40%);
	--color-accent3-base: hsl(var(--hue-accent3), var(--sat-accent3), 32%);
	--color-accent3-d1: hsl(var(--hue-accent3), var(--sat-accent3), 25%);
	--color-accent3-d2: hsl(var(--hue-accent3), var(--sat-accent3), 18%);
	--color-accent3-d3: hsl(var(--hue-accent3), var(--sat-accent3), 12%);
}
  
/* Body basis */
body {
	font-family: Urbanist, sans-serif;
	font-size: 1rem;
	line-height: 1.2;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

ul, ol, li {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

/* Voorbeeld gebruik: class="hero", class="title", class="subtitle", class="text" */
/* mobile font-sizes kunnen beter! */
.hero {
	font-family:
		Tilt Warp,
		sans-serif;
	font-size: clamp(3rem, 8vw, 6rem); /* min 48px, schaal met 8vw, max 96px */
	color: white;
}

.title {
	font-family:
		Pathway Extreme,
		sans-serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4rem); /* min 40px, schaal met 6vw, max 64px */
}

.subtitle {
	font-family: Urbanist, sans-serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 5vw, 2.1875rem); /* min 28px, schaal met 5vw, max 35px */
}

.text {
	font-family: Urbanist, sans-serif;
	font-size: clamp(1.15rem, 1.5vw, 1.25rem); /* min 18,4px, schaal met 1.5vw, max 20px*/
	line-height: 1.6875; /* 27px */
}

.container {
	margin: 0 auto;
	margin-top: var(--spacing-lg);
	padding: 0 1rem;
}
@media (min-width: 1024px) {
	.container {
		max-width: 1200px;
		margin: 0 auto;
		margin-top: var(--spacing-lg);
	}
}

/* button */
.button {
	display: flex;                 
	align-items: center;          
	justify-content: center;      
	width: 100%;
	text-align: center;
	text-decoration: none;
	color: var(--color-primary-base);
	font-weight: 700;
	border-radius: 7px;
	padding: var(--spacing-sm);
	padding-right: 2.5rem;        
	background-color: var(--color-accent3-l2);
	position: relative;           
	transition: all 0.3s ease-in-out;
}
  
.button svg {
	position: absolute;             
	right: var(--spacing-sm);       
	top: 50%;                       
	transform: translateY(-50%);   
}

/* Styling voor previous button (pijl links) */
.button--prev {
	padding-left: 2.5rem;
	padding-right: var(--spacing-sm);
}

.button--prev svg {
	left: var(--spacing-sm);
	right: auto;
	transform: translateY(-50%) rotate(180deg);
}

.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.button:active {
	transform: translateY(0);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	background-color: var(--color-accent3-l3);
}

@media (min-width: 768px) {
	.button {
		width: 250px;
	}
}

/* Loader */
.loader {
	border: 2px solid #f3f3f3;
	border-top: 2px solid var(--color-accent2-base);
	border-radius: 50%;
	align-self: center;
	width: 15px;
	height: 15px;
	animation: spin 0.4s linear infinite;
	display: inline-block;
	vertical-align: middle;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}