/* Koppelt de tokens van de thuisbatterijscan (dysun.css op dysunenergy.nl) aan de tokens van deze site.
   thuisbatterijscan.css is een kopie en blijft ongewijzigd; alleen hier staat de vertaling.
   Gedefinieerd op .tbs zelf, dus in een lichte sectie (.section--licht) volgen de waarden vanzelf
   de lichte tokens van die sectie. Laden NA thuisbatterijscan.css niet nodig: variabelen worden pas
   bij het tekenen opgelost. */
.tbs {
  --c-text:         var(--tx);
  --c-text-soft:    var(--tx-soft);
  --c-text-muted:   var(--tx-mut);
  --c-yellow:       var(--gold);
  --c-yellow-hover: var(--gold-2);
  --c-yellow-dim:   var(--gold-dim);
  --c-yellow-glow:  var(--gold-glow);
  --c-gold-text:    var(--gold-tx);
  --c-surface-2:    var(--s2);
  --c-surface-3:    var(--s3);
  --c-border-strong: var(--line-ui);
  --c-border-yellow: var(--gold-glow);
  --shadow-yellow:  0 4px 24px var(--gold-dim);
  /* Hoeken zoals de site ze al gebruikt (10, 12, 16 px en rond); --r-sm en --r-xl komen daar niet voor. */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   18px;
  --r-full: 999px;
  /* Melding-kleuren: de site heeft die niet. Waarden uit dysun.css, donker en licht. */
  --c-success-text: #86EFAC;
  --c-success-dim:  rgba(34,197,94,0.12);
  --c-danger-text:  #FCA5A5;
  --c-danger-dim:   rgba(239,68,68,0.12);
}
.section--licht .tbs, .section--wit .tbs {
  --c-success-text: #15803D;
  --c-success-dim:  rgba(21,128,61,0.10);
  --c-danger-text:  #B91C1C;
  --c-danger-dim:   rgba(185,28,28,0.10);
}

/* Kop boven de scan: de scan is gecentreerd in een kolom van 720 px, dus de kop ook (anders staat hij
   links tegen de rand van de pagina en de scan in het midden). */
.tbs-kop { max-width: 720px; margin-inline: auto; text-align: center; }
.tbs-kop p, .tbs-kop .lead { margin-inline: auto; }
.tbs-mount + noscript p { text-align: center; }

/* De site beperkt elke <p> tot 68ch (site.css). In de scan maakt dat het kleine drukwerk smaller dan de
   kolom terwijl de tekst gecentreerd is: het blok stond 79 px links van het midden. :where() houdt de
   specificiteit op 0, zodat de eigen maten van de scan (bijvoorbeeld .tbs-hint met 520 px) blijven gelden. */
:where(.tbs) p { max-width: none; }

/* Aanbevolen en Terugverdientijd: de tweede kolom had 20 px opvulling extra, waardoor de twee waarden
   niet symmetrisch rond de scheidingslijn stonden. Gelijk aan beide kanten. */
.tbs .tbs-mini { padding-inline: 10px; }
.tbs .tbs-mini + .tbs-mini { padding-left: 10px; }