/* ==========================================================================
   Patty Bakker — één schaal voor afgeronde hoeken
   ==========================================================================
   Op één pagina stonden 0, 4, 8, 10, 12 en 18px door elkaar: de update-kaart
   4px, de eventkaart 8px, de nestkaart 18px, een product 4px en de knop
   ernaast 12px. Dat leest als toeval, niet als ontwerp.

   De grootste veroorzaker is `--r`. pb-common.css zet die op 12px, maar
   Bricks declareert zijn eigen designtokens in een inline <style> ná alle
   themastylesheets en houdt `--r` daar op 4px. Alles wat var(--r) gebruikt -
   139 regels - werd dus 4px.

   Daarom staan de tokens hier op `body` en niet op `:root`: body ligt dichter
   bij de elementen dan de html-tag, dus deze waarden winnen van die inline
   Bricks-regel zonder !important en zonder aan Bricks te komen.

   DE SCHAAL — drie stappen, want meer heeft een site als deze niet nodig:

     10px  kleine dingen: chips, datumblokjes, invoervelden
     12px  de standaard: kaarten, foto's in kaarten, knoppen
     16px  grote vlakken: panelen, uitgelichte kaarten, banners
     999px pillen (labels) - die blijven rond

   Niet ronder dan 16px: daarboven gaat een kaart eruitzien als een knop.
   Niet strakker dan 10px: daaronder valt de afronding weg tegen de randen
   en schaduwen die de site verder gebruikt.

   De hard-gecodeerde waarden in de paginabestanden zijn in dezelfde slag naar
   deze drie stappen gebracht, zodat er geen tweede waarheid ontstaat.
   ========================================================================== */

body{
  --r-sm:10px;
  --r:12px;
  --r-md:12px;
  --r-lg:16px;

  --img-radius:12px;
  --img-radius-lg:16px;

  --btn-radius:12px;

  /* Pillen blijven pillen. */
  --r-pill:999px;
}