/* ── IVB Netwerk Portaal — design-tokens.css v1 (2026-10-12, dev-portal sprint dag 1) ──
   UI-design-baseline: gedeelde tokens + componenten in de .ivb- namespace.
   Use: laad per pagina NA assets/style.css:
     <link rel="stylesheet" href="/assets/style.css?v=32">
     <link rel="stylesheet" href="/assets/design-tokens.css?v=1">
   Regels baseline:
   1. Kleuren, afstand, radius en schaduw alleen via deze tokens (geen losse hex in component-CSS).
   2. Nieuwe componenten beginnen met .ivb- — geen globals, geen !important, geen inline stijlen in templates.
   3. Geen emoji in UI; pictogrammen als inline SVG.
   4. Donker thema via prefers-color-scheme; alleen --ivb- tokenwaarden flippen (oude pagina's blijven onaangetast). */

:root {
 /* Merk (afgeleid van logo: hemelsblauw -> cyaan) */
 --ivb-brand: #0057c2;
 --ivb-brand-dark: #003d8f;
 --ivb-brand-light: #e8f1fd;
 --ivb-accent: #14a5e8;
 /* Oppervlak */
 --ivb-bg: #f3f7fc;
 --ivb-card: #ffffff;
 --ivb-ink: #16202b;
 --ivb-ink-muted: #5d6b7c;
 --ivb-ink-faint: #94a1b1;
 --ivb-border: #e2e9f2;
 --ivb-border-strong: #cdd8e6;
 /* Status */
 --ivb-ok: #0d9e5f;
 --ivb-ok-light: #e5f7ee;
 --ivb-warn: #e08c00;
 --ivb-warn-light: #fdf4e3;
 --ivb-err: #e23c3c;
 --ivb-err-light: #fdeeee;
 /* Ruimte (4px-schaal) */
 --ivb-s1: 4px;  --ivb-s2: 8px;  --ivb-s3: 12px; --ivb-s4: 16px;
 --ivb-s5: 24px; --ivb-s6: 32px; --ivb-s7: 48px;
 /* Vorm */
 --ivb-r1: 8px; --ivb-r2: 12px; --ivb-r3: 18px; --ivb-r-pill: 999px;
 --ivb-shadow: 0 1px 3px rgba(22,42,70,.05), 0 6px 20px rgba(22,42,70,.05);
 --ivb-ring: 0 0 0 2px var(--ivb-card), 0 0 0 4px var(--ivb-accent);
 --ivb-speed: .18s ease;
}

@media (prefers-color-scheme: dark) {
 :root {
  --ivb-bg: #0e1622;
  --ivb-card: #16202c;
  --ivb-ink: #e6edf5;
  --ivb-ink-muted: #9fb0c1;
  --ivb-ink-faint: #6c7f92;
  --ivb-border: #26384a;
  --ivb-border-strong: #3a4f64;
  --ivb-brand-light: #11305e;
  --ivb-ok-light: #103c2a;
  --ivb-warn-light: #3f2d0a;
  --ivb-err-light: #451a1a;
  --ivb-shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
 }
}

/* ── Paginakop ── */
.ivb-page-head { margin-bottom: var(--ivb-s5); }
.ivb-page-head h1 { font-size: 1.25rem; font-weight: 700; color: var(--ivb-ink); }
.ivb-page-head .ivb-meta { margin-top: var(--ivb-s1); }

.ivb-meta { font-size: .85rem; color: var(--ivb-ink-muted); }
.ivb-foot { margin-top: var(--ivb-s5); }
.ivb-mt { margin-top: var(--ivb-s4); }

/* ── Kaart ── */
.ivb-card {
 background: var(--ivb-card);
 border: 1px solid var(--ivb-border);
 border-radius: var(--ivb-r2);
 box-shadow: var(--ivb-shadow);
 padding: var(--ivb-s5);
}
.ivb-card-head {
 display: flex; align-items: center; justify-content: space-between;
 gap: var(--ivb-s3); margin-bottom: var(--ivb-s4);
}
.ivb-card-head h2 { font-size: .98rem; font-weight: 700; color: var(--ivb-ink); }

/* ── Raster ── */
.ivb-grid { display: grid; gap: var(--ivb-s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

/* ── Knoppen ── */
.ivb-btn {
 display: inline-block; border: 0; cursor: pointer;
 background: var(--ivb-brand); color: #fff;
 font: inherit; font-weight: 700; font-size: .9rem;
 padding: var(--ivb-s2) var(--ivb-s4);
 border-radius: var(--ivb-r1);
 transition: filter var(--ivb-speed), transform var(--ivb-speed);
 text-decoration: none;
}
.ivb-btn:hover { filter: brightness(1.08); }
.ivb-btn:active { transform: translateY(1px); }
.ivb-btn--ghost { background: transparent; color: var(--ivb-brand); border: 1px solid var(--ivb-border-strong); }
.ivb-btn--danger { background: var(--ivb-err); }
.ivb-btn--small { font-size: .8rem; padding: var(--ivb-s1) var(--ivb-s3); }
.ivb-klok-big { display: block; width: 100%; padding: var(--ivb-s3) var(--ivb-s4); font-size: 1rem; }

/* ── Badges en pills ── */
.ivb-badge {
 display: inline-block; padding: 2px var(--ivb-s3);
 border-radius: var(--ivb-r-pill);
 background: var(--ivb-brand-light); color: var(--ivb-brand-dark);
 font-size: .75rem; font-weight: 700;
}
.ivb-pill {
 display: inline-block; padding: 3px var(--ivb-s3);
 border-radius: var(--ivb-r-pill);
 background: var(--ivb-bg); border: 1px solid var(--ivb-border);
 color: var(--ivb-ink-muted); font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.ivb-pill--open { background: var(--ivb-ok-light); border-color: transparent; color: var(--ivb-ok); }
.ivb-pill--warn { background: var(--ivb-warn-light); border-color: transparent; color: var(--ivb-warn); }
.ivb-pill--err { background: var(--ivb-err-light); border-color: transparent; color: var(--ivb-err); }

/* ── Flashmeldingen ── */
.ivb-flash {
 padding: var(--ivb-s3) var(--ivb-s4);
 border-radius: var(--ivb-r1);
 font-size: .88rem; font-weight: 600;
 margin-bottom: var(--ivb-s4);
 border: 1px solid var(--ivb-border);
}
.ivb-flash--ok { background: var(--ivb-ok-light); color: var(--ivb-ok); border-color: transparent; }
.ivb-flash--err { background: var(--ivb-err-light); color: var(--ivb-err); border-color: transparent; }

/* ── Formuliervelden ── */
.ivb-field { display: block; margin-bottom: var(--ivb-s4); }
.ivb-field span { display: block; font-size: .8rem; font-weight: 700; color: var(--ivb-ink-muted); margin-bottom: var(--ivb-s1); }
.ivb-input, .ivb-textarea {
 width: 100%; padding: var(--ivb-s2) var(--ivb-s3);
 border: 1px solid var(--ivb-border-strong);
 border-radius: var(--ivb-r1);
 background: var(--ivb-bg); color: var(--ivb-ink);
 font: inherit; font-size: .9rem;
}
.ivb-textarea { min-height: 96px; resize: vertical; }

/* ── Tabellen ── */
.ivb-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ivb-table th {
 text-align: left; font-size: .72rem; font-weight: 700;
 text-transform: uppercase; letter-spacing: .04em;
 color: var(--ivb-ink-faint);
 padding: var(--ivb-s2) var(--ivb-s3);
 border-bottom: 1px solid var(--ivb-border-strong);
}
.ivb-table td { padding: var(--ivb-s2) var(--ivb-s3); border-bottom: 1px solid var(--ivb-border); color: var(--ivb-ink); }
.ivb-table tbody tr:last-child td { border-bottom: 0; }
.ivb-table tbody tr:hover { background: var(--ivb-bg); }

/* ── Toegankelijkheid ── */
.ivb-btn:focus-visible, .ivb-input:focus-visible, .ivb-textarea:focus-visible {
 outline: 2px solid var(--ivb-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
 .ivb-btn { transition: none; }
}/* ── v1.1 aanvullingen (sprint dag 2: 2FA, projecten, klok-correctie) ── */
.ivb-meta p, .ivb-meta ol, .ivb-meta ul, .ivb-meta li { margin: 0 0 var(--ivb-s2); }
.ivb-meta ol { padding-left: 1.25rem; }
.ivb-card--highlight { border-color: var(--ivb-accent); border-width: 1px; }
.ivb-card--sub { margin-bottom: var(--ivb-s3); border-color: var(--ivb-border-strong); }
.ivb-secret {
 font-family: monospace; font-size: 1.25rem; font-weight: 800; letter-spacing: 2px;
 color: var(--ivb-ink); background: var(--ivb-bg);
 padding: var(--ivb-s2) var(--ivb-s4); border-radius: var(--ivb-r1);
 display: inline-block;
}
.ivb-code { text-align: center; letter-spacing: 4px; font-weight: 700; }
.ivb-filters { display: flex; gap: var(--ivb-s3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--ivb-s4); }
.ivb-filters .ivb-field { margin-bottom: 0; }
.ivb-actions { display: flex; gap: var(--ivb-s2); flex-wrap: wrap; }
.ivb-mt-s { margin-top: var(--ivb-s2); }
.ivb-filters--flush { margin-bottom: 0; }