@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root {
  /* Kleuren met fallback */
  --primary-color-light: rgb(41, 158, 222); /* fa llback */
  --primary-color-light: hsl(204, 82%, 41%);
  --color-blue-tint: rgb(236, 245, 255); /* zacht lichtblauw */

  --primary-color-dark: rgb(8, 63, 119); /* fallback */
  --primary-color-dark: hsl(210, 85%, 29%);

  --color-green-accent: rgb(19, 124, 38); /* fallback */
  --color-green-accent: hsl(132, 84%, 29%);

  --color-white: rgb(255, 255, 255); /* fallback */
  --color-white: hsl(0, 0%, 100%);

  /* Neutral colors */

  /* RGB fallbacks first */
  --color-neutral-darker: rgb(0, 0, 0);
  --color-neutral-dark: rgb(31, 36, 50);
  --color-neutral: rgb(84, 104, 156);
  --color-neutral-light: rgb(170, 176, 194);
  --color-neutral-lighter: rgb(229, 232, 242);

  /* Overwrite with HSL if supported */
  --color-neutral-darker: hsl(0, 0%, 0%);
  --color-neutral-dark: hsl(230, 21%, 14%);
  --color-neutral: hsl(223, 30%, 47%);
  --color-neutral-light: hsl(224, 14%, 72%);
  --color-neutral-lighter: hsl(226, 33%, 92%);

  @media (prefers-contrast: more){
    --color-neutral: rgb(66,82,123);
    --color-neutral: hsl(223, 30%, 37%);
  }


  /* Fonts */
  --font-regular: "Inter", sans-serif;
  --font-medium: "Inter Medium", "Inter", sans-serif;
  --font-semibold: "Inter Semi Bold", "Inter", sans-serif;

  /* Typografie */
  --text-size-xs: clamp(0.75rem, 1.5vw, 12px);
  --text-size-sm: clamp(0.875rem, 1.75vw, 14px);
  --text-size-md: clamp(1rem, 2vw, 16px);
  --text-size-lg: clamp(1.125rem, 2.25vw, 18px);
  --text-size-xl: clamp(1.4rem, 2.5vw, 30px);
   --text-size-bingo: clamp(0.6rem, 1.2vw, 0.75rem);
}