/* digi-klas huisstijl 2026 - v00364
   Geeft de hub dezelfde uitstraling als digi-klas.com: Lexend, kobaltblauw,
   donkerblauwe koppen en rechte knoppen.
   Laadt als laatste stylesheet, vlak voor de sluitende head-tag, zodat hij
   wint van de opmaak die per pagina in een style-blok staat. */

:root,
html body {
  /* de paarse variabelen van de hub wijzen nu naar het kobalt van de site */
  --paars:        #0047AB;
  --paars-dark:   #123B7E;
  --paars-licht:  #EAF0FA;

  --c-digi:       #0047AB;
  --c-digi-dark:  #123B7E;
  --c-digi-soft:  #EAF0FA;

  --dk-kobalt:        #0047AB;
  --dk-kobalt-donker: #123B7E;
  --dk-navy:          #16204B;
  --dk-lucht:         #EAF0FA;

  --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

html body,
body button,
body input,
body select,
body textarea,
body .btn-primary,
body .btn-secondary {
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Koppen in het donkerblauw van de site */
body h1,
body h2,
body h3,
body h4 {
  color: #16204B;
  letter-spacing: -0.01em;
}

/* Knoppen: rechte hoeken en kobaltblauw */
body .btn-primary,
body .knop-primair,
body button.primair,
body .dk-btn,
body .btn.primair,
body button[type="submit"] {
  background: #0047AB;
  border-color: #0047AB;
  color: #FFFFFF;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body .btn-primary:hover:not(:disabled),
body .knop-primair:hover,
body button.primair:hover,
body .dk-btn:hover,
body .btn.primair:hover,
body button[type="submit"]:hover {
  background: #123B7E;
  border-color: #123B7E;
  box-shadow: none;
}

body .btn-secondary,
body .knop-tweede,
body .btn.tweede {
  border-radius: 0;
  font-weight: 700;
  color: #0047AB;
  border-color: #0047AB;
}

/* Invoervelden krijgen de kobaltrand bij focus in plaats van de paarse */
body input:focus,
body select:focus,
body textarea:focus {
  border-color: #0047AB;
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.15);
}

body .codebox input.cell.letter {
  background: #EAF0FA;
  color: #123B7E;
}

body a { color: #0047AB; }
body a:hover { color: #123B7E; }