/* Gebr. van der Lee huisstijl 2025 (bron: gvdl-huisstijl): rood #e63027, geel #ffe000 (alleen als signaal),
   donkerblauw #133a59 als steunkleur; koppen in Josefin Sans, tekst in Roboto (beide SIL Open Font License). */
@font-face { font-family: 'Josefin Sans'; src: url('/assets/fonts/JosefinSans-VariableFont_wght.ttf') format('truetype'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/Roboto-VariableFont.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

html, .dark {
  --brand-purple: #e63027;
  --surface-submit: #e63027;
  --surface-submit-hover: #c8261e;
  --ring-primary: #e63027;
  --vdl-rood: #e63027;
  --vdl-geel: #ffe000;
  --vdl-blauw: #133a59;
}
html { --header-primary: #ffffff; }

html, body, button, input, textarea, select { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
h1, h2, h3, .text-2xl, .text-3xl { font-family: 'Josefin Sans', 'Roboto', sans-serif !important; font-weight: 700; letter-spacing: 0.01em; }

/* Accenten: links, actieve schakelaars en de focusrand in VDL-rood. */
a { color: var(--vdl-rood); }
.dark a { color: #f18d89; }
:focus-visible { outline-color: var(--vdl-rood) !important; }
button[role='switch'][aria-checked='true'], [data-state='checked'] { background-color: var(--vdl-rood) !important; }

/* Dunne gele signaallijn bovenaan (geel alleen als accent, nooit als vlak). */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vdl-rood) 0 85%, var(--vdl-geel) 85% 100%); z-index: 9999; pointer-events: none; }

/* LibreChat gebruikt groen voor links en accenten; bij VDL is dat donkerblauw (licht) of lichtgrijs (donker). */
.text-green-500, .text-green-600, .text-green-700, .hover\:text-green-700:hover { color: var(--vdl-blauw) !important; }
.dark .text-green-500, .dark .text-green-600, .dark .text-green-700 { color: #d9dad9 !important; }
.bg-green-500, .bg-green-600, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--vdl-rood) !important; }
.border-green-500, .focus\:border-green-500:focus { border-color: var(--vdl-rood) !important; }