/* Raamdecoland - design tokens: de huisstijl op één plek (custom properties).
   Geladen op elke pagina vóór de andere bestanden van het thema (onderdelen.php). Nieuwe opmaak gebruikt alleen
   deze variabelen; oudere bestanden worden omgezet zodra ze toch worden aangepast.

   Kleurlogica (kleurronde 17 okt 2026), overal dezelfde:
   - lime = actief / bevestigd: actieve chip of filter (lime vlak, ink tekst, vinkje), vinkbolletjes, ingevulde stap,
     label "Nieuw", winkelwagenteller. Gekozen toestand = lime-tint vlak + 2px ink rand + lime vinkbolletje (nooit alleen
     een lime rand: 1,97:1 op wit). Lime nooit als tekst op licht.
   - groen vlak alleen in de kopen-flow: "In winkelwagen", "Doorgaan naar afrekenen", "Plaats bestelling".
   - magenta (#FE008C) = rand en decoratie (staalknop, kaarthover, h2-streep, badge Bestseller), NOOIT tekst;
     magenta-ink (#C4006A) = magenta tekst: links, prijzen op kaarten, kicker, tekst van de staalknop.
   - donker (ink) = anker: hoofdknoppen die niet kopen zijn, footer, overzichtkaarten; secundair wit met 2px ink rand.
   - geen roze vlakken, geen schaduwen behalve sticky balken, nooit twee tintblokken tegen elkaar. */

:root {
  --rdl-lime: #7bce0e;
  --rdl-lime-tint: #eef7e0;
  --rdl-magenta: #FE008C;        /* alleen randen/decoratie, nooit tekst (3,75:1) */
  --rdl-magenta-ink: #C4006A;    /* magenta tekst: 5,9:1 op wit, 5,4:1 op tint */
  --rdl-ink: #16201a;
  --rdl-ink-soft: #3b4436;
  --rdl-ink-muted: #5d6656;
  --rdl-tint: #f3f5ef;
  --rdl-border: #e3e6dd;
  --rdl-border-control: #8a9283; /* invoervelden en lege stapbolletjes, 3,2:1 */
  --rdl-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4 8.6 13.4 14.6 7' fill='none' stroke='%2316201a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ink vinkje voor op een lime bolletje */

  /* Oudere namen (blijven werken, verwijzen naar de tokens hierboven) */
  --rdl-lime-donker: #5f9f0b;
  --rdl-lime-licht: var(--rdl-lime-tint);
  --rdl-lime-vlak: var(--rdl-lime-tint);
  --rdl-logo-magenta: var(--rdl-magenta);
  --rdl-magenta-hover: #a80059;
  --rdl-tekst: var(--rdl-ink);
  --rdl-tekst-grijs: var(--rdl-ink-muted);
  --rdl-rand: var(--rdl-border);
  --rdl-invoerrand: var(--rdl-border-control);
  --rdl-vlak: var(--rdl-tint);
  --rdl-wit: #fff;
  /* Op donkere vlakken (Overzicht-kaart in de winkelwagen): tekst op ink, alle 4,5:1 of meer */
  --rdl-donker: var(--rdl-ink);
  --rdl-tekst-op-donker: #fff;          /* 16,7:1 */
  --rdl-tekst-zacht-op-donker: #c9d1c4; /* ca. 10:1 */
  --rdl-rand-op-donker: #2f382b;
  --rdl-focus-op-donker: 2px solid #fff;

  --rdl-radius: 12px;
  --rdl-radius-pil: 999px;
  --rdl-radius-staal: 8px;       /* een staal is overal een vierkantje met radius 8px */

  --rdl-font-kop: Sora, system-ui, sans-serif;
  --rdl-font-tekst: Figtree, system-ui, sans-serif;

  --rdl-tik: 44px;               /* minimale tikdoelgrootte */
  --rdl-focus: 2px solid var(--rdl-tekst);
  --rdl-focus-offset: 2px;

  --rdl-marge: 20px;             /* zijmarge van de pagina (gelijk aan de homepage) */
  --rdl-max: 1290px;

  --rdl-foto-vlak: #e9ebe6;      /* surface-image: achter productfoto's die niet bijgesneden worden (object-fit: contain) */

  /* Afstanden: de schaal van het Design System (tokens.json). Gebruik alleen deze, geen losse marges per blok.
     --rdl-sectie = tussen secties (40px mobiel, 64px vanaf 768px), --rdl-blok = tussen blokken binnen een sectie,
     --rdl-kaart-pad = padding in kaarten. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --rdl-sectie: var(--space-10);
  --rdl-blok: var(--space-8);
  --rdl-kaart-pad: var(--space-6);
}
@media (max-width: 359px) { :root { --rdl-marge: 16px; } }
@media (min-width: 768px) { :root { --rdl-marge: 24px; --rdl-sectie: var(--space-16); } }

/* Eén focusrand voor alle nieuwe onderdelen (klasse rdl-ui op het buitenste element). */
.rdl-ui a:focus-visible, .rdl-ui button:focus-visible, .rdl-ui summary:focus-visible,
.rdl-ui input:focus-visible + .rdl-lp-kaart__staalknop { outline: var(--rdl-focus); outline-offset: var(--rdl-focus-offset); }

/* Alleen voor schermlezers. */
.rdl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }