:root {
  --color-primary: #224A7A;
  --color-accent: #F29B30;
  --color-dark: #23272A;
  --color-light: #F5F6FA;
  --color-white: #FFFFFF;
  --color-light-blue: #E3EFFD;
}

/* Algemene achtergrond */
body {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Header */
.header {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Buttons */
.button,
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 0.75em 1.5em;
  transition: background 0.2s;
}
.button:hover,
.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-dark);
}

/* Accent knop */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-accent:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Kaarten/secties */
.card,
.section {
  background: var(--color-white);
  border: 1px solid var(--color-light-blue);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(34, 74, 122, 0.06);
  padding: 2em;
}

/* Footer */
.footer {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Highlights / iconen */
.highlight,
.icon-accent {
  color: var(--color-accent);
}