/* ==========================================================================
   DRUKCASE — Merk (kleuren + typografie)
   Bron van waarheid voor de huisstijl. Geladen ná style.css zodat het de
   theme-tokens overschrijft; widgets (.dc) en header (.dch) dragen hun eigen
   tokens en pakken dezelfde waarden over.
   ========================================================================== */
:root {
    /* Kleuren */
    --kleur-oranje:        #E37D19;  /* primair, CTA, links, accenten */
    --kleur-oranje-hover:  #B85F0E;  /* hover / actief */
    --kleur-oranje-zacht:  #FAE5D2;  /* badges, accentvlakken */
    --kleur-antraciet:     #1C1C1C;  /* koppen, logo, donkere secties */
    --kleur-tekst:         #57514B;  /* bodytekst op wit */
    --kleur-creme:         #FAF6F0;  /* sectie-achtergrond */
    --kleur-zand:          #EFEAE2;  /* subtiele secties, randen */
    --kleur-wit:           #FFFFFF;

    /* Typografie */
    --font-kop:  "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;

    /* --- Remap bestaande theme-tokens naar de nieuwe huisstijl --- */
    --white-color:        var(--kleur-wit);
    --dark-white-color:   var(--kleur-creme);
    --black-color:        var(--kleur-antraciet);
    --dark-black-color:   var(--kleur-antraciet);
    --black-color-opc:    28, 28, 28;
    --title-color:        var(--kleur-antraciet);
    --dark-title-color:   var(--kleur-antraciet);
    --title-color-opc:    28, 28, 28;
    --title-color2:       var(--kleur-antraciet);
    --dark-title-color2:  var(--kleur-antraciet);
    --text-color:         var(--kleur-tekst);
    --dark-text-color:    var(--kleur-creme);
    --text-color-opc:     87, 81, 75;
    --global-text-color:  var(--kleur-tekst);
    --primary-color1:     var(--kleur-oranje);
    --primary-color1-opc: 227, 125, 25;
    --primary-color2:     var(--kleur-oranje-hover);
    --font-lora:          var(--font-kop);
    --font-suse:          var(--font-kop);
    --font-dmsans:        var(--font-body);
}

/* Basis (alleen buiten de gescopete .dc / .dch componenten) */
body {
    font-family: var(--font-body);
    color: var(--kleur-tekst);
    background: var(--kleur-wit);
    line-height: 1.65;
}
h1, h2, h3 {
    font-family: var(--font-kop);
    color: var(--kleur-antraciet);
    font-weight: 500;
    line-height: 1.15;
}
h4, h5, h6 { font-family: var(--font-kop); color: var(--kleur-antraciet); }

a { color: var(--kleur-oranje); }
a:hover { color: var(--kleur-oranje-hover); }

/* Herbruikbare primaire knop */
.btn-primair {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: var(--kleur-oranje);
    color: var(--kleur-antraciet);
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.btn-primair:hover { background: var(--kleur-oranje-hover); color: #fff; }

/* Tekstselectie in merkkleur */
::selection { background: var(--kleur-oranje-zacht); color: var(--kleur-antraciet); }