/* digidenkers — huisstijl
   Te gebruiken door de homepage én door de lessen zelf:
   <link rel="stylesheet" href="/css/huisstijl.css">            */

@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url("../fonts/fredoka-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url("../fonts/fredoka-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url("../fonts/fredoka-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

:root{
  /* basis */
  --inkt:#1F2A44;
  --inkt-2:#2E3A5C;
  --papier:#FFF8EC;
  --papier-2:#FBEBD0;
  --wit:#FFFFFF;
  --tekst:#1F2A44;
  --tekst-zacht:#55607A;

  /* categorieën */
  --programmeren:#FFC83D;
  --veiligheid:#FF6B5B;
  --hoe-werkt-het:#3CCFA0;
  --data-ai:#8B7CF6;

  /* typografie */
  --font-kop:"Fredoka","Baloo 2",system-ui,sans-serif;
  --font-tekst:"Atkinson Hyperlegible",system-ui,sans-serif;
  --font-code:"JetBrains Mono",ui-monospace,monospace;

  /* vormen */
  --rond-s:10px;
  --rond:18px;
  --rond-l:28px;
  --schaduw:0 2px 0 rgba(31,42,68,.08),0 8px 24px rgba(31,42,68,.08);
  --tik:48px; /* minimale tikhoogte voor de tablet */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tekst);font:400 1.125rem/1.6 var(--font-tekst)}
h1,h2,h3{font-family:var(--font-kop);font-weight:700;line-height:1.15;margin:0 0 .5em}
code,kbd,pre{font-family:var(--font-code)}
a{color:inherit}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--programmeren);outline-offset:3px;border-radius:6px}

.knop{display:inline-flex;align-items:center;gap:.5em;min-height:var(--tik);padding:.6em 1.3em;border:0;border-radius:999px;
  background:var(--inkt);color:var(--papier);font:600 1.1rem var(--font-kop);text-decoration:none;cursor:pointer;
  box-shadow:0 4px 0 #0e1527;transition:transform .08s}
.knop:active{transform:translateY(3px);box-shadow:0 1px 0 #0e1527}
.knop.geel{background:var(--programmeren);color:var(--inkt);box-shadow:0 4px 0 #d9a21c}