/* ==========================================================================
   NewDegree, tokens
   De enige plek in het thema waar een kleurwaarde, een maat of een schaal staat.
   Alle andere stylesheets verwijzen hiernaar met var(). Een restyle is daarmee
   een waardenwissel en geen herbouw.
   Vastgesteld 9 september 2026, richting 1 "Papier".
   ========================================================================== */

:root{

  /* --- vlakken -------------------------------------------------------------
     Licht is leren, zwart is premium. Oranje is nooit een vlak.            */
  --nd-pagina:        #E7E4DE;   /* achtergrond van elke pagina, creme      */
  --nd-vlak:          #F2F0EC;   /* kaarten, tegels, blokken, gebroken wit  */
  --nd-vlak-wit:      #FFFFFF;   /* alleen waar een kaart op een kaart ligt */
  --nd-diep:          #2A2722;   /* premium en de banden. Warm donker, niet zwart.
                                    Was #141310 in 3.0.0, dat was te hard.
                                    Cream hierop is 11,8:1, dus ruim leesbaar. */
  --nd-diep-rand:     #201D19;   /* iets donkerder, voor een kader op diep     */
  --nd-lijn:          #C5C3BE;   /* kaders en scheidingen, zand             */
  --nd-lijn-zacht:    #DCD8D0;   /* scheiding binnen een kaart              */

  /* --- tekst ---------------------------------------------------------------
     Gemeten contrast staat erachter. De norm voor gewone tekst is 4,5:1,
     voor grote tekst (24px, of 19px vet) 3:1.                              */
  --nd-tekst:         #141310;   /* op creme 14,9:1                          */
  --nd-tekst-zacht:   #4A4845;   /* op creme  7,2:1, labels en bijschriften  */
  --nd-tekst-licht:   #6F6D68;   /* op creme  4,1:1, ALLEEN 16px en groter   */
  --nd-op-diep:       #E7E4DE;   /* creme op zwart 14,9:1                    */
  --nd-op-diep-zacht: rgba(231,228,222,.80); /* op zwart circa 9,5:1         */
  --nd-op-diep-lijn:  rgba(231,228,222,.50); /* kader van een knop op zwart  */
  --nd-op-diep-scheid:rgba(231,228,222,.18); /* scheidingslijn op zwart      */

  /* Sluier over een foto, zodat tekst erop leesbaar blijft. Donker aan de kant
     waar de tekst staat, lichter aan de andere kant, zodat de foto zichtbaar
     blijft. Cream op de donkere kant is ongeveer 10:1.                        */
  --nd-sluier:        linear-gradient(100deg, rgba(26,24,20,.88) 0%, rgba(26,24,20,.72) 46%, rgba(26,24,20,.34) 100%);
  --nd-sluier-zacht:  linear-gradient(180deg, rgba(26,24,20,0) 40%, rgba(26,24,20,.62) 100%);

  /* --- oranje --------------------------------------------------------------
     Twee waarden met een verschillende taak. Dit lost het leesbaarheids-
     probleem op dat in het kleurvoorstel zichtbaar werd:
       wit op #E15241  = 3,8:1  -> onvoldoende voor knoptekst
       wit op #C53D2F  = 5,1:1  -> voldoende
       #E15241 op zwart= 4,9:1  -> te zwak voor kleine gespatieerde labels
       #E15241 op creme= 3,0:1  -> onvoldoende voor kleine tekst
     Daarom: --nd-actie is het knopvlak, --nd-accent is vorm en nooit tekst. */
  --nd-actie:         #C53D2F;   /* knopvlak met witte tekst                 */
  --nd-actie-hover:   #A82F23;   /* knopvlak bij hover                       */
  --nd-accent:        #E15241;   /* lijnen, cijfers, streepjes, bolletjes    */
  --nd-accent-zacht:  #F6DED9;   /* zeer licht vlakje achter een cijfer      */

  /* --- typografie ---------------------------------------------------------- */
  --nd-font:          'Manrope', system-ui, -apple-system, sans-serif;
  --nd-font-display:  'Manrope', system-ui, sans-serif;

  --nd-t-xs:          clamp(11px, .72rem, 12px);   /* bovenschrift, label    */
  --nd-t-s:           14.5px;                       /* bijschrift            */
  --nd-t-m:           17px;                         /* basis                 */
  --nd-t-l:           19px;                         /* inleiding             */
  --nd-t-h4:          clamp(17px, 1.2vw + 12px, 20px);
  --nd-t-h3:          clamp(20px, 1.6vw + 13px, 26px);
  --nd-t-h2:          clamp(26px, 3.2vw + 8px, 40px);
  --nd-t-h1:          clamp(32px, 5vw + 6px, 58px);

  --nd-lh-kop:        1.14;
  --nd-lh-tekst:      1.62;
  --nd-sp-kop:        -.022em;   /* koppen iets aangetrokken                */
  --nd-sp-label:      .16em;     /* bovenschriften gespatieerd              */

  /* --- maatvoering --------------------------------------------------------- */
  --nd-maxw:          1100px;    /* de vaste kantlijn van de hele site      */
  --nd-maxw-lees:     760px;     /* leeskolom voor artikel en blog          */
  --nd-gutter:        28px;
  --nd-gap:           20px;
  --nd-sectie:        clamp(56px, 6vw, 84px);  /* verticale ruimte sectie   */

  --nd-radius:        14px;
  --nd-radius-s:      10px;
  --nd-radius-l:      20px;
  --nd-radius-pil:    40px;

  --nd-schaduw:       0 10px 30px rgba(20,19,16,.06);
}