/* ============================================================
   VB_2 — VirtueelBrein huisstijl (redesign)
   Herbruikbare stijltokens: kleuren, typografie, vorm, schaduw.
   Bron: design_handoff_virtueelbrein (Claude Design), 2026-08-07.
   ============================================================ */

:root {
  /* Kleuren - groen */
  --vb-green-900: #0c2721; /* diepste groen (footer) */
  --vb-green-800: #10312a; /* primair donkergroen */
  --vb-green-600: #1c4d42; /* bosgroen */
  --vb-green-400: #2e8b6f; /* fris accentgroen */
  --vb-green-tint: #eef2ec; /* zacht groen vlak */
  --vb-green-chip: #e7ece3; /* chip/badge achtergrond */

  /* Kleuren - amber/oranje */
  --vb-orange-700: #b85c11; /* hover/donker */
  --vb-orange-600: #c96a1c; /* primaire accent (pill, kop-logo) */
  --vb-orange-300: #e6a35a; /* licht amber accent */

  /* Kleuren - papier & neutraal */
  --vb-paper:      #f6f1e9; /* pagina-achtergrond */
  --vb-paper-2:    #fbf8f2; /* lichte sectie */
  --vb-paper-3:    #f1eadf; /* getinte strook */
  --vb-surface:    #ffffff; /* kaart */
  --vb-border:     #e4dccd; /* zachte rand */
  --vb-border-2:   #ece4d6; /* kaartrand */

  /* Tekst */
  --vb-ink:        #182420; /* hoofdtekst */
  --vb-ink-soft:   #2c352f;
  --vb-muted:      #4a554d; /* secundair */
  --vb-muted-2:    #6b7568; /* labels/subtiel */

  /* Typografie */
  --vb-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vb-fw-regular: 400;
  --vb-fw-medium: 500;
  --vb-fw-semibold: 600;
  --vb-fw-bold: 700;
  --vb-fw-black: 800;
  --vb-lh: 1.6;

  /* Vorm */
  --vb-radius-sm: 12px;
  --vb-radius: 16px;
  --vb-radius-lg: 22px;
  --vb-radius-xl: 28px;
  --vb-radius-pill: 999px;

  /* Schaduw */
  --vb-shadow-card: 0 3px 12px -6px rgba(16,49,42,.2);
  --vb-shadow-cta:  0 10px 26px -10px rgba(201,106,28,.75);
  --vb-shadow-lift: 0 26px 54px -26px rgba(16,49,42,.55);

  /* Ritme */
  --vb-section-pad: clamp(56px, 7vw, 100px);
  --vb-page-x: clamp(20px, 5vw, 56px);
  --vb-maxw: 1240px;
}

/* Herbruikbare bouwstenen */
.vb-eyebrow {
  font-size: .8rem; font-weight: var(--vb-fw-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vb-orange-600);
}
.vb-cta {
  display: inline-block; padding: 15px 32px;
  border-radius: var(--vb-radius-pill);
  background: var(--vb-orange-600); color: #fff;
  font-weight: var(--vb-fw-bold); text-decoration: none;
  box-shadow: var(--vb-shadow-cta);
  border: none; cursor: pointer; font-family: var(--vb-font); font-size: 1rem;
  transition: background .15s;
}
.vb-cta:hover { background: var(--vb-orange-700); }
.vb-chip {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--vb-surface); border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-pill); padding: 9px 20px 9px 10px;
  font-weight: var(--vb-fw-medium); color: var(--vb-ink-soft);
}
.vb-card {
  background: var(--vb-surface); border: 1px solid var(--vb-border-2);
  border-radius: var(--vb-radius); box-shadow: var(--vb-shadow-card);
}