:root {
  --background-color: #f2f2f2;
  --background-color-dark: #e6e6e6;
  --background-color-light: #ffffff;
  --text-color: #0d0d0d;
  --text-color-muted: #4d4d4d;
  --spacing-xs: 0.25rem;  /* 4px / 16px = 0.25rem */
  --spacing-sm: 0.5rem;   /* 8px / 16px = 0.5rem */
  --spacing-md: 1rem;     /* 16px / 16px = 1rem */
  --spacing-lg: 2rem;     /* 32px / 16px = 2rem */
  --spacing-xl: 4rem;     /* 64px / 16px = 4rem */
}

/* Dark mode automatisch detecteren */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d0d0d;
    --background-color-dark: #000000;
    --background-color-light: #1a1a1a;
    --text-color: #f2f2f2;
    --text-color-muted: #b3b3b3;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Handig voor layouts */
}

body {
  background-color: var(--background-color);
}

/* header.css */
header {
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg); /* logo links, nav rechts */
  gap: var(--spacing-lg);
  align-items: center;            /* vertical centering */
  background-color: var(--background-color-light);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

header .logo-img {
  height: 35px; /* pas aan naar wens */
}

.navbar .nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.navbar .nav-list li:first-child {
    margin-right: auto; /* duwt de eerste groep naar links */
}

.navbar .nav-list a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar .nav-list a:hover {
  color: #00c2ff;
}