/* De inlogpagina van de online Werkbank: zelfde kleuren als de Werkbank, geen lettertypen van buiten. */
:root {
  --inkt: #15132B;
  --ivoor: #FFF6E2;
  --ivoor-2: #F6EBD2;
  --wit: #FFFFFF;
  --roze: #FF2D9C;
  --lavendel: #A99EEA;
  --lavendel-zacht: #B9B3D9;
  --accent: #C4006B;
  --fout-vlak: #FBE3E1;
  --goed-vlak: #DDF3E5;
  --gedempt: #575170;
  --r-s: 10px;
  --r-m: 18px;
  --tekst: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--inkt);
  color: var(--inkt);
  font: 400 16px/1.55 var(--tekst);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
:focus-visible { outline: 3px solid var(--roze); outline-offset: 2px; }

.inlog { width: min(440px, 100%); }
.merk { margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; color: var(--ivoor); }
.merk-naam { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; }
.merk-sub { font-size: .78rem; color: var(--lavendel-zacht); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

.kaart {
  background: var(--wit);
  border-radius: var(--r-m);
  box-shadow: 6px 6px 0 var(--lavendel);
  padding: 26px 24px;
}
h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 .8em; }
.inleiding { color: var(--gedempt); }
.klein { font-size: .85rem; color: var(--lavendel-zacht); margin-top: 16px; }

.veld { display: grid; gap: 6px; margin: 0 0 16px; }
label { font-weight: 600; font-size: .95rem; }
input {
  font: inherit; color: var(--inkt);
  background: var(--ivoor); border: 0; border-radius: var(--r-s);
  box-shadow: inset 0 0 0 2px var(--ivoor-2);
  padding: 12px 14px; width: 100%; min-width: 0;
}
input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lavendel); background: var(--wit); }
#code { font-size: 1.5rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.knop {
  appearance: none; border: 0; cursor: pointer;
  font: 800 1rem/1 var(--tekst);
  background: var(--roze); color: var(--inkt);
  padding: 14px 22px; border-radius: 999px;
  width: 100%;
  transition: transform .1s, box-shadow .1s;
}
.knop:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--inkt); }
.knop:active { transform: translateY(1px); box-shadow: none; }
.knop[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.linkknop {
  appearance: none; background: none; border: 0; padding: 0; margin-top: 14px;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .92rem;
}
.linkknop:hover { color: var(--inkt); }

.bericht { border-radius: var(--r-s); padding: 10px 14px; margin: 16px 0 0; font-size: .95rem; background: var(--fout-vlak); color: #5C140F; }
.bericht[data-soort="goed"] { background: var(--goed-vlak); color: var(--inkt); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}