/* Huisstijl van MARSS, overgenomen uit het thema van marss.amsterdam (2022). */

@font-face { font-family: "Platform"; src: url("/assets/fonts/Platform-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Platform"; src: url("/assets/fonts/Platform-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Platform"; src: url("/assets/fonts/Platform-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Platform"; src: url("/assets/fonts/Platform-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Kleuren */
  --rood: #ED0A30;
  --roze: #FDBFCA;
  --roze-diep: #EF9BB5;
  --roze-zacht: #F9CFDA;
  --creme: #F9F0EB;
  --grijs: #444444;
  --grijs-zacht: #8a8481;
  --zwart: #0A0A0A;
  --wit: #FFFFFF;
  --lijn: rgba(68, 68, 68, 0.22);
  --lijn-licht: rgba(255, 255, 255, 0.28);

  /* Letters */
  --font-kop: "Platform", "Helvetica Neue", Arial, sans-serif;
  --font-tekst: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --maat-xs: 0.8125rem;
  --maat-s: 0.9375rem;
  --maat-m: 1.0625rem;
  --maat-l: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  --maat-xl: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
  --maat-xxl: clamp(2.6rem, 1.6rem + 4.4vw, 6.25rem);
  --maat-hero: clamp(2.7rem, 1.4rem + 5vw, 6.5rem);
  --maat-statement: clamp(1.9rem, 1rem + 3.6vw, 4.7rem);

  /* Ruimte en maten */
  --breedte: 90rem;
  --rand: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --ruimte: clamp(5rem, 3rem + 8vw, 12rem);
  --kophoogte: 5.5rem;
  --hoek-pil: 999px;
  --hoek: 0;

  /* Beweging */
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 1800px) {
  :root { --breedte: 104rem; --rand: 4rem; }
}