/* === Lettertype === */

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/poppins-v24-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/poppins-v24-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/poppins-v24-latin-600.woff2") format("woff2");
}


/* === Variabelen === */

:root {
  --text-color: #ffd60a;
  --white: #ffffff;
  --primary-color: #000814;
  --secondary-color: #001d3d;
  --tertiary-color: #003566;
  --button-color: #ffc300;
  --button-text-color: #000814;

  --font-family: "Poppins", sans-serif;

  --font-base: 1rem;
  --font-h1: 2.5rem;
  --font-h2: 2rem;
  --font-h3: 1.5rem;
  --font-large: 1.125rem;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-base: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  --radius-base: 0.5rem;
  --radius-lg: 0.75rem;
}


/* === Body === */

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--text-color);
  background-color: var(--primary-color);
}