/* Vidsyn LCM | stijl van de portal. P0: alleen de tokens uit demo v2 (src/00-head.html), licht en donker, en de
   paar klassen die het fundament gebruikt (aanmelden, kop, melding, knop). De schil en de schermen volgen in S1.
   Geen inline style= (CSP style-src 'self'); de accentkleur per klant zet huisstijl.js via CSSOM (--accent).
   Fonts lokaal (app/vendor/fonts); Space Grotesk en Inter volgen in S1 (besluit K6), tot dan de systeemletter. */

@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../vendor/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../vendor/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2'); }

:root{
  --paper:#EBE7E1; --canvas:#F2EFEA; --surface:#FFFFFF; --surface-2:#F5F2ED;
  --fg:#182531; --muted:#5E666D; --faint:#8A9097;
  --line:rgba(24,37,49,.10); --line-2:rgba(24,37,49,.16);
  --ink:#182531; --strong:#182531; --strong-fg:#F2F0EC;
  /* module palette (muted, harmonious) */
  --m-ink:#243441; --m-sage:#4F8C6E; --m-amber:#C2812E; --m-teal:#2E8C86;
  --m-clay:#B85C44; --m-slate:#3E6E92; --m-violet:#6E5FA6; --m-grey:#8A9098; --m-turq:#3FB6AD;
  --accent:#4F8C6E;
  --accent-tint:color-mix(in srgb,var(--accent) 12%, var(--surface));
  --accent-soft:color-mix(in srgb,var(--accent) 16%, transparent);
  --accent-line:color-mix(in srgb,var(--accent) 32%, transparent);
  --shadow:0 1px 2px rgba(24,37,49,.05), 0 10px 28px rgba(24,37,49,.06);
  --r:14px;
  /* dark floating rail (v4) */
  --rail:#182531; --rail-2:#0E171F; --rail-fg:#ECE8E2; --rail-muted:#7E8B95; --rail-line:rgba(255,255,255,.12); --rail-hover:rgba(255,255,255,.06);
}
:root[data-theme="dark"]{
  --paper:#0B1117; --canvas:#0E1820; --surface:#16212A; --surface-2:#1D2A34;
  --fg:#ECE8E2; --muted:#9AA0A6; --faint:#69727A;
  --line:rgba(233,229,224,.10); --line-2:rgba(233,229,224,.16);
  --ink:#0C141B; --strong:#E9E5E0; --strong-fg:#0E1820;
  --m-ink:#AEB6BD; --m-sage:#5EA17F; --m-amber:#D49A4A; --m-teal:#46A39C;
  --m-clay:#D17A62; --m-slate:#5B92BC; --m-violet:#9483C9; --m-grey:#9097A0; --m-turq:#52C7BD;
  --accent:#5EA17F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.34);
  --rail:#0C141B; --rail-2:#070D12; --rail-fg:#ECE8E2; --rail-muted:#6B7782; --rail-line:rgba(255,255,255,.10); --rail-hover:rgba(255,255,255,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--fg); background: var(--canvas); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .woordmerk { font-family: 'Space Grotesk', system-ui, sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.knop { font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); cursor: pointer; }
.knop:hover { border-color: var(--accent-line); }
.knop-hoofd { background: var(--accent); border-color: var(--accent); color: #fff; }

.aanmeld { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.aanmeld-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 32px; max-width: 420px; display: grid; gap: 16px; }
.woordmerk { font-weight: 600; font-size: 22px; letter-spacing: -.5px; }

.kop { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 60px; border-bottom: 1px solid var(--line); background: var(--surface); }
.kop-naam { margin-left: auto; color: var(--muted); font-size: 13px; }
.kop-rol { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); }
#inhoud { padding: 24px; }

.melding { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 8px; max-width: 640px; }
.melding p { color: var(--muted); font-size: 14px; }