@import url('components/cta.css');
@import url('components/feature-cluster.css');
@import url('components/featured-ruimtes.css');
@import url('components/footer.css');
@import url('components/form.css');
@import url('components/intro.css');
@import url('components/icon-label.css');
@import url('components/nav.css');
@import url('components/prijzen.css');
@import url('components/ui/button/button.css');

@import url('compositions/cluster.css');
@import url('compositions/flow.css');
@import url('compositions/grid.css');
@import url('compositions/reel.css');
@import url('compositions/repel.css');
@import url('compositions/switcher.css');
@import url('compositions/wrapper.css');

@import url('utilities/color-palette.css');
@import url('utilities/focus.css');
@import url('utilities/sizes.css');
@import url('utilities/radius.css');
@import url('utilities/visually-hidden.css');

@import url('blocks/panel.css');
@import url('blocks/prose.css');
@import url('blocks/site-head.css');

@import url('fonts/GoogleSans.css');
@import url('fonts/IBMPlexSans.css');

:root {
  --flow-space: var(--size-600);
  --border-style: solid;
  --form-control-border-width: var(--size-100);
  --form-control-radius: var(--size-100);
}

html, body {
  margin: 0;
  background: var(--gray-100);
	color: var( --gray-900);
	line-height: 1.5;
	font-size: var(--size-500);
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
}

svg,
a:not([class]) {
  color: currentColor;
  fill: currentColor;
	text-decoration-color: currentColor;
}

svg {
  vertical-align: middle;
}

img {
  background-color: var(--gray-200);
}

h1,
h2,
h3,
h4 {
  font-family: "Google Sans Flex", "Google Sans", Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-weight:900;
  line-height:1.1
}

::selection {
  background:var(--brand-1-500);
  color:var(--brand-1-200);
}

[data-highlight="dark"] ::selection {
  background:var(--brand-3-500) !important;
  color:var(--brand-3-200);
}