/* Tokens uit merk/tokens.json. Inter wordt lokaal geladen als het bestand er is; anders systeemletter. */
:root {
  --navy-900: #0F1729;
  --blue-600: #0052CC;
  --blue-on-deep: #4C9AFF;
  --orange-500: #FF6B35;
  --white: #FFFFFF;
  --gray-50: #F2F4F8;
  --gray-600: #676F7E;
  --gray-900: #21242C;
  --gray-on-deep: #B9C5D5;
  --danger: #B42318;
  --heading-spacing: -0.02em;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; line-height: 1.5; color: var(--white);
  background: var(--navy-900) radial-gradient(60% 50% at 50% 0%, rgba(76, 154, 255, 0.14), transparent 70%);
}
.card {
  width: 100%; max-width: 440px; padding: 32px; border-radius: 12px;
  background: var(--white); color: var(--gray-900);
}
.logo { display: block; margin-bottom: 20px; border-radius: 8px; }
h1 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: var(--heading-spacing); }
p { margin: 0 0 16px; }
.muted { color: var(--gray-600); }
.facts { margin: 16px 0; padding: 16px; border-radius: 8px; background: var(--gray-50); }
.facts dt { font-size: 0.8125rem; color: var(--gray-600); }
.facts dd { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.facts dd:last-child { margin-bottom: 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.btn {
  font: inherit; font-weight: 600; padding: 12px 20px; min-height: 44px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; transition: background-color 200ms var(--ease);
}
.btn-primary { background: var(--blue-600); color: var(--white); }
.btn-primary:hover { background: #0747A6; }
.btn-cta { background: var(--orange-500); color: var(--navy-900); }
.btn-cta:hover { background: #F25A22; }
.btn-secondary { background: var(--white); color: var(--navy-900); border-color: var(--gray-600); }
.btn-secondary:hover { background: var(--gray-50); }
.link {
  font: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--blue-600); text-decoration: underline;
}
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.error { color: var(--danger); font-weight: 600; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }