:root {
    --kleur-petrol: #104f55;
    --kleur-teal: #32746d;
    --kleur-mint: #9ec5ab;
    --kleur-zacht-blauw: #c4d7f2;
    --kleur-gebroken-wit: #f0f7ee;

    --oppervlak-achtergrond: #f0f7ee;
    --oppervlak-primair: #ffffff;
    --oppervlak-subtiel: #f7f9f6;
    --oppervlak-uitgeschakeld: #d7e0dc;

    --tekst-primair: #172426;
    --tekst-secundair: #59696a;
    --tekst-uitgeschakeld: #8b9997;
    --tekst-invers: #ffffff;

    --rand-standaard: #d7e0dc;
    --rand-sterk: #aab9b5;

    --actie-primair: #104f55;
    --actie-primair-hover: #0d4348;
    --actie-primair-actief: #0a373b;

    --status-succes: #287a55;
    --status-waarschuwing: #a86416;
    --status-fout: #b63a3a;
    --status-informatie: #416e9b;

    --staat-geselecteerd: #e4efeb;
    --mint-subtiel: #e7f0e9;

    --afstand-4: 4px;
    --afstand-8: 8px;
    --afstand-12: 12px;
    --afstand-16: 16px;
    --afstand-24: 24px;
    --afstand-32: 32px;
    --afstand-48: 48px;
    --afstand-64: 64px;

    --afronding-klein: 8px;
    --afronding-middel: 12px;
    --afronding-groot: 16px;
    --afronding-pil: 999px;

    --breedte-navigatie: 72px;
    --breedte-navigatie-open: 262px;
    --hoogte-bovenbalk: 72px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background-color: var(--oppervlak-achtergrond);
    color: var(--tekst-primair);

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}
/* Beecept basisvelden: één consistente invoerstijl in de hele applicatie. */
:where(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],input[type="number"],input:not([type]),textarea,select){min-height:40px;width:100%;border:1px solid var(--rand-standaard);border-radius:8px;background:var(--oppervlak-primair);color:var(--tekst-primair);padding:9px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}:where(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],input[type="number"],input:not([type]),textarea,select):hover{border-color:var(--rand-sterk)}:where(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],input[type="number"],input:not([type]),textarea,select):focus{border-color:var(--kleur-teal);box-shadow:0 0 0 2px rgba(50,116,109,.14)}:where(input,textarea,select):disabled{background:var(--oppervlak-uitgeschakeld);color:var(--tekst-uitgeschakeld);cursor:not-allowed}::placeholder{color:var(--tekst-uitgeschakeld)}

h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-family:inherit}h1,h2,h3,h4,h5,h6{letter-spacing:0}

/* Beecept typografie — centrale schaal. Pagina's erven deze waarden. */
:root{
 --letter-klein:12px;
 --letter-basis:14px;
 --letter-sectie:16px;
 --letter-pagina:28px;
 --regel-klein:16px;
 --regel-basis:20px;
 --regel-sectie:24px;
 --regel-pagina:36px;
}
body{font-size:var(--letter-basis);line-height:var(--regel-basis)}
h1{font-size:var(--letter-pagina);line-height:var(--regel-pagina);font-weight:600}
h2{font-size:var(--letter-sectie);line-height:var(--regel-sectie);font-weight:600}
h3,h4{font-size:var(--letter-basis);line-height:var(--regel-basis);font-weight:600}
button,input,select,textarea{font-size:var(--letter-basis);line-height:var(--regel-basis)}