/* BIM Leerlijn — tekenkamer-stijl: wit tekenpapier, inktlijnen, één blauwe accentkleur (zoals een selectie in Revit). */
:root {
  --paper: #f3f5f6;
  --sheet: #ffffff;
  --ink: #18222c;
  --ink-soft: #53616d;
  --ink-faint: #8794a0;
  --line: #d3d9de;
  --line-soft: #e6eaed;
  --accent: #1f5f99;
  --accent-ink: #ffffff;
  --accent-soft: #e2edf7;
  --done: #2c7a4c;
  --done-soft: #dcefe3;
  --warn: #8f5710;
  --warn-soft: #f7ecdb;
  --bad: #a3392b;
  --bad-soft: #f7e0dc;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10151a; --sheet: #171e25; --ink: #e3e9ee; --ink-soft: #9ba9b5; --ink-faint: #6c7a86;
    --line: #2c3842; --line-soft: #222c35; --accent: #7fb0e0; --accent-ink: #0d1620; --accent-soft: #1c3047;
    --done: #6cc492; --done-soft: #1a3325; --warn: #e2ab5f; --warn-soft: #382a17; --bad: #ee8c7f; --bad-soft: #3b211d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10151a; --sheet: #171e25; --ink: #e3e9ee; --ink-soft: #9ba9b5; --ink-faint: #6c7a86;
  --line: #2c3842; --line-soft: #222c35; --accent: #7fb0e0; --accent-ink: #0d1620; --accent-soft: #1c3047;
  --done: #6cc492; --done-soft: #1a3325; --warn: #e2ab5f; --warn-soft: #382a17; --bad: #ee8c7f; --bad-soft: #3b211d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: .005em; text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { font-family: var(--mono); font-size: .82em; font-weight: 500; padding: .08em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--sheet); white-space: nowrap; }
.ui { font-weight: 600; }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink);
  border-radius: 6px; padding: 10px 18px; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn.small { padding: 6px 12px; font-size: .88rem; }

/* Kleuren per niveau: groen (1), blauw (2), paars (3), oranje (eindproject) */
:root {
  --lv1: #1d9a68; --lv1-soft: #dcf3e8;
  --lv2: #1f6fd1; --lv2-soft: #dde9fb;
  --lv3: #8a4fd6; --lv3-soft: #ece2fb;
  --lv4: #e0762a; --lv4-soft: #fbe7d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv1: #5fd3a0; --lv1-soft: #173a2b;
    --lv2: #79aef0; --lv2-soft: #182d49;
    --lv3: #b994f0; --lv3-soft: #2c2142;
    --lv4: #f2a05f; --lv4-soft: #3d2816;
  }
}
:root[data-theme="dark"] {
  --lv1: #5fd3a0; --lv1-soft: #173a2b;
  --lv2: #79aef0; --lv2-soft: #182d49;
  --lv3: #b994f0; --lv3-soft: #2c2142;
  --lv4: #f2a05f; --lv4-soft: #3d2816;
}

/* Illustraties (assets/illustraties.js) */
.illu { display: block; width: 100%; height: auto; }
.illu .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.illu .th { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.illu .ac { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.illu .ds { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 6 4; }
.illu .gr { fill: none; stroke: var(--ink-faint); stroke-width: .9; stroke-dasharray: 10 3 2 3; }
.illu .fs { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.illu .fp { fill: var(--accent-soft); stroke: none; }
.illu .fa { fill: var(--accent); stroke: none; }
.illu .po { fill: url(#poche); stroke: var(--ink); stroke-width: 1.6; }
.illu .wh { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.illu .ok { fill: none; stroke: var(--done); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu text { font-family: var(--mono); font-size: 10px; fill: var(--ink); }
.illu text.ta { fill: var(--accent); }

/* Bovenbalk */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.topbar-in { max-width: 1200px; margin: 0 auto; padding: 12px var(--gutter-r) 12px var(--gutter); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg, .logo img { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.logo b { font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: .01em; }
.topnav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topnav a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; font-weight: 500; }
.topnav a:hover { color: var(--ink); }

/* Kleurstreep onder de bovenbalk en boven de voettekst, op elke pagina */
.topbar::after, .site-foot::before { content: ""; position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--lv1), var(--lv2) 35%, var(--lv3) 68%, var(--lv4)); }
.topbar::after { bottom: -1px; }
.site-foot { position: relative; }
.site-foot::before { top: -1px; }
.eyebrow { color: var(--lv3); }
.logo svg circle { stroke: var(--lv3); }

/* Voettekst */
.site-foot { border-top: 1px solid var(--line); background: var(--sheet); }
.site-foot-in { max-width: 1200px; margin: 0 auto; padding: 28px var(--gutter-r) 36px var(--gutter); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: .88rem; color: var(--ink-soft); }
.site-foot-in p { max-width: 62ch; }