/* Inloggen, akkoord, wachtwoord en uitloggen van een studio. Zelfde kleuren en letters als de website (site/assets/site.css). */
:root {
  --navy: #102341;
  --inkt: #1d1d1f;
  --stil: #5d6068;
  --accent: #2f4cf5;
  --accent-zacht: rgba(47, 76, 245, .16);
  --grond: #f5f5f7;
  --lijn: rgba(0, 0, 0, .1);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, ui-serif, Georgia, serif;
  --kaart: #ffffff;
  --veld: #ffffff;
  --rand: #8e8e93;
  --knop: #102341;
  --knop-hover: #1c3a6b;
  --knop-tekst: #ffffff;
  --fout: #b3261e;
  --schaduw: 0 1px 2px rgba(16, 35, 65, .08), 0 8px 28px rgba(16, 35, 65, .08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #e6e9ef;
    --inkt: #e6e9ef;
    --stil: #9ba3b1;
    --accent: #a9bef0;
    --accent-zacht: rgba(169, 190, 240, .22);
    --grond: #161c27;
    --lijn: rgba(255, 255, 255, .1);
    --kaart: #1c2330;
    --veld: #10151e;
    --rand: #5f6b80;
    --knop: #a9bef0;
    --knop-hover: #c6d4f6;
    --knop-tekst: #10151e;
    --fout: #ff8a80;
    --schaduw: 0 0 0 1px rgba(255, 255, 255, .08);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grond);
  color: var(--inkt);
  font: 1.0625rem/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
header, footer { padding: 1.1rem clamp(1rem, 4vw, 3rem); }
header { border-bottom: 1px solid var(--lijn); }
.merk { display: inline-flex; align-items: center; gap: .65rem; color: var(--navy); font: 600 1.125rem/1 var(--serif); text-decoration: none; }
.merk span { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 8px; background: #102341; color: #fff; font-size: .9375rem; }
main {
  width: min(100% - 2rem, 26rem);
  margin: clamp(2rem, 8vh, 5rem) auto auto;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border-radius: 14px;
  background: var(--kaart);
  box-shadow: var(--schaduw);
}
h1 { margin: 0 0 .5rem; color: var(--navy); font: 400 2rem/1.1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; color: var(--stil); font-size: 1rem; }
p + p, form + p { margin-top: .75rem; }
form { display: grid; gap: 1.1rem; margin: 1.5rem 0; }
form p { font-size: .9375rem; }
label { display: grid; gap: .4rem; color: var(--navy); font-size: .9375rem; font-weight: 600; }
input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--veld); color: var(--inkt); font: inherit; font-weight: 400; }
.klein { margin-top: -.4rem; font-size: .9rem; }
.keuze { display: block; padding-left: 1.9rem; color: var(--inkt); font-size: 1rem; font-weight: 400; }
input[type=checkbox] { float: left; width: 1.2rem; height: 1.2rem; margin: .2rem 0 0 -1.9rem; accent-color: var(--knop); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { min-height: 2.875rem; padding: .6rem 1.35rem; border: 0; border-radius: 8px; background: var(--knop); color: var(--knop-tekst); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
button:hover { background: var(--knop-hover); }
button:disabled { opacity: .6; cursor: default; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
input:focus-visible { outline: 3px solid var(--accent-zacht); border-color: var(--accent); }
#melding { color: var(--fout); font-size: .9375rem; font-weight: 600; }
#melding:empty { display: none; }
footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--lijn); color: var(--stil); font-size: .875rem; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--navy); text-decoration: underline; }