/* Landingspagina van bimpeil.nl en test.bimpeil.nl: alleen het logo; ids.bimpeil.nl met "IDS editor" ernaast zoals op het
   inlogscherm van de IDS site (besluiten punt 57 en 61). Kleuren uit docs/merk.md, Manrope zelf gehost (deploy.ps1) */
:root {
  color-scheme: light dark;
  --papier: #f2f1ee;
  --grafiet: #1e2328;
}

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope.woff2) format('woff2-variations');
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--papier);
}

main {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

img {
  display: block;
  width: min(360px, 70vw);
  height: auto;
}

/* ids.bimpeil.nl: dezelfde verhouding als .login-site in de webapp (logo 40 hoog, tekst 22, gap 12, 7 boven de
   onderkant), geschaald met de breedte van het logo; even groot als het logo op de andere namen (360), alleen
   op een smal scherm (onder ongeveer 780 px) kleiner zodat de tekst ernaast past */
.site-logo {
  --w: min(360px, 46vw);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--w) * 0.0867);
  margin: 0;
  line-height: 0;
}

.site-logo img {
  width: var(--w);
}

.site-name {
  font-family: 'Manrope Variable', system-ui, sans-serif;
  font-size: calc(var(--w) * 0.159);
  font-weight: 600;
  line-height: 1;
  margin-bottom: calc(var(--w) * 0.0506);
  white-space: nowrap;
  color: var(--grafiet);
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--grafiet);
  }

  .site-name {
    color: var(--papier);
  }
}